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.
Related
I am having an issue with a specific mac that is not displaying a certain website I have built correctly. Every other mac and pc I have tested displays the website correctly but this one specific mac in all browsers on it is displaying incorrectly the issue I am getting is inline block elements are not next to each other, I have all the 'hacks' in place and like mentioned this displays correctly on every other computer.
This question here is the exact same issue but it doesnt seem to have been resolved.
https://discussions.apple.com/thread/6650689?start=0&tstart=0
I know I could try floats but I would rather find the route of this cause, does anyone know of any reason this might be happening?
If browser renderings vary only on a single or a few machines, fonts are a possible culprit. Make sure all computers use the same fonts to render your page, actually even that the same version of the font is used.
A lot of fonts get slightly modified over time, often the kerning (space between two characters) or the hinting (how the curves that describe fonts should be mapped to pixels on the screen) might change, resulting in very minor differences in the width some text consumes when being displayed.
If indeed the font version is the culprit: Remember that visitors of your page might also have this "bad" version of the font. So it is advisable to try to improve your HTML layout.
I've often observed that leaving a few percentages empty helps to deal with such font issues. For example: having a div (width=100%) that contains two elements in each "row", the first one a label of about 1/3rd the width, and the second one being some control, taking up the rest of the space. Having them defined with width:33% and width:67% often results in the case that the second part is laid out below the first part instead next to each other. Changing the widths to something like width:32% and width:65% often fixes this, as it allows for some rounding errors in the browsers when laying out the elements.
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.
The w3c specification says that the width and height are implied and not required. I have always been told that you're supposed to put it in anyway. If I remember correctly his reason was that the browser may not correctly detect the image size. Is this true?
It harkens back to the dark days of Netscape in the v4 and older versions. The rendering engines were primitive and wouldn't "reflow" content as they built pages and figured out sizes. If you didn't specify an image size, the whole page's rendering would get paused (or a full-page refresh would get pulled) once the image was downloaded and parsed for height/width. This looked bad from a user perspective, so the rule was to ALWAYS specify a size.
Nowadays, engines are better, and can handle an unspecified image size gracefully. Reflowing content is still a somewhat expensive operation, but does look cool from a user perspective as things glide/flow around as images pop in and text shifts to accomodate them.
The reason is that if you do not put them in, the browser will put a default size in, download the image, find the actual size then have to re-flow everything around the new size.
Re-flows are expensive operations - the rendering on screen has to be updated for each such image.
If you provide the size, the browser puts in a placeholder with the correct size and doesn't have to re-flow once the image downloads.
In my experience, not supplying width and height tags will cause the browser to render the image at its original size.
I've found this behaviour to be consistent in modern browsers.
As an aside, I always try to supply images at the size I want them rendered at in order to reduce the amount of bandwidth used and to ensure image quality.
I'm not sure about browsers not detecting it correctly, I've never seen that happen.
But to answer your question, I think the answer depends more on what you are trying to do, and possibly likely to do, which makes the difference.
For example, if the image you are adding is a banner ad which needs to conform to predetermined height/width, then by all means, hard code the height and width.
But if the image is something that might change over time, I would suggest NOT coding the height and width, as more than likely this means that the new image, if not the same exact height/width as the old one, will now be distorted. This is especially true on a dynamic website where images change all the time.
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.