Forum Moderators: open
I am trying to float text to wrap around images on a page that has many many nested divs. I am using XHTML and CSS to achieve this.
The problem arises only in Internet Explorer (I am using ie6) (as to be expected) and is perfect in any other browser (especially mozilla-based).
What happens is the image always shows up, but the text slightly disappears and gets cut off toward the bottom (sometimes never displays at all) when floated next to images. As a footnote, this never happens when the text is longer than the image it wraps to, i.e. if the text actually wraps down below the image, then it's fine. If the text is too short, and never wraps below the image, it goofs up.
--------- Here's the CSS:
.top_wrap {
line-height: 20px;
text-align: justify;
}
.big_image_left {
float: left;
width: 176px;
text-align: center;
line-height: 13px;
margin-right: 4px;
margin-bottom: 4px;
border: 0px;
}
img.no_border {
border: 0px;
}
.line_break {
clear: both;
line-height: 3px;
height: 3px;
}
--------- and the XHTML:
<div class="top_wrap">
<div class="big_image_left">
<div><a href="###"><img class="no_border" src="photos/saludaml/test.jpg" width="176" height="133" alt="The Lake in Summer"/></a></div>
<a class="img_popup" href="###">larger image ></a>
</div> <!-- end big_image_left -->
Our smoky mountain cabin rentals include a <b>Lakeside Log Cabin, Mountain Top Lodge with lake views, the Log Cabin for two, the Tree House</b> for two and our newest and largest addition, the massive <b>Bear Lake Lodge</b>... accommodating up to 14 guests! We are just minutes from the Blue Ridge Parkway, Biltmore House Estate, river rafting, mountain golf, horseback riding and so much more.
<div class="line_break"> </div>
</div> <!-- end top_wrap div -->
--------------
What is happening here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Title!</title>
<style type="text/css">
.top_wrap {
line-height: 20px;
text-align: justify;
}
.big_image_left {
float: left;
width: 176px;
text-align: center;
line-height: 13px;
margin-right: 4px;
margin-bottom: 4px;
border: 0px;
}
img.no_border {
border: 0px;
}
.line_break {
clear: both;
line-height: 3px;
height: 3px;
}
</style>
</head>
<body>
<div class="top_wrap">
<div class="big_image_left">
<div><a href="###"><img class="no_border" src="photos/saludaml/test.jpg" width="176" height="133" alt="The Lake in Summer"/></a></div>
<a class="img_popup" href="###">larger image ></a>
</div> <!-- end big_image_left -->
Our smoky mountain cabin rentals include a <b>Lakeside Log Cabin, Mountain Top Lodge with lake views, the Log Cabin for two, the Tree House</b> for two and our newest and largest addition, the massive <b>Bear Lake Lodge</b>... accommodating up to 14 guests! We are just minutes from the Blue Ridge Parkway, Biltmore House Estate, river rafting, mountain golf, horseback riding and so much more.
<div class="line_break"> </div>
</div> <!-- end top_wrap div -->
</body>
</html>
However, the code is obviously nested far deep within other divs, and I can post the entire page here but it is 320 lines of code and would waste an unneccesary amount of space.
Could it have anything to do with font formatting or anything?
Again, the problem only happens when there is less text than required to wrap below the image, i.e. the image height is taller than the height of the lines of text wrapping next to it. This is when the problem arises.
I am thinking that there is a reason that these tabs are triggering the text to then be rendered, perhaps a broken div, but my page fully validates.
Should I just post the entire page code here?
So it's quirks mode versus standards mode for rendering...
and strict DTD versus transitional DTD for mark-up
The two areas are certainly related, but not at all the same. For example, you can write transitional mark-up that is rendered in standards mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Anyway, tedster, should i post my whole code here? I'm going crazy, and it's extremely important I get this thing working. Maybe I should just put it in 'quirks' mode and maybe it will work.
thanks
What you can do is make a working copy of your page and start reducing the elements involved until you have just the minimum needed to create the effect. Just "boil it down", reduce and reduce until you zero in on exactly where the issue lies. If members can see that kind of thing, the likelihood of a solution jumps dramatically.
Thanks for the help, and in the meantime if anyone knows what i'm talking about, feel free to chime in.
