Forum Moderators: not2easy
In IE, when the float and clear is left - no problem. But when the float and clear is right, the left margin of the main box goes to 0 (The right margin holds, but the left collapses to 0.)
I've commented out every which way, but as soon as I add the {clear: right;}, it blows up. Opera and Firebird are just fine.
These boxes are identical except for the float - clear.
I tried code from your description but margins are holding so I must have got it wrong..
can you post a section of code with CSS.. one that includes all "boxes" that you mention and where the "clear" occurs
Suzy
At the last second, I ran through several resolutions. The box remains centered at 800*600 and 1024*768, but breaks above that. This is why I never noticed before. I've only recently switched to 1280*1024 for personal use. Evidently, it's been a problem for months!
I'm more clueless than before, as to why {margin: 1em 5%} breaks down only at higher resolution, and only in IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
<!--
.product-box {
border: .4em double teal; padding: 1em; margin: 1em 5%;
background: url(../images/backgrounds/beige.jpg);
}
h2.pbox {
text-align: center; color: #900; border: .2em double teal;
background-image: url(../images/backgrounds/ivory.jpg); background-color: silver;
padding: .3em; width: 75%; margin-top: 1em;
}
.stones-ivory {
text-align: center; padding: .2em; margin: 1em;
background: url(../images/backgrounds/ivory.jpg);
border: 1px solid #000;
background-color: silver;
font: 500 1.1em/1.3em Verdana, Helvetica, sans-serif;
}
p.stones {
text-align: left; font: 500 1.3em/1.4em Verdana, sans-serif;
margin-bottom: 1em;
}
img.a {
float: right; margin: 1em;
}
img.b {
float: left; margin: 1em;
}
-->
</style>
</head>
<body>
<div class="product-box">
<h2 class="pbox" style="width: 90%;">
Optima Ultima Combination
<br />
Wood Burner & Grinder
</h2>
<img src="../../images/optima/equipment/ultima-combo-edit.jpg" class="b"
style="width: 320px; height: 211px;" alt="Ultima Combination Wood Burner & Grinder."
title="" />
<p class="stones">
This is a top quality wood burner and power carver in one box. It is a fusion of the Optima 1 wood burner and the Optima 2 Plus power carver. The Ultima is ideal for the person on the go, or in need of more space on the work table.
</p>
<div class="stones-ivory" style="clear: left;">
Price: $359.00 with 35,000 RPM handpiece
<br />
Price: $394.00 with 45,000 RPM handpiece
</div>
</div>
<div class="product-box">
<h2 class="pbox">
Optima 1 Single & Dual Wood Burners
</h2>
<img src="../../images/optima/equipment/optima-1-edit.jpg" class="a" style="width: 320px; height: 200px;" alt="Optima 1 Single & Dual Wood Burners." title="" />
</p>
<p class="stones" style="margin-top: 2em;">
The Optima 1 woodburner uses the thinnest pens and finest tips, of all that are on the market. They are pre-sharpened and polished, with soft and comfortable foam grips. This machine features a 40 watt power supply which offers precision temperature control.
</p>
<div class="stones-ivory" style="text-align: left; clear: right;">
<dl>
<dt>
Price: $97.00
</dt>
<dd style="margin-bottom: 1em;">
Optima 1 Single output woodburner with one 16 gauge cord and 1 pen of your choosing.
</dd>
<dt>
Price: $135.00
</dt>
<dd>
Optima 1 Dual output woodburner with two 16 gauge cords and 2 pens of your choosing.
</dd>
</dl>
</div>
</div>
</body>
</html>
html, body {padding: 0; margin: 0;}
and it's actually the body margin that's the float is clearing itself to...
[edited] not causing it..[/edit]
so it is an IE float/margin bug.. what's new ;)
rather than put in some extra hacks in the HTML I think the easiest way to maintain the design with what you've already written would be to remove the 5% margin from the .product-box and put it on the body instead.. that is do not have a left or right margin on the product box.. but I also put the 1em (top/bottom margin) on the body as the very bottom margin was collapsing.. but then the 1em bottom margin on the product box will maintain the gaps between the product boxes....
amended CSS:
html {margin: 0; padding: 0;}
body {padding: 0; margin: 1em 5%;}.product-box {
border:
.4em double teal;
padding: 1em;
margin: 0 0 1em 0;
background: url(../images/backgrounds/beige.jpg);
}
and btw.. instead of remembering which side of the image to have to clear in the HTML.. just add clear: both; to the .stones-ivory class it will do the same job.. with less markup ;)
Suzy
[edited] body margin is not the cause.. it is a symptom ;)[/edit]
Wow! I don't think that I would ever have figured that out. Odd that if the {float} is left it doesn't crop up at all, and that it can't be seen until the resolution is high enough to break it.
The solution MAY be problematic to implement. This <div> is critical, as it is used time and again, throughout the site, which is @150 pages. I'm going to have to test, and see what nasty surprises will come up in "unrelated" areas when I put in the fix. What else might be affected? Also, the box was originally {margin: 1em 10%}. This proved to be giving up too much horizontal space, but it was fixed incrementally. That is to say, I have a number of inline declarations {margin: 1em 5% or (2%)}. When it became clear that 5% was the main number, it was fixed in the external CSS, but those bits and pieces of inline fixes, from that in between time, are still there. I don't know how these will be affected. If they are a problem, hunting them all down will be a job. Also, a few of them do specifically need to be {margin: 1em 1%(or 2%)}.
Because it doesn't show up until above 1024*768, the owner probably won't care a whit, but it'll drive me crazy not to fix it. My main concern is opening a Pandora's Box.
I am going out of town for the day, and will begin to take a deep look very late tonight or in the morning, depending upon my return.
Thank you very much for getting a grasp on this. Deeper testing will commence tomorrow, with more browsers and more resolutions. I'd still be surprised if there aren't difficulties, (which I may yet need advice for:)) but at least the site hasn't imploded.
It has been bery instructive. I don't know if would have ever made the connection to the source of the issue.
