Image position in IE6 just not playing ball

Get Started
1

Hi all,

Hopefully can shed some light on this as I’ve run out of ideas and it’s driving me mad. Yes you’ve guessed it, it concerns IE6 and CSS.

In short. I have a website, a two column design. The right column has a DIV by the name of right-body that controls the padding/margins from the left and right sides of that column.

I have an image that must stick out from the left side, that is right from the first pixel from the left side of the right column.

Firefox and Opera are working wonderfully but IE6 is just not playing ball. If I do the code as it is for Firefox/Opera it will always cause the image to stick out from the left side of the right column by 18px.

The only way I can trick IE6 into displaying the image correctly is by:
<!–[if IE 6]><style type=“text/css”>#right-body { margin-left: -18px; }</style><![endif]–>

The problem with that is it causes the left margin to move left for all the content in that right column. It fixes one problem but creates another.

This is the right column DIV:

#right-body {
float: right;
width: 200px;
padding: 40px 48px 40px 29px;
}

The image is position by its own DIV:

#content_left_image img {
vertical-align: text-top;
float: left;
padding: 0px 10px 0px 0px;
margin:8px 8px 8px 8px;
}

It seems no amount of tweaking the padding/margin inside the CSS file affects IE.

I’m already forcing the image as far left as I can in IE6 by <!–[if IE 6]><div id=“content_left_image” style=“margin-left: -48px; margin-top: 20px;”> <![endif]–> but this still needs the <!–[if IE 6]><style type=“text/css”>#right-body { margin-left: -18px; }</style><![endif]–> above to force it to move.

Am I missing something simple or is IE6 just going to win this one?

Thanks in advance, really appreciated.

2

Why don’t you use positioning ?

doing weird stuff with margins (like negative margins) can be a real pain (been there, done that …)

3

Thanks. You’re right. This does help a lot, now there’s only a 1px gap in IE6 to the left of the image which I can’t remove (so a big improvement).

The only problem with absolution positioning is if a user zooms in on the page (which they can in FireFox or Opera etc.) then the graphic gets kicked out of its place and doesn’t look as intended anymore.

For this reason I find negative margins nice but it’s always something IE6 just has to do differently.

Strangely enough I also have images from the right side of right-body using its own DIV (like for like) but IE6 renders is correctly. It’s just the float: left IE6 is really disliking.

<!–[if IE 6]><style type=“text/css”>#right-body { margin-left: -18px; }</style><![endif]–>

That line does the magic for IE6 but as mentioned above, changes the left margin for that whole DIV on that page. Somewhat like taking a step forward and then back again to arrive at square one.

Any thoughts what else I could try?

Thanks.

4

I’ve tried putting the whole image inside its own DIV so there’s the outer formatting container and then the image positioning container within that (both inside the right-body DIV) but unless I make right-body have a margin of -18px in IE6 it doesn’t matter what other containers I wrap that code in.

It seems IE6 won’t go more left than the left margin of right-body will allow it. It’s only once you change (force) the latter can I go optionally wrapping it up in more DIV’s. The only issue is that then there’s need to go wrapping it in extra DIV’s anyway.

Confusing hey?

I have no idea where the 18px gap is coming from. Firefox/Opera don’t go inventing a left margin when there isn’t even one specified.

5

Nope, inventing margins (or inventing just about anything really) we can leave up to good old IE, real browsers don’t do that.

Can you give a link to your webpage? I’m not quite able to follow what you are doing this way …

If not, is your website w3c complient, i.e., no HTML errors and/or warnings?

6

Thanks for responding. The page isn’t online as it’s yet to be launched.

After more head scratching I figured out how to bite the bullet. I first had to take one step back by forcing the magins to be larger in the right-body DIV and then take one step forward by adding padding to make up for the difference (-18px). Now it renders just fine in IE6 and Firefox/Opera.

It also zooms in nicely given its not position via absolute values which should make some visitors happier.

7

Kudos :slight_smile: