www.webdeveloper.com
Results 1 to 3 of 3

Thread: weirdest IE6 issue yet!

  1. #1
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143

    weirdest IE6 issue yet!

    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.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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
    Last edited by Kor; 09-03-2009 at 10:02 AM.

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles