Netscape 7 problem

[jplatenius]

Hi all,

Anyone know why this goes all wacky in NN 7.0? www.virtuallycertain.com/tsk/layout.htm

It works great in IE 5.5 and IE 6. Here's the CSS for quick reference:

body {
 background-color: #669999;
 margin-top: 15px;
 margin-right: 0px;
 margin-bottom: 15px;
 margin-left: 0px;
 padding: 0;
 text-align: center;
}
div {
 margin: 0px;
 padding: 0px;
}
.photo {
 border: 1px solid #000000;
}
.BoxHeader {
 background-color: #663300;
 margin: 0px;
 width: 100%;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-top-color: #000000;
 border-bottom-color: #000000;
 padding: 10px;
 font-size: 10px;
}
#BoxWrapper {
 width: 88%;
 margin-right: 6%;
 margin-left: 6%;
 margin-top: 14px;
 margin-bottom: 14px;
}
#BoxLeft {
 float: left;
}
#BoxRight {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 15px;
 color: #333333;
 text-align: left;
 background-color: #FFFFFF;
 float: left;
 border-top: 1px solid #000000;
 border-right: 1px solid #000000;
 border-bottom: 1px solid #000000;
 padding: 20px;
}
.BoxNav {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #CCCC99;
 background-color: #003333;
 width: 100%;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 padding-top: 2px;
 padding-right: 8px;
 padding-bottom: 2px;
 padding-left: 8px;
}
.BoxNav a:link, .BoxNav a:visited {
 color: #CCCC99;
 padding: 2px 8px 2px 8px;
 text-decoration: none;
 }
.BoxNav a:hover {
 color: #000000;
 background-color: #CCCC99;
 padding: 2px 7px 2px 7px;
 text-decoration: none;
 border-width: 1px;
 border-style: solid;
 border-color: #000000;
}
#BoxSidebar {
 background-color: #CCCC99;
 border: 1px solid #000000;
 padding: 7px;
}
.BoxHeaderWrap {
 width: 755px;
}
#BoxSidebarWrapper {
 float: right;
 width: 200px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 10px;
}
#navlist {
 width: 180px;
}
#navlist ul {
 margin: 0;
 padding: 0;
 list-style-type: none; /*turns off display of bullet*/
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
#navlist li {
 margin: 0 0 0 0;
 padding: 0;
}
#navlist a {
 display: block;
 padding: 2px 2px 2px 24px;
 border-right: 1px solid #000000;
 border-top: 1px solid #000000;
 border-left: 1px solid #000000;
 width: 200px;
 background-color: #663300;
}
#navlist a:link, #navlist a:visited {
 color: #CCCC99;
 text-decoration: none;
}
#navlist a:hover {
 border-right: 1px solid #000000;
 border-top: 1px solid #000000;
 border-left: 1px solid #000000;
 background-color: #CCCC99;
 color: #000000;
}
.TextComment {
 font-size: 10px;
 text-align: right;
}

I'd love some help with this... I just assumed it would work in NN 7... I'll never do that again!

Thanks,
-jp

[Paul O'B]

Hi,

You really need to check in each browser every step of the way otherwise it gets very difficult to sort it out afterwards

There are number of problems and a lot are related to the broken box model. You are designing in quirks mode which uses the broken box model where padding and borders are inside the specified width. In the correct box model as in netscape/mozilla padding and borders are added to the width.

This makes some of your elements to big to fit in the allocated space and overflow. You need to either change the way you add padding to elements by using nested elements or inner elements (without width) or use one of the hacks : e.g.

http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

Other problems on your page are that floats should have a specified width. So work out what they need to be and apply the width. Also after a float you will need a clearing element to make sure content starts after the float:

<div style="clear:both"></div>
<div class="BoxHeader"> &nbsp; </div>

Sorry I can't give a full solution but I'm just out for a couple of days but if you work on it I'll take a look when I get back or someone else will chip in.

Hope that helps.

Paul

[jplatenius]

Thanks, Paul--I'm getting much closer now. I've worked on the widths, and used the

<div style="clear: both;"></div>

to clear to the next box.

Now...Can anyone help me understand the difference between padding in IE and Netscape, or point me to a good article? I'm fairly new to CSS, and I don't understand what is going on with this. I can see that IE is treating my padding very differently than Netscape, and I can't figure out how to get them to act the same.

Also, I can't understand why the sepia-tone image on the left of the page has a 4(ish) pixel break in between it and the BoxRight (white bg with content). It only does this in IE, not in Netsacape. Is this the padding thing that Paul is referring to as well.

www.virtuallycertain.com/tsk/layout_netscape.htm (trying to get the same result in modern versions of IE and Netscape). CSS below:

  body {
 background-color: #669999;
 margin-top: 15px;
 margin-right: 0px;
 margin-bottom: 15px;
 margin-left: 0px;
 padding: 0;
 text-align: center;
}
div {
 margin: 0px;
 padding: 0px;
}
.photo {
 border: 1px solid #000000;
 float: left;
 margin: 0px;
 padding: 0px;
}
.BoxHeader {
 background-color: #663300;
 margin: 0px;
 width: 100%;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-top-color: #000000;
 border-bottom-color: #000000;
 padding: 10px;
 font-size: 10px;
}
.BoxHeaderWrap {
 width: 700px;
}
.BoxNav {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #CCCC99;
 background-color: #003333;
 width: 100%;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 margin: 0;
 padding-top: 2px;
 padding-right: 8px;
 padding-bottom: 2px;
 padding-left: 8px;
}
.BoxNav a:link, .BoxNav a:visited {
 color: #CCCC99;
 padding: 2px 8px 2px 8px;
 text-decoration: none;
 }
.BoxNav a:hover {
 color: #000000;
 background-color: #CCCC99;
 padding: 2px 7px 2px 7px;
 text-decoration: none;
 border-width: 1px;
 border-style: solid;
 border-color: #000000;
}
#BoxWrapper {
 width: 88%;
 margin: 14px 6% 14px 6%;
}
#BoxRight {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 15px;
 color: #333333;
 text-align: left;
 background-color: #FFFFFF;
 width: 65%;
 float: left;
 border: 1px solid #000000;
 padding: 20px;
 margin: 0 0 0 0;
}
#BoxSidebar {
 background-color: #CCCC99;
 border: 1px solid #000000;
 padding: 7px;
}
#BoxSidebarWrapper {
 float: right;
 width: 200px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 10px;
}
#navlist {
 width: 180px;
}
#navlist ul {
 margin: 0;
 padding: 0;
 list-style-type: none; /*turns off display of bullet*/
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
#navlist li {
 margin: 0 0 0 0;
 padding: 0;
}
#navlist a {
 display: block;
 padding: 2px 0px 2px 20px;
 border-right: 1px solid #000000;
 border-top: 1px solid #000000;
 border-left: 1px solid #000000;
 width: 180px;
 background-color: #663300;
}
#navlist a:link, #navlist a:visited {
 color: #CCCC99;
 text-decoration: none;
}
#navlist a:hover {
 border-right: 1px solid #000000;
 border-top: 1px solid #000000;
 border-left: 1px solid #000000;
 background-color: #CCCC99;
 color: #000000;
}
.TextComment {
 font-size: 10px;
 text-align: right;
}

[Paul O'B]

Hi Jp,

I couldn't access your page to see how you're getting on but here's some more info on the box model and why it needs fixing in ie5, 5.5 and ie6 quirks mode.

http://css-discuss.incutio.com/?page=BoxModelHack

Paul