Box Model Tweaking Safari 3.0 Beta

[snrecords]

Hey all...I came across an unusual problem.... Not sure if it's a bug or coding.

 

If you view my site in Safari 3.0 Beta windows or mac, the box-sizing:border-box function does not work.  It appears to do absolutely nothing and the page looks as if there is no box-sizing code or that it reads it as box-sizing:content-box.  I need it to use the traditional model without changing the doctype.

 

If you already downloaded Safari 3.0 Beta, please take a look ... www.buzzhawaii.com

 

And here is my CSS code for one div:

div#rightbox{
-moz-box-sizing:border-box; 
box-sizing:border-box;
width: 459px; 
height: 618px; 
margin-left: 4px; 
float: left; 
border: 4px solid; 
border-color: #99CC22;
background-color: #F6F6E8;
}

[bronzemonkey]

Your css is invalid, that's the problem. Don't use all that -moz-box, box-sizing crap.

[snrecords]

So what would be the valid CSS code?  Could point me in the right direction?

[snrecords]

Ok.  I tried taking out the code you suggested and as I suspected I ran into the original box model problem with IE and Firefox. 

 

If I take out -moz-box-sizing:border-box; then the borders appear outside the box in firefox and inside in IE. 

 

I've read many times that box-sizing:border-box; is supposed to fix that problem in Safari, which it did with previous browser versions (safari 2), but in the new beta safari, it doesn't work!

 

Anybody help...

 

[bronzemonkey]

the borders appear outside the box in firefox and inside in IE.

 

What version of IE are you talking about? IE6 uses the same box model as FF, IE7, Opera, Safari...and every other browser that is in (noticable) current use. It is the box model recommended by the W3C.

 

If you are worrying about IE5.5 I'd suggest that you don't.