When it comes to the layout of your webpage there used to be only one option, using a table or more often nested tables to position yout html elements exactly where you wanted them. In these days of CSS, XHTML and building search optimised web sites there is a much better way, but it can give you some real nightmares.
This “new” approach to building web pages involves using DIVs and CSS to position your content. In terms of SEO this can help because you can position your text content closer to the top of your source document, as a general rule the closer to the top the more emphasis it is given. This style of positioning is also more elegant in my opinion, a lot of the information can be kept in an external CSS file allowing you to create clutter free HTML code. So why isn’t everybody creating webistes like this? The answer, bugs, not just any bugs but the large number of CSS/DIV rendering bugs in Internet Explorer, which is still the most popular web browser in the world. I’m going to show you how to cure one such bug using a conditional statement.
The bug i’m going to go through today is the vertical 3 pixel gap that IE6 inserts between divs. What we are talking about here is a layout similar to this rough HTML:-
<div id="wrapper" width="100">
<div style="float:left" id="div1"><img src="myimage.jpg" width="50" /></div>
<div id="div2"><img src="myimage2.jpg" width="50" /></div>
</div>
Now if you were to render that in IE7, Firefox, Opera or any other standards compliant browser you’d get 2 images next to each other in a horizontal line. The div wrapper is 100 pixels wide with both images 50 pixels wide, everything fits nicely. Try rendering this in Internet Explorer 6 though and what you get is 1 image under another, why? Put simply, IE6 inserts a 3 pixel gap between the 2 divs (div1 and div2) making the total width 103 pixels which doesn’t fit. You can of course reduce the image sizes to make it fit but you will still be left with a vertical line of 3 pixels which looks rubbish. The best way of fixing this is to use CSS to set either the right margin of div1 or the left margin of div 2 to -3 pixels, closing the gap. But what happens with the other browsers? Of course the second image overwrites 3 pixels of the first image, what we need is a way of applying this only to versions of IE that don’t render properly.
A conditional statement is just the job, a HTML conditional statement is just like a traditional HTML comment except that Internet Explorer sees it as an if statement, all other browsers will ignore it. My prefered method is to use a seperate style sheet to fix any IE rendering problems and include something similar to this in the source HTML document:-
<!--[if IE 6]>
<link rel="stylesheet" href="include/ie6.css" type="text/css" media="screen" />
<![endif]-->
What this is doing is checking to see if the current browser is IE6, if it is then it includes the line of HTML between the block quotes, in this case loading the css file that fixes the positioning problems on that page. It’s a quick, clean method of fixing this spacing problem.
The next problem i’ll show you how to fix is the the horizontal 3 pixel gap that can show up. The course of that one is so stupid it’s hard to believe that the bug exists!