I am learning about the box model, but i cant get it to work. In designing with web standards (and other places online), it says that the width is supposed to add up with the boarder and padding, but mine isnt doing this.
my code is
#content {
width: 602px;
padding: 20px;
border-right: 80px solid #000;
border-left: 80px solid #000;
}
so the width of my center box should be 602 + 20 + 20 + 80 + 80 = 802 px
but it seems to be following the old broken model of IE 5.5 and the width of the whole thing is 602px. What is wrong? Am i going crazy or do i have no idea what im talking about. The address is <!-- m --><a class="postlink" href="http://www.draglok.lunarpages.com/web.Hmm">http://www.draglok.lunarpages.com/web.Hmm</a><!-- m -->. The WD extension tells me it's 865px.well I set the width of the nav bar and the content to the same so the border should be sticking out not going insideMaybe you could make it more clear what you are trying to accomplish as the desired outcome.I want to know how the box model works. According to designing with web standards and alot of internet sites, it works the way i explained above, but its not working that way. Plus the padding isnt working on IE and i dont know what is up with thatThat's a table layout so all bets are off re the box model.o so the box model doesnt apply to table layoutsYou can visit this site:"http://www.w3.org/TR/2002/WD-css3-box-20021024/",which has information about box model.First of all, Internet Explorer is kind of... inconsistent with its support for the CSS box model. If you don't have a proper doctype tag (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) at the beginning of your HTML document, IE6-Win renders the page in Quirks mode. Having a proper doctype tag allows IE6-Win and IE5-Mac to redner the page in Standards Mode, when the CSS box model according to the W3C is fully supported. IE6-Win in Quirks Mode and IE5-Win doesn't support the box model.
The W3C box model:
Box width = <width> + <padding> + <borders> + <margins>
The IE6-Win Quirks mode and IE5-Win box model:
Box width = <width> + <margins> - with the padding and borders being absorbed into the width: XXpx; property.
And when you add tables to the mix, well my friend, anything goes, but hear it straight from the horse's mouth: The CSS table model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/tables.html#q2">http://www.w3.org/TR/CSS21/tables.html#q2</a><!-- m -->).
my code is
#content {
width: 602px;
padding: 20px;
border-right: 80px solid #000;
border-left: 80px solid #000;
}
so the width of my center box should be 602 + 20 + 20 + 80 + 80 = 802 px
but it seems to be following the old broken model of IE 5.5 and the width of the whole thing is 602px. What is wrong? Am i going crazy or do i have no idea what im talking about. The address is <!-- m --><a class="postlink" href="http://www.draglok.lunarpages.com/web.Hmm">http://www.draglok.lunarpages.com/web.Hmm</a><!-- m -->. The WD extension tells me it's 865px.well I set the width of the nav bar and the content to the same so the border should be sticking out not going insideMaybe you could make it more clear what you are trying to accomplish as the desired outcome.I want to know how the box model works. According to designing with web standards and alot of internet sites, it works the way i explained above, but its not working that way. Plus the padding isnt working on IE and i dont know what is up with thatThat's a table layout so all bets are off re the box model.o so the box model doesnt apply to table layoutsYou can visit this site:"http://www.w3.org/TR/2002/WD-css3-box-20021024/",which has information about box model.First of all, Internet Explorer is kind of... inconsistent with its support for the CSS box model. If you don't have a proper doctype tag (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) at the beginning of your HTML document, IE6-Win renders the page in Quirks mode. Having a proper doctype tag allows IE6-Win and IE5-Mac to redner the page in Standards Mode, when the CSS box model according to the W3C is fully supported. IE6-Win in Quirks Mode and IE5-Win doesn't support the box model.
The W3C box model:
Box width = <width> + <padding> + <borders> + <margins>
The IE6-Win Quirks mode and IE5-Win box model:
Box width = <width> + <margins> - with the padding and borders being absorbed into the width: XXpx; property.
And when you add tables to the mix, well my friend, anything goes, but hear it straight from the horse's mouth: The CSS table model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/tables.html#q2">http://www.w3.org/TR/CSS21/tables.html#q2</a><!-- m -->).