PDA

View Full Version : moz question about div widths(%) and borders (px)

allida77
04-17-2003, 10:15 PM
<html>
<head>
<style type='text/css'>
<!--

body{
font-size:1em;
background-color:#3A6EA5;
}

.MainWindow{

width:75%;
height:100%;
position:absolute;
}

.RightWindow{
background-color:#999999;
width:25%;
height:100%;
position:absolute;
margin-left:75%;
border-left:inset black 1px;
}
.Links{
padding:2%;
margin-left:7%;
}

a.Links{
color: #4682B4;
font-size:1.2em;
}
a.Links:link {
color: #4682B4;
font-size:1.2em;
}
a.Links:visited {
color:#4682B4;
font-size:1.2em;
}
a.Links:hover{
text-decoration : none;
color: #ADD8e6;
}
-->
</style>
</head>
<body leftmargin=0 topmargin=0>
<form name="_ctl0" method="post" action="Default.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwxNjg2NjYxNjA4Ozs+Uh+NyOAhFlTf9YGvZFb+54v4SX8=" />
<div class="MainWindow">
</div>
<div class="RightWindow">
<div class="Links">
<a href=http://infonet class='links'>Infonet</a><BR/>
<a href=http://127.0.0.1 class='links'>Myself</a><BR/>
<a href=http://my.yahoo.com/ class='links'>My Yahoo</a><BR/>
<a href=http://testnet class='links'>Testnet</a><BR/>
<a href=http://www.codingforums.com/ class='links'>Codingforums.com</a><BR/>
<a href=http://www.drudgereport.com/ class='links'>Drudge Report</a><BR/>
<a href=http://www.di.fm/ class='links'>Digitally Imported</a><BR/>
<a href=javascript:void(location.href="view-source:"%20+%20location.href) class='links'>View Source</a><BR/>
</div>
</div>
</form>
</body>
</html>

The above code is just a sample. Because I set a border to 1px then the horizontal scroll bar will appear in moz. I am guessing because my width is defined as 100% plus the 1 px border. I always code for ie 5.5 and 6(intra) so when it comes to other browsers I am a complete noob. So how do you work around this for moz?
pardicity3
04-17-2003, 11:58 PM
Yes yes, it has to do with with the different Box Models that IE and Moz/Standard compliant borwsers use. See, the way things are supposed to be done are explained here: http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions. Basically all "add-on's" such as borders/padding/margins are added on to the width. Thus if you have a div with width 520px and a 1px border around it, the actual width would be 522px (+2 px, one for left border and one for right border). That is why you are getting scrollbars in Moz, you actually have a width of 100% + 2px.

Now IE has it's own box model, it calculates the width and puts all borders/padding/margins inside that width. It almost seems more logical, but I think the reason the standard way is not this way, is because what happens when you have a 10px wide box with a 10px border? That just doesn't seem like it would work to me...

Now there are two [actually three] things you can do, one put in a DTD at the top of your page. More info on these can be found here: http://www.codingforums.com/showthread.php?s=&threadid=18346 . This DTD will make whatever browser you are using use the standards-correct box model.

Another option is to use a DTD that makes browsers use the IE box model, the one that seemed more logical remember? I am positive that there is a site out there which talks about this, and I am also positive that the link to that site was posted right here on this dang forum!! But I can't find it right now and am very aggitated!!!

The third thing you can do is a CSS hack. This gets slightly confusing, but some people say it works wonders. I personally have never used it, but it is a possiblilty. The link to this hack can be found here:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

Personally, if you don't need pixel precision, I would say just design towards the standard box model and use the standard DTD. Good luck, hope this helped. :thumbsup:
meow
04-18-2003, 12:10 AM
I say go for three because the other two won't work. You can make IE6 adopt either model with doctype switching but you can't make Moz use IE's old model whatever you do. Neither can you make IE versions lower than 6 to use the correct model because they don't know it.
jkd
04-18-2003, 12:24 AM
Originally posted by meow
but you can't make Moz use IE's old model whatever you do.

* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

I just did. I also made Opera 7 and Mac/IE5 use it as well.
meow
04-18-2003, 12:35 AM
Yeah, but that isn't kosher. :D
meow
04-18-2003, 12:36 AM
Oh, and show me how you get it to work in IE5 and 5.5 please. :o
jkd
04-18-2003, 02:31 AM
Originally posted by meow
Oh, and show me how you get it to work in IE5 and 5.5 please. :o

Why would you need to? That rule makes all browsers that understand box-sizing to use IE's model.
allida77
04-18-2003, 07:34 AM
Thanks pardicity3 that helped a lot.