Forum Moderators: not2easy
Thanks. Here's a simplified example of the problem...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testing</title>
<style>
<!--
.space_above {
padding-top: 1em;
}
.leftimg {
float: left;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 2px;
margin-left: 0px;
}
.leftimg p {
font-size: 70%;
font-weight: bold;
text-align: left;
border-width: 1px;
border-style: solid;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}
.navbuttons {
clear: left;
}-->
</style>
</head>
<body>
<p><img src="http://example.com/example.gif" width="200" height="200" class="leftimg">
Some text wrapping around the image.</p>
<p>Some more text wrapping around the image</p>
<div class="space_above navbuttons">Navigation buttons below image with 1em space between image and buttons.</div>
</body>
</html>
You should run your CSS through the SelectORacle [webmasterworld.com] (link in CSS Forum Charter [WebmasterWorld.com]), particularly the rule
.leftimg p
Selects any p element that is a descendant of any element with a class attribute that contains the word leftimg
the css is ok (i think), I just oversimplified the example! leftimg is a div, containing the image and often a caption, hence the specific formatting of subsidiary paragraphs, e.g...
<body>
<div class="leftimg">
<img src="http://example.com/example.gif" width="200" height="200">
<p>image caption</p>
</div>
<p>Some text wrapping around the image.</p>
<p>Some more text wrapping around the image</p>
<div class="space_above navbuttons">Navigation buttons below image with 1em space between image and buttons.
</div>
</body>
That said, despite my tired brain the error does show up in the example as originally written. At the moment the image caption is working fine, it's the space below the div.leftimg that's causing the problem in ie.
Any ideas?
