17 replies [Last post]
pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Hi

It has come to my attention that a IE bug that adds a 3px right margin to my floated divs?

I am designing the following website http://www.employsa.com.au/news.html

I have to feed IE a negative -3px right margin to stop this.

I have found a hack but don't know how to insert it into my CSS or whether it is the right hack or not.

myfloateddiv{ 
foo:bar; 
} 
* html myfloateddiv{ 
margin-right:-3px; 
}

My CSS is located at http://www.employsa.com.au/css/employsa_new.css

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

You apply the hack to whatever element is floated, so:

myfloateddiv{
float:left;
other:stuff;
}
* html myfloateddiv{
margin-right:-3px;
}

If it was floated right, your negative margin would be the left one.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

so I would write something like this?

myfloateddiv{ 
float:left; 
#content
#floatright
} 
* html myfloateddiv{ 
margin-right:-3px; 
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

No, you replace myfloateddiv with the name of your div that is floated. You can't put #content etc. in your CSS like that.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

my container is not floated, will this make a difference?

all my floated elements are being used in the content area

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

The hack you've outlined above is for floated elements. Find the floated element that's giving you trouble and apply the above hack to it replacing myfloateddiv with the name of your troublesome float (which in your case would probably be #leftnav).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

still no luck Crying

I tried every combination

* html leftnav{ 
margin-right:-3px; 
}

* html container{ 
margin-right:-3px; 
}

* html top{ 
margin-right:-3px; 
}

* html content{ 
margin-right:-3px; 
}

* html foota{ 
margin-right:-3px; 
}

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

tried these too Crying

* html leftnav{ 
margin-right:-3px; 
}
* html content{ 
margin-right:-3px; 
}
* html container{ 
margin-right:-3px; 
}
* html floatright{ 
margin-right:-3px; 
}
* html floatright2{ 
margin-right:-3px; 
}
* html floatright3{ 
margin-right:-3px; 
}
* html floatleft{ 
margin-right:-3px; 
}
* html floatrightmenu{ 
margin-right:-3px; 
}
* html floatrighttop{ 
margin-right:-3px; 
}
* html floatrighttop2{ 
margin-right:-3px; 
}
* html floatrightmenu2{ 
margin-right:-3px; 
}

still no luck

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

Here is what the error looks like

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

In all those cases, you're missing the # from in front of your div name (or the . if it's a class instead of an ID).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

Ok, I wish that would be the solution to my problems

still no luck with

* html #leftnav{margin-right:-3px}
* html #container{margin-right:-3px}
* html .floatleft{margin-right:-3px}
* html .floatright{margin-right:-3px}]
* html .floatrightmenu{margin-right:-3px}
* html .floatrightmenu2{margin-right:-3px}
* html .floatright2{margin-right:-3px}
* html .floatright3{margin-right:-3px}
* html .floattop{margin-right:-3px}
* html .floattop2{margin-right:-3px}
* html .hr{margin-right:-3px}
* html .hr2{margin-right:-3px}
* html hr{margin-right:-3px}
* html #content {margin-left:168px;height:auto}
}

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

Hey Tyssen

I think I have finally fixed the 3px problem

Check out the final page at [url]http://www.employsa.com.au/latestnews.html
[/url]

I used the following code in my TEMPLATE to fix the problem

<!--[if  lte IE 6]>
<style type="text/css">
#container {overflow-x: hidden;}
* html #leftnav{margin-right:-3px}
</style>
<![endif]-->

THANKS SO MUCH FOR POINTING ME IN THE RIGHT DIRECTION!!!!!!!!!!!

You know I used to live in Brisbane, Berry St Spring Hill Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

I'm glad you've got it sorted finally, although I can't see the changes you've made (certainly can't see the conditional comment in the code for the link above).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

have another look Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

OK, gotchya. Did adding * html #leftnav{margin-right:-3px} to your main stylesheet not sort the problem out though (as only IE browsers will pick that up anyway)? Also, you may need to set your conditional statement for all versions of IE, not just IE6.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

I think I might be ok, I will set for more versions of IE though

The versions are IE5, IE6, IE7 yeah?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need a IE Bug CSS Float Fix

<!--[if IE]> will target all versions of IE.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pauld_82
Offline
Regular
Last seen: 17 years 9 weeks ago
Joined: 2005-10-04
Posts: 33
Points: 0

Need a IE Bug CSS Float Fix

sweet Laughing out loud thanks dude