A while ago I wrote this article about transparency in internet explorer 6. This was just one of many problems with browser compatibility that can hit you when you design a Joomla template. This article is about another such problem: the so called 'double margin bug of internet explorer'. If you see that your Joomla site looks good in Firefox or the brand new Google Chrome browser, but in internet explorer you see that some parts are not at the right place, like there is a double margin, then you've come accross this bug.

What it is

The bug happens if you your site meets following conditions:

• You have a div with the css property float:left
• This div is inside another div
• This floating div has a margin at the left

If these conditions are met, then you will have the double margin bug. If you create tableless templates (like you should), then there's a good chance you'll see this problem sooner or later.

Example

Let's show this with an example. If your code looks like this:

div.wrap {
width: 100%;
}
div.main {
float: left;
width: 100px;
height: 100px;
margin-left: 100px;
}

In browsers that work correctly, this will look like this:

In internet explorer however you will get something like this:

Of course this can mess up your design completely. Luckily, the solution is quit simple

The Solution

Internet explorer will add the margin as expected to the div element. However, internet explorer will look what the display property is and this will add the margin a second time. Now you know how the bug is caused, it's probably not that difficult anymore to guess how to solve it. Simply adding the display:inline property to the div will solve the problem. So the code will look like this:

div.wrap {
width: 100%;
}
div.main {
float: left;
width: 100px;
height: 100px;
margin-left: 100px;
display:inline;
}

Now your Joomla template design will look again the same in all browsers. Speaking of Joomla templates: if you're new to creating Joomla Templates, then keep an eye on our site as we're currently working on an article series to explain in detail where to start if you want to create your own template.