DIV size difference in Netscape - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

DIV size difference in Netscape

redheadedlefty

10:34 pm on May 27, 2003 (gmt 0)

10+ Year Member

I am using absolute positioning for my div tags using a fixed width and they are showing differences in Netscape7. Everything is fine in IE6. The funny thing is all the div tags on the left and right menu bars are the same width.
The .menu is the navigate bar, the #stylelinks is the style links box on the page, and the #sitedays is the box that lists how old the site is. The site days box is displaying correctly, but the other two (as well as others i haven't listed) are wider in Netscape 7. Anyone know why?

for example, go to <snip>

CSS Code....

.menu {position: absolute; top: 90px; left: 10px; width:125px;text-align: center;color: #EED; font: 14px Verdana, sans-serif; padding: 5px; border: solid #000; border-width: 1px; BACKGROUND: #cc0000 fixed no-repeat 0px 0px}

#stylelinks {position: absolute; top: 300px; left: 10px; width: 125px;color: #EED; text-align: center; font: 12px Verdana, sans-serif; padding: 5px; font-weight: bold; border: solid #000;border-width: 1px;BACKGROUND: #cc0000 fixed no-repeat 0px 0px}

#sitedays {position: absolute; top: 5px; left: 10px; width: 125px; height:80px; color: #000; font: 10px Verdana, sans-serif; border: solid #999;border-width: 1px;BACKGROUND: #FFF fixed no-repeat 0px 0px}

[edited by: Woz at 3:55 am (utc) on May 28, 2003]
[edit reason] no URLs please [/edit]

redheadedlefty

11:33 pm on May 27, 2003 (gmt 0)

10+ Year Member

I checked out my site in Opera 7.11 and all is good, just like it is in IE6. i have come to the conclusion that Netscape 7 is just crap. If anyone can answer the question above, I'd reeeeely appreciate it.

goat_boy

11:42 pm on May 27, 2003 (gmt 0)

10+ Year Member

I suggest you try adding a doctype to the top of your page. Without it IE will run in quirks mode and you'll inherit the box model problem. So your menu's will be 150px wide in IE but 160px wide in Netscape (150px wide + 10px padding).

Add this to the top of your page.......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

You should then get consistent widths in IE6 and Netscape.

rainborick

11:51 pm on May 27, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I didn't dissect your code, but it looks like the problem is the difference in the way Netscape and MSIE used to measure the width of block-level elements like <DIV>s. I say "used to" because you can now make the latest versions of both browsers use the same measuring technique (ie. use the "Standards Compliance Mode") by using the correct <!DOCTYPE> statement at the start of your HTML and XHTML documents. Since your page has no <!DOCTYPE> at all, both browsers revert to what they call their "quirks mode" in which they render the page by simulating all of the little foibles of their older versions. For more information on the MSIE Standards Compliance Mode and <DOCTYPE>s, consult this Microsoft Knowledge Base article. [msdn.microsoft.com] Most of the incompatibility problems I've seen posted here lately are addressed to some extent in that article, at least from the MSIE perspective.

Putting both browsers into Standards Compliance Mode is not a panacea. Sadly, about 25% of users are still floating around out there with MSIE v5.5 or older which don't have the Standards Compliance Mode, both browser families still have some annoying bugs, and the CSS standards have some gray areas in which the two browser families differ. So you're still faced with compromise at some level. I have recently seen a CSS setting that was supposed to make Netscape/Mozilla emulate the MSIE quirks mode in this area, but I can't find it and I don't know how well it works. Maybe someone around here who's really good with search engines could locate it for us both! Good luck!

redheadedlefty

11:56 pm on May 27, 2003 (gmt 0)

10+ Year Member

Thanks a lot guys, it'll give me something to do tonight hehe.