SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Div too wide?

  1. #1
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div too wide?

    I have the following:
    Code:
    <div class="menuoff" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick="LoadPage('index.php');">Home</div>
    Code:
    CSS:
    div.menuoff { width:115px; font-size:11px; font-family:Verdana; background-color:#BB99DD; color:#660066; cursor:default; padding:3px; border-top:2px solid #660066; border-left:2px solid #660066; border-right:2px solid #660066; margin-left:5px; }
    div.menuon { width:115px; font-size:11px; font-family:Verdana; background-color:#EE22BB; color:#FFFFFF; cursor:pointer; padding:3px; border-top:2px solid #660066; border-left:2px solid #660066; border-right:2px solid #660066; margin-left:5px; }
    In Opera and IE it works fine, however with Netscape (7.02), it is "too wide". The menu bar is 125 pixels wide, and as you can see each item is 115. With netscape, it goes across too far and this is because of the border and padding. Both IE and opera put the border on the inside of the 115px width, while netscape puts it outside (so it becomes 119px... 2px on each side). Then, it does the same with padding.

    Is there anything I can do so that this displays properly? I don't want to go back to tables!
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  2. #2
    SitePoint Member
    Join Date
    Aug 2003
    Location
    London
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Netscape is the one getting it right. According to the css specification padding, border & margins should be added to the width to get the overall width of an item. This is a bug in IE. You can get around it by not specifying width at the same time as padding, border or margins or if you absolutely have to specify both then you will need to use the box model hack to get it to work in all browsers.

    The hack involves setting one set of numbers for IE and another for everything else. see http://www.tantek.com/CSS/Examples/boxmodelhack.html

    The bug is in IE5 (and I think IE5.5) and IE6 in quirks mode. IE6 goes into quirks mode if your doctype is not fully correct. What doctype are you using?

  3. #3
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks I will look into it! I would ave guessed that the border should go outside, but didn't think the padding as well..

    Thanks again!
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter


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
  •