Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS and EM

  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    CSS and EM

    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.
    Scott Stewart
    Always happy to learn from pros.

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    25
    Thanks
    1
    Thanked 4 Times in 4 Posts
    http://www.clagnut.com/blog/348/

    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.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.
    .
    .

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.
    Scott Stewart
    Always happy to learn from pros.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •