IE6 and Margin Bug

[sbryan]

Here's the CSS Code:

#greenbar {
	float: left;
	display: inline;
	width: 180px;
	height: 1px;
	margin-top: 11px;
	margin-left: 8px;
	background-color: #6c0;
}

These dividing bars are 20px high in IE6 and I'm assuming it must be a problem with margins. Is there a quick fix for this particular element?

 

[angelwatt]

Applying a height to an inline element generally won't work. Make it a block or maybe inline-block and it may work. Partly depends on the specific HTML. Also make sure you have a DOCTYPE on the page, that will often make IE6 work slightly better with CSS.

 

[sbryan]

Applying a height to an inline element generally won't work. Make it a block or maybe inline-block and it may work. Partly depends on the specific HTML. Also make sure you have a DOCTYPE on the page, that will often make IE6 work slightly better with CSS.

Tried the different display methods and verified the DOCTYPE. I've learned Safari and FF are versatile and IE7 shines compared to IE6.