SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Block Display, Padding .. odd stuff in < IE6.0

    EDIT: Title should say margin instead of padding .. always mix those two up

    I am using the following code to create a mouse-over effect for a navigation bar at http://www.mm2c.com (see left)

    I am using Internet Explorer 6.0 and the code works fine as it supposed to do. Unfortunately IE5.5 or IE5.0 (don't ask me about anything non-IE) see the block become 2px less in height when mousing over. Now you might say that's because of the 1px less margin on the hover class than the default class but then it will not work IE6.

    I experienced using this code in IE6 while the margin-top and margin-bottom of the hover class is 2px, IE6 created a 1px outside the block which means the complete row grows 2px (one at the top and one at the bottom). Something like what happends in < IE6 only this time it grows.

    I thought I used W3C standard CSS but apparentely not :P

    Any help on this problem would be greatly appreciated, thanks in advance.

    Code:
    /* DEV NAVIGATION CLASSES */
    
    a.left-menu-dev:link, a.left-menu-dev:visited {
       cursor: hand;
       height: 15px;
       overflow: hidden; 
       margin-left: 2px;
       margin-right: 2px;
       margin-top: 2px;
       margin-bottom: 2px;
       padding-left: 5px;
       color: #000000;
       text-decoration: none;
       vertical-align: middle;
       display: block; 
    } 
     
    a.left-menu-dev:hover { 
       cursor: hand;
       height: 15px;
       overflow: hidden; 
       margin-left: 2px;
       margin-right: 2px;
       margin-top: 1px;
       margin-bottom: 1px;
       padding-left: 4px;
       color: #000000;
       background: #6FA0C8;
       border: 1px solid #000000;
       text-decoration: none;
       vertical-align: middle;
       display: block; 
    }
    Jeroen Mulder

    w: www.jeroenmulder.com

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You, my friend, have stumbled upon the IE5 box model bug! According to the w3c specs, all padding, borders, margins, etc. should be added to the OUTSIDE of the content area. So for example, if you have a <div> that is 300 pixels wide, but with 10px padding on the right and left side, and a 5px wide border, your <div> should actually be 330px (300 + 10 + 10 + 5 + 5) wide. However, IE5 adds this to the INSIDE of the box, making your content area 270 px wide. For a workaround, please check out this link:

    http://www.tantek.com/CSS/Examples/boxmodelhack.html

    Hope this helps clear things up.

    --Vinnie

    PS: This IE5 bug is for PC only. IE5 Mac is great and does what it is supposed to do, as well as IE6/PC, Mozilla and Opera.

  3. #3
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *smacks head*

    Thought so, now why isn't that mentioned anywhere on W3School's handy reference pages?

    Thanks and I'll try it out.
    Jeroen Mulder

    w: www.jeroenmulder.com


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
  •