png not transparent, div no correctly aligned

[tanel96]

IE 6 and 5.5 are driving me crazy... i have a div with the following properties:

#menu{
background-image:url(logo.png);
position:fixed;
left:0px;
top:50%;
width:200px;
height:100px;
margin-top:-250px;
}

Now, first of all... in IE7 and FireFox everything is OK, but in older versions of IE, the logo.png does not have transparency at all, it just fills the transparent areas of the image with light bluish color.

And the second problem, that a lot people keep having is the alignment, when i view the page in IE 6 or IE5.5 the div is aligned to the top left corner, why is it ignoring the top:50%; and the margin-top:-250px; instructions ???

All help is appreciated, i know if i google'd it long enough i would find the answer but i'm kinda in a hurry :bounce:

[Ectheo]

but in older versions of IE, the logo.png does not have transparency at all, it just fills the transparent areas of the image with light bluish color.

Thats because transparency isn't supported in IE 6 or lower. Same with most web standards, which answers your other question.

[tanel96]

hmm... i see, too bad, but what about the alignment issue ?

[Ectheo]

Same deal primarily, IE6 and below was horribly deficient in complying with web standards, which explains the alignment issues.

If I was better with CSS (I'm still a novice) I'd be more help, and theres probably a workaround for it.

At first glance, it might be a conflicting statement. Margins are typically from the edges of the browser, so defining top:50% and margin-top: -250px might be conflicting since they technically define both things.

[noTime]

About alignment - fixed position is not supported in IE6. Try using some IE workaround. Remember the word Workaround as it's a very useful keyword in google. For example:
workaround position fixed

[jackcviers]

Use conditional comments to write IE 6 and before css fixes. Conditional comments have the same HTML structure as standard <!-- --> html comments, but the instructions in them allow you to only display stuff for Internet Explorer. Anything inside the comments will only work on IE and will be treated as a standard comment in any other browser. You have to include the entire style block or stylesheet link within the conditional comment.

Place the IE styles after the standard styles on the webpage within the conditional comment. You should also replace the PNG with a GIF in IE <= 6.0. PNGs are generally not the best option due to the lack of support in most browsers. You might consider using a flash movie with one frame with a traced logo PNG inside the div tag, but you cannot control that with CSS Your best bet is to use a GIF if the transparency is important, and a jpg with a background that matches the background behind the menu if you just want it to overlay the background. The above post is correct, the margin isn't going to work. Here is an example of conditional style:

<!--[if lte IE 6]>
<style>
#menu{
position:absolute;
left:0px;
top:50%;
width:200px;
height:100px;
background:url(logo.png);
}
</style>
<![endif]-->

http://www.quirksmode.org/css/condcom.html will help you further.