🔒 Locked

[web] CSS - 100% width is not 100%

Started by shadowstryker Aug 11, 2005 at 6:20 AM 3 replies 1.7k views

Original Post

Aug 11, 2005 at 6:20 AM

I'm using the following code: CSS

#buttonbar {
   background-image: url(art/buttonbarbg.jpg);
   background-repeat: repeat-x;
   background-position: top left;
   border: 1px solid #000000;
   width: 100%;
   height: 60px;
   float: left;
   overflow: hidden;
}

HTML

For some reason, when viewed in FF this extends 2px past the edge of the normally viewable area, whereas in IE it displays as intended.

Michael Tanczos

Aug 11, 2005 at 6:23 AM

Firefox follows the CSS spec and extends borders 1 pixel beyond the box size. IE, however, does not do this. IE adds a 1 pixel border inclusive of the box size.

---
Michael Tanczos

shadowstryker

Aug 11, 2005 at 6:26 AM

is there a way to allow for the border?

shadowstryker

Aug 11, 2005 at 7:14 AM

Sorted, using -moz-box-sizing: border-box; made it use the same box model as IE

Etnu

Aug 23, 2005 at 7:06 PM

Add the correct doctype to force IE to standards mode.

Actually, if you're going for 100% width -- do nothing. Divs are always the full width of the container that they're in (i.e. width: auto).

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.