Width is width is width, right?

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

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
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

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
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.

:(
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

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 :lol: )

Thanks for the clarification and heads up dM!

DAMN YOU BROWSER GODS!!! DAMN YOU!! :evil: :D

Mark
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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: [ 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
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

excellent!!! :thumbsup:

You are the man LazyJim.

Can't wait to experiment with this.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

//NEVERMIND - I got it. found the documentation I was looking for on the -moz proprietary stuff. Thanks for this information.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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

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! :lol:)


and anyone who had trouble googling for -moz- css properties: put the -moz- in " double quote marks, otherwise google searches for NOT moz-! :lol:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

lazyjim, i want to take this moment to profess my love for you. that information was so good, it made me cry :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
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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! :) :)
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

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?
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

Just a note to allgoodpeople, I was looking at your problem and noticed that your Menu faded in. At first I thought it was CSS, seeing how this was a CSS related question and I was thinking how in the world do you do that? After looking at it further, I found that you use Javascript to get the fade in effect. However when users have Javascript turned off the menu doesn't show up at all. Just thought I'd let you know. You may want to add some <noscript> tags in there to accomodate for those users.

Also I've been looking for a solution for this as well, thanks LazyJim!

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 51 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.