SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    IE em counting error?

    Hello all,
    I'm wondering if there's some em counting error in IE? This includes IE7 as well.

    I tried copying the effect Eric Meyer has on his Complex spiral demo. I couldn't do it exactly the same because I'm floating a box right on a liquid page. But, I got it working. I have a right-floating sidebar with a menu. The menu has a background (the "normal" image) and each anchor has its own copy of the "overexposed" image to show on hover (I couldn't use just one fixed image like Eric did), and each anchor is 2em high. So, all the coordinates for each "overexposed" image is off by 2 em. Works in everything that I can test except in IE, where it also works, but only on the first menu item. The next menu item is off by just a hair. The next one is off by a bit more, and as you go towards the bottom, it gets worse.

    It's as if IE is adding 2em and 2em and getting 4.1em or something.

    http://stommepoes.jobva.nl/Tests/koffie.html
    Yes, I've got permission for the images (they're from stock exchange .hu but I needed permission/to notify the owners for when this gets (freely) distributed).

    No, this isn't a finished page, though the menu was pretty much done. But any other critisism with code is welcome.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the height on ul a-tag to get it to correspond with line-height.
    (It is triggering the IE has-layout. Or you can test triggering IE has-layout with IE property zoom:1 insted)
    Code CSS:
    ul a {
      display: block;
      height:2em;
      text-decoration: none;
      font: bold 1em/2em Verdana, Arial, sans-serif;
      color: #fff;
      text-align: center;
    }
    Last edited by Erik J; Nov 7, 2007 at 15:23.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Though a better solution is to float the li.
    Code CSS:
    ul li {
      float:left;
      width: 250px;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    ul a {
      display: block;
      text-decoration: none;
      font: bold 1em/2em Verdana, Arial, sans-serif;
      color: #fff;
      text-align: center;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Ie has a lot of whitespace problems and "haslayout" issues with list and the best way to defeat both is as erik suggested above and to float the list items instead. This completely collapses the white space and the menu will be almost pixel perfect.

    In fact for IE most lists (and anchors within the lists) are better floated and where pixel precision is a concern. This does of course depend on the layout and the fact that you will probably need to have fixed widths etc.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah thanks! I didn't know IE7 still had haslayout issues... in fact, I have little idea of what is fixed and not in IE7. Teh googles only shows what everyone found in the Beta, but not the current shipped w/Vista.

    It's a little bland still, but anyone who wants that template may use it. I like that it's not white. I got permission for all the images except the arch, which I dunno if I'll keep or replace with bricks (the current idea). The arch is from a much huger image (also Royalty free) from stock xchange .hu

    Thx again.


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
  •