Beerwin's World of Stuff

things for, on and about web

Newsflash

Due to lack of interest in my destop projects (PlainHTML, ShutDownerXP, and newly, WE editor), i decided to shut down all activity regarding desktop projects, this time for good.

In the meantime, i've found my code editor of choice, in the great Eclipse editor, so this is another reason not to develop "yet another web editor". Many third-party components used in my projects are too much buggy, to continue development, some of them outdated, and i don't have time to fix them all. It's a waste of my time, and it will lead to nothing. I'm committing my time to PHP development from this time forward.

The BWS project will be cut down to a minimum, and the forum section will be shut down. I will archive the site, and remove pretty much everything not related to PHP development and web design.

I am introducing a new feature: Logging in with GMail account credentials.

I believe, this will be a good idea, since it won't require to register on the BWS site.

I began to upload some new kind of stuff, widening the content scope of this site. When new information is too valuable to be collected by different content bots, i will put them behind authentication.

User accounts created for the forum are member accounts, thus enabling for you to see these internal articles.

Sign Up here for free!

There is a new template available on BWS: Silver Plating

This is a new template for larger sites, portals, community sites, galleries, etc.

 

 

I want to see it

Old web templates were dropped, because they are out-of-date did not comply with today's standards, and many more reasons.

Those templates will not be available anymore.

Community

HomeResourcesTutorialsCSSIE6 floated element margin correction

IE6 floated element margin correction

Details
Created on Wednesday, 26 May 2010 08:04

You probably went into the problem of IE6's various CSS bugs. You will find here the solution to one of the most widely met one: when you use margins on a floated element, the margin on the side, where the element is floated (eg. left margin of a left floated element) is doubled.

This is quiet a problem when you are relying on floated elements in your page layout, but it can be easily fixed. Here it is:

For first, you will have to create a separate CSS file and conditionally link it for IE6. How you do it?

Let's say, your file will have the name style_ie6.css.

So, you will link it like this:

<!--[if lt IE 7]>
 <link href="/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

The <!--[if lt IE 7]>|<![endif]--> stuff does the trick: this particular CSS file will be loaded in IE 6 and below only.

Remember one thing: Put the stuff for IE6 _AFTER_ any other thing in the <HEAD> element.

Now let's see the thing, that fixes our tiny little problem:

Your style may look like this in all standards compliant browsers:

div#leftcolumn{
 float:left;
 margin-left:10px; 
}

Here is the problem: The 10 pixels wide left margin is doubled by IE6 and becomes 20 pixels wide. So, we will add to our style_ie6.css the following:

div#leftcolumn{
 margin-left: 5px;
}

We don't need to redefine the other rules, as they will be kept and the browser will comply to them.

So, what we just have done here? For IE6, we actually halved the margin width on the floating side.


Discuss this article
You need to log in or register to participate in this discussion.

Latest news

From the blog