View Full Version : CSS and EM

09-13-2007, 04:29 PM
After reviewing several sites and the responses here in the forum, I have to go through my CSS and pages and fix problems. So, of course, I have a couple of questions about CSS.

First, the use of em versus px. If em is a percentage of the current font-size should I set the initial font size within the body tag? Is that the accepted practice of a properly designed web page?

I had to use a wrapper div so that the subsequent divs had an "anchor point". I used absolute positioning because I couldn't get anything else to position the divs correctly. So I used percentages for width and height for each div except the main content div which has no height value. But I had to keep reducing the width of the wrapper div because it kept going beyond the visible are of the page and finally ended up with a width of 99.15% and a height of 98%. Why didn't 100% just cause it to fit within the browser window? I wanted everything to fit even if the user resized the browser. Should I have done it differently?

Finally, how do you center an image with CSS? I tried adding a class name to the image tag and I defined the class in CSS, but then there was no way to say "center this".

Thanks for your input.

09-13-2007, 04:53 PM

This is a great little article about using ems to size text. It's broken now, but it was up just the other day. I believe that your body text is default 12 px, and that if you want to change the size of your body text, you use ems based on that. So, if you want your default text size to be 14, you set your body to be 1.2ems, and then adjust everything else based on that.

Your other questions are things I usually need to experiment with, so I can't help you there. I have found that absolute position is a total nightmare.

It sounds like you're using IE... I strongly suggest you get everything working in Firefox, then do the hacks to get IE going. Much easier.

09-13-2007, 04:55 PM
To center an image you could use text-align; center on a class given to that image, but this sometimes doesn't work if you are floating things around so just in case add float: none to it too. Alternatively, though not sure why you'd want to, you could use display: block; set it's width and height in CSS and then use margin: auto; which would also center it.

Abolsute positioning really does not need to be used. If you would prefer to not to use it, and I wouldn't recommend so, post your code and give us a link if possible and we'll give you some help on ways to better lay things out.

Ems are good for font-sizes because in IE, for usability, they can be resized by the browser/customer, whereas pixel sizes can't. There is a generic size to ems, which I believe is browser consistent so you won't need to define any font-sizes in pixels first, just find the em size that suits you.

I think that's everything?

09-13-2007, 05:52 PM
As to your question on setting the overall font size on the body selector. I do this, because it saves me from having to define a font-size to each element I'm going to use, e.g. ol, ul, p, dl, etc. The downside of doing it like this is that if you decide to change the font size on, say, <p> elements which should be your main content, all other font sizes will change also. So there are pros and cons to both setting it and not setting it on the body selector. :)

09-13-2007, 05:56 PM
Thanks for the responses. As far as developing I am using Firefox. It was just a nightmare when I checked my work with IE7. Things just weren't right. I posted and the answer (which I believe was supplied by you, ahallicks, was to go to em and not use px, which is what I am currently doing at this moment.

I am going to mess around with positioning to see if I can get the same results using relative rather than absolute or fixed (as some of the divs are fixed).

I'll mess around with other CSS things and see what happens.