position:absolute

[chechu]

Hey all,

I seem to have an issue with IE7 vs IE8 and FF. The position:absolute makes that a square is not placed at the same spot in the different browsers.

This is the issue here (http://www.lichaamengeest.be): the box on the right (the moving images) is not aligned the same way (untill the elbow of the lady), so the vertical dotted line is also not in line. As a result the arrow is not in the right place either. How can I fix this ?

This is the css of the box:

#welcome {width:225px;height:247px;position:absolute;background-color:#fff; border:1px solid #000; margin-left:512px;margin-top:115px;font-weight:bold;color:#999966;}


Also the little icons (FB, Twitter, etc) are not well aligned on the index in different browsers. Help !

Thanks for any help !

[azoomer]

Hi Chechu, I see what you mean and I suggest you do two things.
First you could use a css reset, that would even out some of the browser differences. I see you have* {margin:0... and so on and that helps, but a reset like the meyer reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)may be even better. Second: I think you will need at least a conditional css stylesheet for IE7 and lower, that you can link with something like this

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
And then make compensation for the additional browser differences here.
I got the above from here (http://css-tricks.com/how-to-create-an-ie-only-stylesheet/)
Okay there may be other ways around the problem, but I think you might end up having to do it this way.

[chechu]

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
So the above lt IE8 means that every browser below IE8 will see a different stylesheet. That's were I was wrong, as I was playing around with lt IE7 !
Stupidity never comes alone ...