IE problem with percentages

<!-- m --><a class="postlink" href="http://www.matts-website.net/index2.html">http://www.matts-website.net/index2.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.matts-website.net/styles.css">http://www.matts-website.net/styles.css</a><!-- m -->

The lighter brown background area on the right is wider than what it is on the left. It looks correct in Netscape.Are you sure you included the % sign after the percent? If you didn't, it comes out in pixels.:)Here's the CSS code.

.main {
width:60%;
margin-left:20%;
border:2px solid #32180F;
border-top:0px;
border-bottom:0px;
padding:4px;
background-color:#FFFFFF;
}
.mainBG {
width:100%;
position:absolute;
top:98px;
border-bottom:2px solid #32180F;
background-color:#79442E
}

You can see the mainBG class takes up 100% width. The main class covers 60% width and starts with a left margin of 20%, and thus it would leave a 20% margin on the right.Hi,

Were you using explorer? The brown line looks even both sides when viewed with Netscape 6.2.

I also notice that if you take out the first line (the xml declaration) then it displays correctly in explorer. Sorry but I don't know what the solution is but I hope someone more knowledgable than me will point you in the right direction.

PaulI checked it in both Internet Explorer 5.5 and Netscape 6.2. It looks correct in Netscape, but not Internet Explorer. I took out "<?xml version="1.0"?>" and it's still off in Internet Explorer. The left side isn't even the length of a credit card, where the right side is more than the length of a credit card.I think it's something to do with how explorer is adding up the percentages. Try changing the width to 90% in your main class. It then seems to display ok in explorer but obviously incorrect for netscape.
Sorry not much help :confused:Originally posted by spufi
I checked it in both Internet Explorer 5.5 and Netscape 6.2. It looks correct in Netscape, but not Internet Explorer. I took out "<?xml version="1.0"?>" and it's still off in Internet Explorer. The left side isn't even the length of a credit card, where the right side is more than the length of a credit card.

IE 5.5 and earlier has a compleatly broken Boxmodel.
IE 6 fixes that though, but it has another bug that breaks it if you use the XML declaration. Just leave it out (since it's optional) and it will work in IE 6.

To fix it in IE 5.5 and earlier take advantage of IE CSS parsing bugs. That way you can use the correct values for nonbuggy browsers while you feed buggy browsers with values that makes it work better.

Eg
main {
width:80%; /* IE up to 5.5 uses this */
margin-left:20%;
voice-family:"\"}\""; voice-family:inherit;
width:60%; /* Less buggy browsers uses this */
}Yeah, I went to Rick's website and I saw on his forum where he talked about a problem with the xml part, so I was planning on taking it out. I'll play around with the code you provided to see if I can get it to work now.
 
Back
Top