DIV issue in IE

[noholdsbarned]

Hi All,

I'm having trouble figuring out how to solve this issue. I have a div called "kitty" within another div called "masthead", relatively positioned, and inside kitty is a transparent png. This renders correctly in every browser except for IE, naturally.

Anyone have any ideas on how i can work around this problem?

You can look at the test site here: http://coachingbycarminda.com/test

If you view it on Firefox or Safari, it should look seamless, but on IE it gets all crazy. I'm on a Mac, but have tested on both PCs and Macs, and I've only found the problem on IE.

For those who don't have IE, here is what it looks like on the browser: http://coachingbycarminda.com/test/images/cbc_IE.JPG

Any help would be awesome!

[rangana]

...now with IE7, it looks fine to me :D

[noholdsbarned]

yeah, i need it to look fine in v5.5 and 6 also.

[rangana]

I don't have v5 and 6 here...my apologies :D

[sandyk3]

Hi,

I've had that same problem and found out that IE 5.5 and 6 do not handle png's the way you'd like.

I also would like to recommend www.browsershots.org to you as I work on a MAC also and it's a pain having to switch over to "the dark side" just to test in IE.

Happy Coding!
Sandy K

[noholdsbarned]

that's an awesome site; thanks for that.

so maybe my issue is with the PNG itself, and not the way my divs are set up?

[noholdsbarned]

im realizing that big gap between the masthead graphic and the menu isnt an issue caused by the png, but by something with the code... as far as i can tell. i've solved the transparency issue but can't figure out why the code is rendering that huuuge gap.

any ideas?

[sandyk3]

Well, maybe I love to say this. My boyfriend keeps telling me, when I have a problem with IE, and I'm struggling to find a "fix", "Honey, it's Internet Explorer - that's your problem". I am tending to side with him as I have read that IE is not compliant in many areas of HTML. And they keep trying to fix it, but run into other issues. You can, however, put in a JavaScript that encourages your users to upgrade to the newest IE7. I checked out your code and I don't really see any problem with it, but I am not an expert, like some of the people on this forum. I've learned a ton by lurking around.

I'll be watching this post to see if anyone can come up with a fix for your code.

Sandy K

[madhavthepawn]

I checked in IE6 and its looking fine:)

[sandyk3]

I put the site through browsershots and everything looks great.

Sandy K

http://browsershots.org/http://coachingbycarminda.com/test/

[noholdsbarned]

thanks sandy and pawn. i toyed with it a little more, and got it to work correctly on ie6. finally! :)

[Colino]

Hiyas

I'm running into a similar problem myself. What was your work around?

[noholdsbarned]

sorry, i didn't see this reply earlier.

i absolutely positioned the div layer containing the transparent png (kitty), and called it within the div layer masthead.

this is how i set up my css.



#kitty {
z-index:100;
position:absolute;
left: 590px;
top: -10px;
}

#masthead {
float: left;
width: 800px;
height: 90px;
background-color: #f4eee4;
overflow: hidden;
}

[rangana]

Have you seen its effect on different resolutions??..
From w3schools:


An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

[Zayne]

Hey, hi. =] Not really sure if it's the code's fault or if it's blogger's, but blogger keeps giving me this message, saying:

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "name"."

I double checked it all and previewed it in Evrsoft, everything looks fine. Can anyone help? =x

Thanks. =]
Zayne.

[rangana]

How about creating a new thread instead ;)