In IE7 only, I have an issue with disappearing elements/styling. First, my h3 header disappears. The space that it occupies is partially there, but not text is visible, nor is the background or the bottom-border assigned to it. In addition, other divs below the h3 are missing their bottom-border. However, spans nested inside of divs missing their bottom border show the border. Lastly all but one the activity divs is missing its background and the one that does show it, the 4th one, only shows it below the "date" span. Here is the HTML:

EDIT: I've found the issue to be directly related to the fact that the spans with the "post" class are floated.

<div id="recent">
<h3>Recent Activity</h3>
<div class="activity" style="background:#fff">
	<span class="date">
		<span class="thread_title">
			RE: Voo Doo Custom Sportbikes Fight Series - Anderson Silva
			<a href="base.php?pid=fh000013#184BU59638rV21S96">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	26 Hours Ago on Jun 6th, 2010 at 4:56 pm</span>
	<span class="post">I know, its going to be a great fight! Look at this cool poster of his stores logo:
...</span>
	<div class="clear">&nbsp;</div>
</div>
<div class="activity" style="background:#ddd">
	<span class="date">
		<span class="thread_title">
			This or that!
			<a href="base.php?pid=fh000016#X550475M42i7P3E79">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	30 Hours Ago on Jun 6th, 2010 at 1:47 pm</span>
	<span class="post">In this game, I start by asking a this or that question, ie. &quot;Would you get a PC or Mac?&quot;,...</span>
	<div class="clear">&nbsp;</div>
</div>
<div class="activity" style="background:#fff">
	<span class="date">
		<span class="thread_title">
			RE: Shogun Talks Anderson Silva, Will Fight Anyone In The UFC Except Wand
			<a href="base.php?pid=fh000014#98V652J8998vW40N4">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	3 Days Ago on Jun 4th, 2010 at 1:22 am</span>
	<span class="post">This is some big news!</span>
	<div class="clear">&nbsp;</div>
</div>
<div class="activity" style="background:#ddd">
	<span class="date">
		<span class="thread_title">
			Lets Talk about our favorit fighters
			<a href="base.php?pid=fh000015#4L26F14982Py0402E">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	3 Days Ago on Jun 4th, 2010 at 1:21 am</span>
	<span class="post">Post your favorite fighter!</span>
	<div class="clear">&nbsp;</div>
</div>
<div class="activity" style="background:#fff">
	<span class="date">
		<span class="thread_title">
			Shogun Talks Anderson Silva, Will Fight Anyone In The UFC Except Wand
			<a href="base.php?pid=fh000014#915RU178A8x3059V4">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	3 Days Ago on Jun 4th, 2010 at 12:35 am</span>
	<span class="post">UFC Light Heavyweight Champion Mauricio &quot;Shogun&quot; Rua recently spoke about a potential supe...</span>
	<div class="clear">&nbsp;</div>
</div>
<div class="activity" style="background:#ddd">
	<span class="date">
		<span class="thread_title">
			RE: Voo Doo Custom Sportbikes Fight Series - Anderson Silva
			<a href="base.php?pid=fh000013#N529V7094q55B61W5">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	3 Days Ago on Jun 4th, 2010 at 12:29 am</span>
	<span class="post">I have to get some tickets!!!</span>
	<div class="clear">&nbsp;</div>
</div>
<div class="activity" style="background:#fff">
	<span class="date">
		<span class="thread_title">
			RE: Voo Doo Custom Sportbikes Fight Series - Anderson Silva
			<a href="base.php?pid=fh000013#9W08Gw791419C20K9">
				<img src="styles/images/post_link.png" alt=""/></a>
		</span>
	3 Days Ago on Jun 4th, 2010 at 12:25 am</span>
	<span class="post">This event is going to be extremely awesome!!</span>
	<div class="clear">&nbsp;</div>
</div>
</div>

And here's the CSS:

#recent {
	border: 1px #a00 solid;
	color: #333;
	background: white;
	margin: 10px;
	margin-left: 220px;
}
.activity {
	padding: 4px;
	border-bottom: 1px #c00 solid;
}
.activity .thread_title {
	float: left;
	padding-right: 10px;
	text-align: left;
	font-weight: bold;
	color: #a00;
}
.activity .date {
	float: left;
	border-bottom: 1px #333 solid;
	width: 100%;
	color: #555;
	text-align: right;
}
.activity .post {
	float: left;
	font-size: 1.1em;
}
h3 {
	color: #fc0;
	margin: 0;
	padding: 6px;
	border-bottom: 1px #fc0 solid;
	background: #222 url('backgrounds/user_tab_bg.png') repeat-x;
}

Recommended Answers

All 3 Replies

I'm guessing its a float issue. Make certain you are setting a document type before your <html> tag so your document isn't in quirks mode (google for html document types but here is one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">). A quick way to fix some layout issues is to add a <br class=clear> after your float an item. Define the clear css class as

.clear{
 clear: both;
}

Another "fix" is to apply a zoom:1; to the floated element and add the br with the clear after it.
Here is a decent link on clearing floats in IE: http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html

Thank you for the reply. I have the clear class defined, just the same with the addition of 0 height so it doesn't mess with the layout. The doctype is set - I'm 100% sure of that. But for some reason IE 7 doesn't like those particular spans floated. Their siblings are floated and don't cause an issue. This page 100% dynamically generated, so sometimes things like this are caused by missing close tags, but I couldn't find any. I also know of a bug IE7 that causes absolutely positioned elements next to floated elements (in the markup) to disappear, but this can't be it because nothings is absolutely positioned.

I was able to reproduce your issue in IE6. For the activity class I applied zoom:1 and it fixed the layout issues.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.