SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Elastic layout - does not work in IE

    Hi there

    http://neb.enterdesign.com.au/

    I tried making the site elastic (all measurments are in ems)

    When i increase text-size in firefox and opera it works fine, however when i increase text-size in both IE6 and 7, it doesnt.

    Am i doing something wrong? Is this an IE bug?

    Thanks

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All versions of IE are at least nine years behind web standards so, yes, it must be an IE bug but I wish I wasn't out of town to help.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't declare a unit in your body selector, so IE is reading off the default (which IIRC is 12pt Times New Roman, but could be wrong).

    Anyway, you have far too much code for the type of layout you're trying to achieve, and the IE 5/6 stylesheets could be axed in favor of the * html hack (as a last resort).

    Also bear in mind that a lot of the "best practices" advocated by many leading Web designers are actually practices that are based on 2002-2003 understandings of how Internet Explorer worked. I've been dealing with these two POS browsers since 2002 and I can tell you for certain that none of those hacks are needed, and that if done right, the code that's fed to these browsers can peacefully co-exist with other browsers like Firefox, Opera and Safari without having to hide them from these more modern browsers.

    Off Topic:

    Oh and by the way Doc, the Cubs won 6-2, so we're still in first place.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeh i know i have too much code, ive been meaning to fix that up, its because ive been changing my layout a bit.

    I know i can use the star html hack, but I though its better to have seperate stylesheets, just so that i can seperate real standard CSS, with hack/making IE work css?

    Im still new to all this though, so i just though that was the best way.

    Anyway, what do you mean I didnt declare a unit in my body selector?

    Thanks.

  5. #5
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body {font-size:62.5% }/* 1 em equals 10 px IIRC */
    or body {font-size:100.01% }/* not sure what 1 em equals, but this is also a popular method, since it ensures it to be 100% on all browsers because they round down*/
    Hrvoje Markovic
    Croatiankid designs

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to declare a font size on your body element like this:

    Code:
    body
    {
    background-color: #a7b8bf;
    font-size: 100%;
    }
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Star Selector ( * html ) hack is safe for IE 5/6 since they're "dead browsers" so you don't need separate stylesheets for them. Besides, when the time comes to drop support for IE 5/6, do you really want to go through tons of Web pages or just one single CSS file?

    With regard to the unit, you forgot to declare what font size and unit you were going to use, like 85% or 1em for example. I personally use a font size of 85% with a leading (line-height) of 140%, and then set the letter spacing to 1px.

    Here's an example:

    Code:
    body {
        font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
        letter-spacing: 1px;
    }

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by croatiankid View Post
    body {font-size:62.5% }/* 1 em equals 10 px IIRC */
    or body {font-size:100.01% }/* not sure what 1 em equals, but this is also a popular method, since it ensures it to be 100% on all browsers because they round down*/
    Popular but stupid. 62.5% of 16px may equal 10px but what if the font size has been reset to 18px or even 24px? Then it breaks. Also, IIRC some browsers will round up on fractions of percentages (I could be wrong though).

    At least with 85%/140% (like I cited in the post above) people with large monitors with their .dpi settings turned up to 120 (so called "large font metrics") won't have text that appears to be SCREAMING AT THEM WITH A FOG HORN - and that's just regular body copy. I feel sorry for someone with that kind of setup who has to look at headings with 100px font sizes. *shudders*

  9. #9
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok good idea for why using * html over conditional comments.
    and thanks for the body font size, i didnt know it was necesarry

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's always a good idea to set the font size and the line-height at the get-go. Just make sure that you use a relative unit (like EM or &#37 in the body selector if you want to have IE resize the text, since absolute units (even those that are incorrectly labeled and treated as relative units by the CSS specification) cannot be resized.

  11. #11
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello
    can you please explain why text-resizing doesnt work properly when i set my font-size in body to 100% or 1em. It works when i use 100.01%. And Dan, why do you use 85%, this makes the text too small?

    And one other thing i though line spacing 1=100% and 1.15=115%, it seems that this is not so??

    thanks

  12. #12
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting info Dan.
    Hrvoje Markovic
    Croatiankid designs

  13. #13
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by znebojsa View Post
    It works when i use 100.01%.
    I use that metric on the body tag all the time and work down from there for other containers on a page - have had no problems to date :-)


    Nadia

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by znebojsa View Post
    Dan, why do you use 85%, this makes the text too small?
    I already did, a few posts up.
    http://www.sitepoint.com/forums/show...47&postcount=8


Bookmarks

Posting Permissions

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