Width is width is width, right?

February 16th, 2004, 5:09 pm

When the width of a box element is specified with a CSS ID, it should display the same across all browsers, correct? I mean, 33px is 33px, both in IE and Netscape.

I've borrowed a CSS layout from http://bluerobot.com/web/layouts/layout1.html , which does display correctly in both IE and Netscape. After some modification, I've got it up at http://www.nriyounglife.org . However, the elements in Netscape seem to be drawn larger than in IE, at least to the naked eye (I've looked several times, and they look bigger in Netscape).

I've looked through my CSS and can't see any significant difference between the original CSS and my CSS. I tried it without the DHTML menu as well, thinking something about the menu being included in the div was causing to to be drawn larger, but no cheese. I've been banging my head over it all weekend.

Any ideas or pointers to jog my brain? Thanks for any info anyone can share.

Mark

[digitalMedia]

February 16th, 2004, 5:39 pm

did you add padding or a border?

ah, it looks lilke you might have. browsers handle the box model differently. On some, when you add padding, it adds to the overall width, instead of adding the padding to the inside of the width dimension.

February 16th, 2004, 6:02 pm

Wouldn't this cause the same effect on the original source page as it does on my page? I ask because the orignal page that I used the CSS from ( http://bluerobot.com/web/layouts/layout1.html ) doesn't have this same issue with IE and Netscape.

Mark

[digitalMedia]

February 16th, 2004, 6:05 pm

I feel pretty good that it's the double border. When I isolate the nav_panel DIV, and it's selector definition as you have it now, the width difference between IE and NS7.1 is 10px. When I reduce the border to "1px solid #000" the difference is 3px. When I remove the border completely, the widths are identical.

Like I said before, this is a difference in how the browsers deal with the box model. NS is adding the border and padding to the outside of the width you're specifying, while IE is adding the padding and border to the inside of that width.

Does that make sense? I mean, I know it doesn't make SENSE, but do you see what I'm saying?

The biggest problem is the double border. That's the main thing setting it off.

I hope that some help to you.

[digitalMedia]

February 16th, 2004, 6:33 pm

btw: the source code you're using is employing several work arounds, I didn't investigate those fully. I notice on that page, even with the 1px border the DIV is rendering identically.

To answer the subject of the thread, unfortunately width isn't nessacarily width. I really wish it was.

February 16th, 2004, 7:00 pm

digitalMedia wrote:

btw: the source code you're using is employing several work arounds, I didn't investigate those fully. I notice on that page, even with the 1px border the DIV is rendering identically.

To answer the subject of the thread, unfortunately width isn't nessacarily width. I really wish it was.

Yes, that does make sense (even though it doesn't make sense )

Thanks for the clarification and heads up dM!

DAMN YOU BROWSER GODS!!! DAMN YOU!!

Mark

February 17th, 2004, 11:34 am

There are 2 'box models'...

Traditional model:
width / height specify dimensions from border to border.

W3C model:
width / height specify dimensions from inside the padding (the content edge).
e.g. border to border width = left padding + width + right padding.


Set Mozilla based and CSS3 compliant browsers to the traditional box model:
-moz-box-sizing: border-box;
box-sizing: border-box;

Set Mozilla based and CSS3 compliant browsers to the W3C box model:
-moz-box-sizing: content-box;
box-sizing: content-box;

You apply it to the box in question, or, to apply to all boxes, get out your universal style sheet and do this:

Code: [ Download ] [ Select ]

html, body, div {
   -moz-box-sizing: content-box;
    box-sizing: content-box;
}

1. html, body, div {
2.    -moz-box-sizing: content-box;
3.     box-sizing: content-box;
4. }

add any other block level elements u want to the html, body, div.... list

[digitalMedia]

February 17th, 2004, 12:13 pm

excellent!!!

You are the man LazyJim.

Can't wait to experiment with this.

[digitalMedia]

February 17th, 2004, 12:45 pm

//NEVERMIND - I got it. found the documentation I was looking for on the -moz proprietary stuff. Thanks for this information.

February 17th, 2004, 7:44 pm

lol did i miss a question then u edited it out?

what refrence did u find?

I've been using http://www.blooberry.com (*edit that's the first time i been there through the front door - not a pretty sight! )


and anyone who had trouble googling for -moz- css properties: put the -moz- in " double quote marks, otherwise google searches for NOT moz-!

[digitalMedia]

February 17th, 2004, 8:19 pm

Yeah...the google thing...it took me a minute. heh. I did have a question but I resolved it.

Here's a couple of things that I found informative, http://www.quirksmode.org/css/box.html and http://webfx.eae.net/dhtml/boxsizing/boxsizing.html , amongst others.

However, your information was the real epiphany for me. I started using CSS in my work in the middle of last year, and I've been wrestling with this ever since. Now I can make everything into the "traditional" box model and call it a done day. It never occured to me to look to proprietary definitions and CSS3 solutions. I've probably read 70% to 80% of the CSS2 spec, but I don't remember any discussion of differing box models. Sometimes, you just need the right keywords I guess.

Anyway, thanks for the link and info. You just made my life a little easier.

February 18th, 2004, 4:37 am

no problem, I think usability is important - not just for the end user, but us developers too!

Be aware that there are probably browsers that don't support the box-sizing property right now, and use the W3C model. Hopefully they're rare though.

February 18th, 2004, 5:55 am

lazyjim, i want to take this moment to profess my love for you. that information was so good, it made me cry

That really explains alot to me, and it works perfectly. Thank you so much for your help!! Words cannot express how frustrated I was becoming trying to work with CSS boxes. I was *this* close to giving up and going back to a table layout.

And as always, great links dM! Thanks for sharing those. I think I've learned more from the links I've run into at Ozzu than anything else.

Mark

February 18th, 2004, 7:35 am

allgoodpeople - thanks for saying thanks, I love to help but in some other forums I can't be bothered due to lack of gratitude - so you saying thanks really put a smile on my face!

April 2nd, 2005, 8:16 am

I tried to do the same thing here: http://www.linktradeforum.com/ETJ/test.htm

but I can't get it to work. What am I doing wrong here?