Forums

daGUY

This is bizarre. I have a containing div that holds three smaller divs floated left (for columns). The HTML looks like this:

<div id=\"bottom\">
	<div class=\"column\">Content</div>
	<div class=\"column\">Content</div>
	<div class=\"column\">Content</div>
	<div class=\"clear\">&nbsp;</div>
</div>

The empty div at the end is just a clear; I need it because without it, #bottom has no height.

Anyway, #bottom has a top border. In IE6 and IE7, the border doesn't appear. I determined that for some reason, the presence of the clearing div causes the border to disappear.

Does anyone know why this is, or how to get around it? The presence of the clearing div shouldn't have any effect on the border, right? In Safari and Firefox, the border always displays, regardless of the clear.

Jonz

first of all try to remove the space entity in the clear div.
Next can you post the css for the floats and bottom div

ikthius

maybe add another div as a container and give that container a bottom-border??

daGUY

"Jonz" said:
first of all try to remove the space entity in the clear div.
Next can you post the css for the floats and bottom div

Removing the space doesn't make any difference. I put it there so the clearing div isn't completely empty.

Here's the CSS:

div#bottom {
	border-top: 1px solid #f0f1f5;
	padding: 8px 0;
	margin: 0 40px;
}
div.column {
	border-left: 1px solid #f0f1f5;
	color: #666;
	float: left;
	font: 15px Arial, Helvetica, sans-serif;
	min-height: 316px;
	padding: 0 24px;
	width: 223px;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
}

daGUY

"ikthius" said:
maybe add another div as a container and give that container a bottom-border??

Ha! If I add another containing div, then the border on the original div (#bottom) shows up! What the heck?

<div id=\"bottom\">
	<div>
		<div class=\"column\">Content</div>
		<div class=\"column\">Content</div>
		<div class=\"column\">Content</div>
		<div class=\"clear\">&nbsp;</div>
	</div>
</div>

How could that be? The <div> in the middle doesn't have any styles, and all it does is hold the three columns and the clear...just like #bottom was doing before.

I guess that works, but this must be a bug. Adding an element inside of #bottom should have NO effect on the visibility of the border.

ikthius

I gave you an idea last night about adding another div, however I never tested it......

testing just your HTML & CSS and changing the colour of the border to black, it seems to work in IE6 & 8 not got 7 anymore.

so I think your code was ok, do you have a screenshot of your problem?

daGUY

This is very weird. It's not just the top border missing, it's the entire top half of the border. The solution is to apply a background color to the div (what??).

Here's a screenshot of the div with a red border applied on all sides, without any background color specified (the white background comes from the containing div that holds the whole page):

http://img222.imageshack.us/img222/6718/bordermissingbz1.th.jpg

And here's the same thing with a white background applied to the div itself:

http://img236.imageshack.us/img236/5514/borderfullzt6.th.jpg

This is the code - it's very simple:

<div id=\"bottom\">
	<div class=\"column\">Content</div>
	<div class=\"column\">Content</div>
	<div class=\"column\">Content</div>
	<div class=\"clear\">&nbsp;</div>
</div>

div#bottom {
	background: #fff;
	border: 1px solid red;
	padding: 8px 0;
	margin: 0 40px;
}
div.column {
	border-left: 1px solid #f0f1f5;
	color: #666;
	float: left;
	font: 15px Arial, Helvetica, sans-serif;
	min-height: 316px;
	padding: 0 24px;
	width: 223px;
}

That's it! A containing div with a border, and three inner divs floated left with a clear underneath.

This must be a bug, since it's not even possible to specify a border that stops halfway in the middle of an element! :lol:

treehouse : what would you like to learn today?

Forums

Disappearing borders in IE6/IE7