weirdest IE6 issue yet!

**cbVision** · 09-01-2009 05:10 PM

OK, so I just spend about an hour before I was realizing what was causing this issue.

Here's my code:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Title</title>
	</head>
	<body>
		<div style="width: 800px; background: #f9f9f9;">
			<div style="width: 538px; height: 222px; background: #ccc; float: left;"></div>
			<div style="width: 20px; height: 222px; background: #000; float: left;"></div>
			<div style="width: 242px; height: 222px; background: #f00; float: right;"></div>
		</div>
	</body>
</html>

Pretty simple, 3 columns fit into an 800 px wrap.

That's how it should look in all browsers, which it does. The problem is whenever I add a comment, for example:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Title</title>
	</head>
	<body>
		<div style="width: 800px; background: #f9f9f9;">
			<div style="width: 538px; height: 222px; background: #ccc; float: left;"></div><!-- test -->
			<div style="width: 20px; height: 222px; background: #000; float: left;"></div>
			<div style="width: 242px; height: 222px; background: #f00; float: right;"></div>
		</div>
	</body>
</html>

It throws the layout off course in IE6! From a simple comment? Anyone know the reason for this? Weird.

**Kor** · 09-03-2009 08:59 AM

IE6 acts weird in case of floated elements. There are 2 solutions for this bug, as weirds as the bug itself

1. You may use an IE Conditional comment:

Code:

<!--[if !IE]> test <![endif]-->

2. Give the div that precedes the comments a display:inline

Code:

<div style="width: 800px; background: #f9f9f9;">
<div style="width: 538px; height: 222px; background: #ccc; float: left; display:inline"></div>
<!-- test -->
<div style="width: 20px; height: 222px; background: #000; float: left;"></div>
<div style="width: 242px; height: 222px; background: #f00; float: right;"></div>
</div>

There is another bug related with this. In case of floated elements, the left or right margins doubles their values in IE6. The workaround is the same display:inline

Why act IE6 like that? No one knows. It is IE6, after all - the silliest browser of all the times

**cbVision** · 09-03-2009 10:13 AM

Kor,

Thanks for the response. I'll give the inline a try.

IE6 is pretty outrageous. Have you seen the new Microsoft promotion to get people to upgrade to IE8? They are donating 8 meals to feed the hungry for every download of IE8. If you are upgrading from IE6, then they will double the donation...maybe this will get the old timers off that garbage!

Thread: weirdest IE6 issue yet!

Thread Tools

Display

weirdest IE6 issue yet!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions