I got a really weird thing going on.
On my currently developing website the background positioning of social and e-mail buttons differ a lot between my mac from other computers.
This is how it looks on my screen on resolution 1600 x 1000 (I also checked on other so it's probably not the case)
(source: mikolajgrzyb.com)
The Question is: Why does it happen and how can i fix this problem (to display correctly on every computer)?
You're mixing em with px when you position the backgrounds in the CSS, which is probably the reason why it looks different.
.bluebtn {
background: url("../images/icons.svg") no-repeat scroll 0 -2.7em transparent;
}
You should use em for font-sizing only.
Check some of these links out for an explanation for when to use what:
em, px, pt, cm, in…
Why em instead of px?
em should be used when you want to define something relative to the size of characters in the current font. Unless you have overridden
font style (using px units for example), this will be affected by the
choice of fonts in the user's browser or OS if they have made one, so
it does not make sense to use em as a general unit of length except
where you specifically want it to scale as the font size scales.
Helpful suggestions
Preload the images. The first time hovering over your buttons makes it lag.
The lists on your right are annoying. Consider a more user friendly approach where it doesn't scroll back up after you mouse out, use the click-to-open click-to-close approach. The approach you're using now makes it difficult to navigate between the list items.
It also seems to get stuck at times.
Consider using a different color than blue for text that aren't links. It can be confusing to the average users who are used to blue text for links.
You misspelled processing, responsive, cutting, preparing and layout.
I should always be capitalized.
Related
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
Shouldn't we use "Pixel" for anything in CSS if we are making a site for mobile devices?
px for layout and font. Should we only use em or % for everything on mobile sites?
and if i'm using <img> then should i defined height and width for <img> in HTML code? or it's good to not to define. or i should define size in css for <img> also in % or em
Edit:
Note: Question is not again about px vs em debate My question is specifically for separate mobile site. when we are making separate mobile site with different domain or sub-domain.
Everything depends on the context. Like with CSS for desktop browsers, there are situations where using pixels is not a good idea (for example mostly for font sizes), and there are situations where pixels are still very useful (for example fixed layout).
In general, avoid using pixels every-time you don't need to. For example, there is no reason to do it for fonts: it's not you, but the user who chooses if the font must be big on a high-res screen or not. Using percentages also helps you somehow to remember that a piece of text can never have an exact width and height, and force you to adapt your design.
Now, sometimes, for cost or other reasons, you have to do fixed layouts, or at least some parts of a page, associating images and text, have to be fixed in size. In this case, there is nothing wrong to use pixels. If I have a <div/> with some text inside and a pretty 200×100px background, the most obvious thing is to set the width and the height of this <div/> to 200 and 100 pixels.
if i'm using <img> then should i defined height and width for <img> in HTML code?
IMHO, you never should do that. The size of an image is purely a layout/design thing, so it has nothing to do with HTML, but with CSS.
Do you have to specify the size of an image in CSS? If you want your image to be displayed 100%, than no, you don't have to: this is by default in every browser. If you want to scale it down and, for some reasons, you can't scale the image itself than save the scaled image on server, than yes, you may want to specify the size of the image.
Remember than sending a big image and scale is down on client side is always a bad idea. The visual quality might be affected, and the client will have to wait more to see the image appear.
Actually, I recommend using different CSS files (and sometimes different templates) for browsers vs. mobile. Mobile isn't just a smaller browser, it is a fundamentally different user experience.
As for the pixel issue, I tend to use pixels in my base CSS rules and then use % or em's everywhere else so that things scale up and down together. It doesn't always work the way I would like, but it normally allows a lot of tweaking during development.
I read somewhere on a site :
In principle, using a px measurement for font-size is not a good idea. A handful of browsers will prevent the font from being resized by the user if you do this.
Is this right??
Is this right??
Well, yes, certainly there are a few (generally older) browsers that won't let you resize the text when it's sized in px, pt, in, mm and so on.
But even in browsers with a working zoom, it's polite to work relative to the user's stated preference for font size, so they don't have to resize the text or zoom the page manually to make it comfortable. (Fixed fonts plus fixed width page can be particularly bad for this in page-zooming browsers as zooming up is likely to make the columns of text too wide to fit the screen.)
In principle, using a px measurement for font-size is not a good idea.
I wouldn't go so far as to say it's always a bad idea.
There are often elements on the page where you want the text to be sized to match an image (say, a header with text below it that should fit more-or-less without wrapping, or text above a background image made to fit it). In that case you should use px to make fonts and images line up nicely.
For the page's main body text, yes, it's nicer to use em/% and let the user decide the size. But for text that plays a part in the page's graphical layout, px fonts are typically the best bet.
The issue is mainly with aspect ratio. Let's say my resolution is 1024x768 for an aspect ratio of 1.33. For 1920x1080, the aspect ratio becomes 1.77, meaning that any image displayed at a specific pixel width and height will be a different size in inches due to the scaling effect of the aspect ratio. The same basic issue exists if you zoom as you are effectively using the aspect ratio in the zoom window.
Most websites get around this by using em which, to be honest, suffers from some of the same downfalls as any other rendering mode. Even "device independent pixels" are based on the DPI of a monitor. So, use em knowing that it just has less faults than px, not because it's perfect.
Read the following article if you want a more in depth study.
http://www.w3.org/WAI/GL/css2em.htm
Yes, at least IE6 & IE7 do that. Take a look at How to Size Text in CSS.
Quoting CSS: The Definitive Guide by Eric Meyer
There is one more value that is
potentially the same as 36pt, and
that's 36px, which would be the same
physical distance if the display
medium is 72 pixels-per-inch (ppi).
However, there are very few monitors
with that setting anymore. Most are
much higher, in the range of 96ppi to
120ppi. Many very old Macintosh web
browsers treat points and pixels as
though they are equivalent, so the
values 14pt and 14px may look the same
on them. This is not, however, the
case for Windows and other platforms,
including Mac OS X, which is one of
the primary reasons why points can be
a very difficult measurement to use in
document design.
Because of these variations between
operating systems, many authors choose
to use pixel values for font sizes.
This approach is especially attractive
when mixing text and images on a web
page, since text can (in theory) be
set to the same height as graphic
elements on the page by declaring
font-size: 11px; or something similar,
as illustrated by Figure 5-15.
Using pixel measurements for font-size
is certainly one way to get
"consistent" results with font-size
(and, indeed, with any length at all),
but there is a major drawback.
Internet Explorer for Windows up
through Version 6.0 does not allow
users to easily resize text that has
been set with pixels. Other browsers,
including Mozilla, Netscape 6+,
IE5+/Mac, Opera, and even IE7, allow
the user to resize text no matter how
it's been set. Thus, using pixels to
size text is no more of a guarantee
that it will stay the same size than
is any other method. The other
approaches discussed in this chapter,
such as keywords and percentages, are
a much more robust (and user-friendly)
way to go, as they can be used to
scale text from the user's default
font size.
That said, the issue here is what unit to use for your body element. In most cases, you should use the em unit for other elements like headings and paragraphs.
what are cons to use relative values em and % for fonts, What is rounding problem? and how to avoid/solve rounding problem. Is there any calculator?
How to use relative values as easy as we use px
There are not a lot of cons using em or %.
Sometimes i had trouble to make fonts look exactly the same size in IE and the normal browsers. But most of the time i have to do a IE CSS anyway so its not really a problem.
When you define fonts in PX, the fonts are not antialiased on some computers running windows. If you use EM or % they are and you have a very precise control of the font size. (1.249em for example).
Unlike #scunliffe i would always use EM as font-size. Even when you have fixed design withs. Sometimes its not possible to do a pixelperfect design with PX fonts, because fonts rendered by Photoshop looks different then in the browser.
I have made a test tool to show the differences:
http://bluesys.ch/csstest/
and here you can find a tool to convert your PX values in to EM:
http://pxtoem.com/
I may be preaching to the choir here, but I find the Firefox "Web Developer" addon is a real help when I'm dealing with font sizing.
https://addons.mozilla.org/en-US/firefox/addon/60/
Use 'Information' > 'Display element information' to view the exact pixel size for your (relatively sized) element. Tweaking the CSS (to within 1 decimal point) until the amount returned is a round number minimises the chances of your text being different sizes in different browsers / operating systems.
Oh, and from my current project:
Standard (appearing as 12px) font set on site wrapper is 75% (body is 100%) , then use:
14px: 116.7%
16px: 133.3%
18px: 150%
18px: 166.7%
There are loads of reasons to not use fixed text sizes (accessibility being the big one), and once you've spent a while getting your CSS sorted you'll never look back.
Here's a nice little trick for you.
In the your CSS, set the font-size on the BODY of the document to 62.5%.
Now, whenever you want to set a font-size, you use EM values. 1.1em would be equivelant to 11px and 1.2em to 12px and so on.
That's how I work anyhow.
Good luck.
Michael.
I don't believe there are (m)any cons. Using px limits your ability to scale text in IE6 but otherwise using % or em should allow you to scale nicely.
The only con I can think of is that if you want your text to be exactly 12pt, or 13px then using % or em isn't what you want. However If you are trying to create a fixed width design where everything is measured out to the pixel I would advise against it. The Web is a free-flowing canvas... each user has a different sized window, personal font/zoom size choice and Operating System differences. Your content should look good on any screen by adapting to the real-estate you are provided with.
em vs px is like a holy war. Everyone has their own ideas on what's best. Using px is perfectly fine, the only real problem is that text will not resize in IE6.
One other issue is how much you will change your mind about the general font size. If you do everything in absolute values (px, pt), then decide the font size across the site is too small, then you might have to change a lot of values to make everything bigger. Conversely, if you do everything in relative values (em, %) then you want to change the size of one thing only, it will affect all its child elements.
In the end, the best choice is to simply be consistent.
I noticed that when the dpi is set high than 96 to like 120 my site gets messed up using either Firefox or IE7. The CSS basically breaks. Anyone know how to fix this?
Link to web-site
Thanks
The site uses a fixed-size layout, but mixes the units px and pt. When changing the dpi of your screen, the relative size of these units changes, ie the site is broken by design.
What you should do:
don't use pt for screen layouts - pt is for printing only
read up on liquid layouts and the relative unit em
There's not really a fix that can prevent anything happening if a user has adjusted their Windows DPI setting. Altering Windows to 'large fonts' mode, or setting it to a DPI setting other than the default, affects all layout in IE.
However, this should never cause a site to massively break. A few things shall be slightly misaligned, perhaps, due to rounding of values.
The site you've pointed to indeed does break quite massively when the font size is changed - for instance, change the default font in the browser (or set Firefox to "Zoom Text Only"). Text from the buttons completely leaves the buttons and starts hovering elsewhere.
It looks like the main cause of this, at least with the buttons across the top, is that the whole row of buttons is single background image and the text inside them are floated elements which match up with the background image only at a given font size - any adjustment to their size and position and they become out of whack with their background.
When designing, always change the zoom setting (in IE7 and Firefox) and the font size (eg in Firefox using "Zoom Text Only") and make sure that those things that do change in size, don't break the site. In some conditions, things specified in "pt" will scale while things specified in "px" won't.
How you could fix it
It's clear that you've designed everything to be a certain size in pixels, including the header and all the buttons/tabs. If you want to do this, declare the header DIV to be position: relative, and position the H1, H2, and UL inside it absolutely, using pixel values (relative to the containing div). Remove the margins, padding etc from the DIV to simplify. Specify widths, heights and top margins of the LI elements using pixels.
What I would do
Normally, I would build things like this to be flexible, so that if for some reason a person had really big fonts enabled on their browser, it would stretch nicely to handle it. That isn't really possible with your background images, because they are build especially for one given size only. So I'd have a repeatable background on the header, and I'd do each background for each button separately. Obviously, this is going to be more work.