Member Avatar for Naggelos

Hello,
I'm having some issues with IE (suprise suprise).

I added an image, and added a negative top margin to it, for it to be located between two div tags (div it's located in and the div above). It is a transparent .png (AlphaImageLoader used for correct transparency on IE), so I want to mix the background of the two divs its places over.
It all looks fine in all browsers except IE. I've looked for solutions online and played around with it for a while with no luck and was wondering if anyone can help me.
(Hope this made sense, I could get some screenshot pictures online if needed).

here's a simplified version of the code:
main-top div is the one with images being cut off.

HTML

<div id="logonav">
</div>

<div id="main">

<div id="main-top">
</div>

</div>

CSS

body
{
	font-family: "Calibri", Arial, Helvetica, sans-serif;
	font-size: 12.5px;
	font-weight: normal;
	color:#fff;
	margin: 0px;
	padding: 0px;
	height: 100%;
	background: url(images/bg.jpg);
	background-repeat:repeat-x;
}

#logonav
{
	height: 200px;
	margin: 0 auto 0 auto;
	width: 960px;
	padding-top: 25px;
}

#main
{
	height: 750px;
	background: url(images/bg-bottom.png) #01330c;
	background-repeat:repeat-x;
}

#main-top
{
    width:960px;
    background:url(images/eqn-header.png);
    background-repeat:no-repeat;
    height:120px;
    float:left;
    margin: -60px 0px 0px 0px;
}

Thanks.

  • 3 Contributors
  • 4 Replies
  • 85 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by jimy jim3

Dani AI

Generated

This is a classic IE clipping problem when you try to pull a single PNG across two stacked containers. , slicing the image works but is a maintenance headache. A more robust approach is to let the overlapping graphic live in a positioned layer instead of relying on negative margins and IE-specific PNG filters.

Try this pattern: make the parent a positioned container with visible overflow, then take the header graphic out of the normal flow with absolute positioning and a z-index. That keeps the visual overlap stable across browsers and avoids many IE rendering quirks.

/* example idea — use class names to match your HTML */
.container { position: relative; overflow: visible; }
.header-overlap { position: absolute; top: -60px; left: 0; z-index: 10; }

Troubleshooting checklist:

  • Verify no ancestor has overflow: hidden or auto (that will clip children).
  • If AlphaImageLoader is in use for old IE, test removing it to see if the filter is the culprit; avoid it where possible and use conditional IE fallbacks if you must support IE6.
  • For legacy IE-only fixes, try adding position/z-index and zoom:1 to force layout, but treat these as last-resort hacks.
  • Test in actual IE versions and in IE compatibility modes — behavior differs between IE6/7/8.

As noted, a screenshot and the exact IE version help pinpoint the cause; include those when testing. Overall: prefer positioning over negative margins, avoid AlphaImageLoader where possible, and keep the overlapping element in its own positioned layer.

Recommended Answers

All 4 Replies

Member Avatar for Naggelos

sorry, forgot to mention.

The image is just being completely cut off at the part that is located in the div above; and just in IE.

Please let me know if there is a solution for this.
Thanks in advance!

Member Avatar for Naggelos

Ok, i've made it to look right now.. by halving the header image in half and adding each side to each div.. but was still wondering there was an actual solution for it to look right on IE

Member Avatar for Member #120589

Do you think that you may have had more responses if you had included screenshots?

Member Avatar for jimy jim3

Guys, im sorry this is offtopic but i am not a member. There is an ie but with javascript where when you have the content show the div onMouseOver and then hiding it onMouseOut... it works but then when you come back in onMouseOver, the div doesn't show. The div is located inside an image

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.