I know that this is basic question, but i can't figure this one out. Inside Wordpress theme CSS file I am seeing this code (CSS media queries).
.site-content {
float: left;
width: 65.104166667%;
}
So my question/s is: Why is width percentage set this way instead of just 65.1% ?
How did person that coded that site knew that width must be exactly 65.104166667% and not 65.104166666% (what tools did he/she used to get exactly that percentage number)?
And finally what are the Benefits/Risks using this approach?
If someone can point me to right direction by an answer or link I would appreciate it very much.
See this article on responsive web design: http://alistapart.com/article/fluidgrids
As you can see, there is a basic formula for changing pixel widths (fixed widths) into percentages. If you read the article, you'll see that the formula is:
target / context = result
Or in other words:
The width (in pixels) you are aiming for, divided by the browser's default font-size (generally 16px) equals the width in ems or percentages.
The reason you divide by the default font-size is the same reason why in science experiments in grade school you need a control substance. A neutral substance with which to compare the rest of the experiments with.
So to get 65.1041...etc, the person divided the width they wanted in pixels and it came to that percentage. Percentages and ems are the units of measurement you want to use in web design to achieve a responsive website. And all it takes is some simple math.
My personal preference is to round to 2-3 decimal places, but it really doesn't matter unless you absolutely have to have exact widths. I've recommended that above article countless times on this website, it's really a must-read to any web designer of now.
OK, I've searched far and wide and come up with nothing more than anecdotal evidence to suggest that there is no recommended standard behaviour in the CSS specification for the precision of floating point numbers.
N.B. I'm not asking about the well known sub-pixel rounding problem.
The reason I'm asking is that IE seems to round percentage-based floating point values down to 2 decimal places, whereas Webkit and Gecko allow at least 3, or even more (I haven't tested).
For example:
li {
width: 14.768%;
}
When inspected in Chrome's Web Inspector or Firebug, the <li>s are correctly shown to have a width of 14.768%. However, in IE dev tools (IE9/8/7 mode), they have a width of 14.76%. This causes the actual pixel-based values to be completely out as well.
Can anyone shed any light on this behaviour, or provide a suitable workaround? I'd rather not have to resort to pixel-based values if possible, as the content needs to be fluid width.
I know it's pretty gnarly dealing with this many decimal places, but I'd be very interested to know which, if any, of these browsers is "correct"?
EDIT
Firefox seems to use the correct percentage values when shown in the inspector (not rounded to 2 decimal places), but is displaying the same behaviour as IE in terms of actual pixel placement.
There are probably many solutions for your problem, I would suggest these:
Round on 2 decimals by yourself for all but one, than reduce from
total width for last one.
Use table or display: table, than the
browser will fix the widths by itself.
For anyone coming upon this question, this article goes into depth about what different browsers do for percentages with decimal points: https://cruft.io/posts/percentage-calculations-in-ie/
As for which browser is correct, according to that article:
The HTML5 Specification doesn’t mention truncating or rounding decimal
places. Point 11 deals with decimal places, and says to keep looping
until “position is past the end of input, then return value as a
length”.
What are the advantages & disadvantages of each? em, px, % and pt ?
My current choice are percentages, the only reason is because I can globally change the font-size of all elements, just by modifying the font size on the root element (body)
I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.
Can't recommend it enough : http://baselinecss.com/
My original design training said em's where possible.
I believe a main reason was that different browsers and devices have different resolutions, which is once again becoming a big issue.
I think it's frequently better to use em's and %'s as they are an abstraction layer particularly when compared to pixels. Both are similar in some respects as "100%" = "1em".
Another problem with the pixel unit is that it does not scale upward for visually-impaired readers.
Today, for mobile, pad, etc. consideration it's often better to have specific stylesheets / rules for each one.
Also, for print concerns, em works well.
I have seen em unit called a standard for font sizes on the web, but the percent unit often gives a more consistent and accessible display. When user settings are changed, percent text scales well preserving readability, accessibility, and visual design.
Here is a link to one of my favorite articles on proper sizing of text with css from AListApart:
http://www.alistapart.com/articles/howtosizetextincss
Semantically, em is preferred, but I've always found it problematic because it impacts each child element inclusively. If your design nests 4 or 5 divs and each is at .75 em, by the time you get to the last child div your text is almost unreadable.
My preference is pt because it works with various operating systems (allowing the system itself to decide what a pt is) rather than using px which can really put a pinch on the readability of a site depending on resolution. Em is considered the "standard" for css, but it has just as many problems as the others, but it does have the advantage of cascading globally.
I always use ems. Using % is kind of the same, but they mean something else when using them in a padding or margin statement (padding:1em 0; is not the same as padding:100% 0;). So just use ems I you mean relative to the current font size, and avoid any confusion.
Added benefit or using ems is you could e.g. use a media query and body{font-size: 120%} to give mobile users a slightly bigger fontsize.
Nice question !
Me i'm using pixel because I like it when everything is fixed.
But checkout this article :
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
could help you make a choice.
I think all this is very personal. Or it depend of what you are doing I suppose
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Is it bad in terms of compatibility to use pixel numbers in CSS instead of percentages? How about lower resolutions? Is it okay to work with them in ranges of 1-100?
All of the measurements have their own purposes:
Use pixels for pixel-based things, like borders. You probably don't want a border that ends up being 1.3422 pixels wide.
Use text-centric measures (em, ex) for text-based things, like content areas, labels, and input boxes. It's an easy way to make sure you have room for text of a certain length and width.
Use percents for window-based things, like columns.
There are exceptions, of course. For example, you might want to specify a minimum column width in pixels. But follow the above and your pages will scale well. ALWAYS zoom in and out on your pages to see how they work with different font sizes and browser shapes -- don't get surprised later.
This is a difficult question, because the answer mostly depends on your situation.
Pixels are not that bad, I mostly use them too. (Sometimes even for font sizes.)
I usually fix the outer block element of the layout by a given size (pixels with fixed-width layouts, and percentages with fluid layouts), and on the inside elements I usually set percentages whenever possible.
There are some elements which simply can't be styled with percentages or ems, especially the more fancy stuff coming from graphical designers who don't understand such principles.
For example: if you have a column on your site with a simple style, you can set its width to a percentage easily, but if it has a background image with a specific width that is not designed with scaling in mind, it only looks good with a fixed-width. In such cases, you'll have to ensure that the rest of the page occupies the remaining width correctly.
Note that you can use pixels with percentages together.
For example, this is a snippet from one of my latest web apps:
min-width: 800px;
width: 80%;
max-width: 1500px;
The choice also depends on what design or layout you would like to achieve.
For a fixed-width layout, pixel values are fine. If a designer gives you a Photoshop image that contains really fancy stuff which would be extremely complicated to even think about how it would resize, you should definitely go for this.
If your layout needs to be dynamic, you should use percentages to make sure that it expands as the resolution changes, and you can use the above code snippet to make it look better in scenarios where it would otherwise look insane.
Some layouts (eg. imagine if StackOverflow would take up all the space) would look pretty ugly on a width of eg. 1920 pixels - the line widths would be so insanely high that it would be extremely unconvenient to read.
This is what max-width is for. Even in some dynamic layouts, you'll have to limit the maximal width of your site to maximize usability and readability.
And also take into consideration the smaller screens.
It is true that noone uses a 800×600 desktop anymore, but many people browse the web with mobile devices which have even smaller resolution.
This is what min-width is for: to make your dynamically expanded layout look less crowded on smaller resoultions.
I hope this helps.
EDIT:
The Smashing Book has some very nice thoughts about the subject.
EDIT 2:
I don't want my post to sound like I want you to force pixel-based sizing on your visitors.
(Apparently, some people in the comments misunderstood me in such a way.)
To clear it up:
I believe that the ideal layout is one that adjusts well to any possible resolution or setting.
However, we can't always do everything perfectly. Time/resources and the target audience are the key to determine if your site requires that advanced functionality or not.
I'm suggesting that you use the right thing for the given job.
If you are developing a site which will have a significant percentage of visitors who require more advanced adjustments to the site, it may be well worth it.
(Of course, sometimes we just do it for ourselves to have the feeling of doing things the right way, but is is not always a financially sound decision.)
Still, you should do the proper research about what sort of site will be it, who will be the visitors, and such stuff, before deciding about layouts, and whether it is worth the time to make them fluid or more dynamic.
Font sizes
I think you must first understand the issues that exist with working with pixels in CSS:
Zoom in older browsers is broken. For example, IE6 and IE7 do not resize text when zooming. Line-height can be quirky too. These problems do not exist in modern browsers, but they are a reason why many shy away from using pixels for font sizes.
Everybody will see text the same size if you specify the font size in pixels. Browsers have a default size of 16px for paragraphs, so if you only use em and other relative sizes, you will respect the decision of users who change this. This is especially important on text heavy sites, especially if there are more older users. On the other hand, if the design of a site is important I think it is possible and justifiable to use px to specify font sizes without breaking usability.
In the end, you need to make the decision yourself, and it does depend on the exact circumstances, but I think that specifying font sizes in pixels is okay.
By the way, when working with em to specify font size it is a good idea to set the body to font-size: 62.5%. This means the base font size is 10px, so 1em is 10px, 1.6em is 16px and so on, making it easier to think in pixels while designing using ems. I still find it frustrating to work like this, especially when the values of ems cascade. There are some very handy sites like PXtoEM.com that help with this.
Layout issues
The screen is a pixel based layout, so pixels are an intuitive choice for many things. The main issue here is that different users have different screen sizes. As others have pointed out, using min-width and max-width in pixels along with width in percent is a helpful way to respect the size of the screen, while preventing your site to be unreasonably squished or stretched on very small and very large windows.
However, I would generally avoid this approach in favour of CSS media queries. You can then use fixed width chunks and make the layout wider (amongst other things) as the screen size increases. However, CSS media queries, like all cool web technologies, suffers from lack of browser support. Most notably, IE8 and earlier do not support them, although there are JavaScript fixes. On the other hand, the iPhone and other handheld devices do support them, and I would strongly recommend them if you want your site to look nice on these devices.
I think fixed width grids are fine. Fixed width grid systems like 960 Grid System
are popular enough in their own right, and there are so many other sites that have a fixed width, that I doubt you would hear many complaints if you did this. Handheld devices that do not have large screens are an issue, but this is where CSS media queries should be used, so it is possible to specify everything in pixels and have your site looking beautiful on the desktop and on the iPhone.
Conclusion
Ultimately, everything depends on who your users are, what you need to support, and what you want your site to look like, but there is nothing inherently wrong with using pixels in CSS.
That depends on what you are styling. For columns for example, the width should probably depend on the text size to ensure that it will look optimal on multiple resolutions/screens. If you want to divide your page in two parts, you should use percentages. But if you want a 1px border between these two parts, independent of the resolution, use pixels.
Basically it depends on who's hiring you and consequently the audience of your work.
For institutional purposes (where content should prevail over the shape, like a goverment project), you better work with .em or %, they are harder to control, but they will be really user friendly in terms of accessibility.
If we talk about corporative Websites (Where shape is the deal) pixel will be a more accurate tool to fulfill your customer expectation regarding his brand.
A liquid interface (%, .em) is always a good stuff when it is smartly done, but don't forget to check your design under extreme conditions and be sure that it will be stable.
If you work with pixels, you will have absolute control over the final look of your site, but you will have to assume the impossibility for some user's to operate with it efficiently.
Best option: rather than designing a Website compatible for all platforms (what will result in a multi-deficiency design) suggest your customers special versions of the site adapted for every demand, what is a better practice and a better business for a designer too...
I would say avoid it if possible except for in certain cases.
For instance for a thin border it's ok to just specify 1px.
Also for max- and min- style attributes it is ok. But then make the non-max/min attribute be a percentage if possible.
This really is a good question which I have asked many times before. Not being a hardcore web designer (I'm more on the development side) I've usually asked the designers I work with about their opinions, and here is what I have distilled:
Using percentages vs pixels for sizing elements and so on is really a matter of personal taste or the requirements in each specific case. If you need it to scale, or it will scale well, use percentages. If not, use pixels. People here have used the examples of major columns in a page maybe needing to be fluid but borders may well need the precision of a pixel measurement.
Obviously sizing images is pretty much tied to their resolution and pixel units, so I always use them in this case.
However, using em sizing versus pixel or even point sizing for text is a whole different kettle of fish. Most of the guys I work with have a base reset style for font sizes which brings the size of 1em down to about 12px. They then use ems everywhere else (or as near to everywhere else as is possible) to size text elements, form controls and the like. This is how I operate now too as it seems to work well across a variety of browsers, OSes and DPIs on desktops and laptops. I can't vouch for mobile devices though.
Accessibility is the key though - if you need to make something usable for people with disabilities or work on a variety of devices out the box, even things you may consider old, then scaling will be a requirement. Build it into your model for designing the site from the get-go and you may realise that absolute pixel sizing is not even needed in that case.
For example, an art-heavy design is probably going to be designed at a single scale, but the new educational website for disabled users is going to have to work in a variety of situations.
Just remember, the W3C put a variety of methods for sizing and scaling into their specifications for a reason - flexibility. Do whatever fits best and works well for your audience (as Moustard said earlier).
I'm not a css/html expert but convention I use is to use pixels for the outer containers and percentages for the inner objects.
Another rule of thumb I have with anyone reviewing my layout is a Three Pixel Rule. It is rare that everything will line up exactly within every browser out there. We've agreed the effort outweighs the benefits to move anything three pixels or less.
Do the right thing by default. If a user visits your site with javascript disabled and no preference cookies, you should serve them a web page that is as functional and accessible as possible.
Your default stylesheet should assume nothing about the browser window, and still render a functional page, however hideous, down to 320x320 resolution, and up to unbounded sizes. If photographic fidelity is so important that you can't trust browser scaling, and sometimes it is, then you should use pixel measurements (at least minimums) for elements encapsulating images of fixed size, to make sure that you don't end up with important things being covered up. Specifying minimum widths along with percentages should give you the control you need while giving your users the accessibility they need. Even if accessibility isn't an issue now, it will be later if the site is successful.
When you do know more about the browser window, then it's okay to use fixed widths in alternate stylesheets, if the importance of preserving the design justifies the added work.
If you're targeting a fixed size then pixels are fine. But if you want your layout to look good on various resolutions/screen sizes, then you should stick to more relative measures like percentages. Most folks are targeting the latter.
It is ok if that is what it takes to please your client. Most of the time, you can't balance the amount of space in diverse screen sizes with only percentages. CSS3 media queries helps here but adoption is still problematic.
I prefer pixel in most cases.
For example - default width of content ares: 960px.
In "1024" it will be ok, with small free spaces on the both side of the screen. Put some gradient or background there. In "1280" or "1440" or "1680", or whatever - there will be bigger and bigger gap, but it will look nice.
Yep, for 800 - this site will be ugly. But who cares? Every major players dropped support for 800. There are too few people with this resolution..
There are many various sites, where %% will be much better solution, though.
The building blocks of a screen are pixels. You can't go wrong with fixed pixel sizes. As other posters have mentioned, you can also use percentages or "em"s for a scalable substitute.
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle
percent for font-size but interprets
150% as 150px. (Some NN4 versions,
for instance.) IE also has problems
with percent on nested elements. It
seems IE uses percent relative to
viewport instead of relative to
parent element. Yet another problem
(though correct according to the W3C
specs), in Moz/Ns6, you can't use
percent relative to elements with no
specified height/width.
em: Sometimes browsers use the wrong
reference size, but of the relative
units it's the one with least
problems. You might find it
interpreted as px sometimes though.
pt: Differs greatly between
resolutions, and should not be used
for display. It's quite safe for
print use though.
px: The only reliable absolute unit on
screen. It might be wrongly
interpreted in print though, as one
point usually consist of several
pixels, and thus everything becomes
ridiculously small.
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
% is nice because it allows for relative resizing.
px is nice because it's fairly easy to manage expectations when using it.
em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
Regarding the difference between the css units % and em.
As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?
If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.