Layout wrong with clear:both

[RedRobotHero]

I have a page that displays correctly in Opera 7 and Netscape 7, but not in IE 6.

The offending piece of code is the following:

<p style=&quot;clear:both&quot;>

http://www.horriblepain.com/buy/hillthology2.html

(This is it without the clear:both.)

http://www.horriblepain.com/buy/hillthology3.html

(This is it with the clear:both.)

Why would the

clear:both

destroy my left margin in IE and how can I avoid it?

 

[philote]

That's very strange. It looks like you're doing everything correctly as far as I can tell. Maybe it's an IE bug.

Have you tried just "clear: right"?

Kevin
A+, Network+, MCP

 

[RedRobotHero]

I tried clear:right, and it does the same thing. I've also tried putting

<div style=&quot;clear:right&quot;>&nbsp;</div>

right before the <p>. It does the same thing.

 

[RedRobotHero]

Okay, I've made a stripped-down version, with nothing extraneous.

You can see it here:

http://www.horriblepain.com/buy/hillthology4.html

 

[philote]

I tried messing with the css to see if I could get IE to show it right, but no luck yet. This has got to be an IE bug... and I bet there's a fix out there SOMEWHERE.

Kevin
A+, Network+, MCP

 

[philote]

Well, since IE doesn't seem to like percentages in the margins, how about a different approach? Since your left and right margins add up to 50%, I set your .blue div to %50. Then I used absolute positioning and set the left side to 20% and top to 2%, effectively (I think) giving you the same layout.
Here's the actual code:

.blue
{
 background-color: #BBBBFF;
 border-width: medium;
 border-color: #660000;

 position: absolute;
 left: 20%;
 top: 2%;
 width: 50%;
}

It seemed to display correctly in IE, but try it out for yourself and see if it's what you want.

Kevin
A+, Network+, MCP

 

[RedRobotHero]

It isn't for a client, so I would be tempted to just leave it as is, if it weren't making text disappear, too. I'm getting tired of accomodating IE bugs.

 

[philote]

Sorry, I just noticed that my last post only worked with your stripped down example, not the real thing. I'd also be tempted to leave it as is... you see all these other sites that are only made to accomodate IE, so why not turn the tables?

Actually, if you felt like it, you could probably use javascript to write the line in your html for including the stylesheet. The javascript could do a browser detect and include a different stylesheet for IE users. At least I think you could do this, I'm not too good with javascript.

Kevin
A+, Network+, MCP