IE Image-Overlay Bug. Fix, anyone?

[Shovel]

Regarding: http://resintest.ben-ward.co.uk/

Hiya,

I'm working on very small project for my brother's band. The layout is completely CSS and works fine in FX/Opera. Naturally it's IE with the glitches.

However, this one seems to be a full on bug. You'll see that there are various background images on the site: the faint grey squares down the left-hand-side, and the greyscale watermark picture of the guitarist on the right.

There's a glitch in Internet Explorer that causes those background images to appear on top of the text of child elements. If you scroll down (so that the glitch scrolls off the top of the screen) and back up again, it will correct itself. Though combinations of scrolling + resizing the browser window can make it reappear and transform. Ultimately, it always results in background-image over child element content.

Has anyone ever had this problem before? It's an IE bug, for sure, but I can't (realistically) ship the site like this Wink I'm looking for a solution that doesn't strip out any more decoration in IE, as I'm having to fight my 'bland design' phase enough as it is! heh.


Any/all help gratefully recieved!


Kind Regards,

Ben/Shovel

 

[TheJkWhoSaysNi]

Yes. That is a bug in IE. I've seen it before on a site which showed all the CSS bugs in IE... i cant remember if it listed a workaround for it though.

 

[Jonty]

Hi Ben

Try removing this (redundant?) line from the CSS:

		#page > #body {
				background-image: url("http://resintest.ben-ward.co.uk/img/item_child.png");		
		}

This fixes the bug on my local copy of the site. I haven't come across this problem before, but given that many of the CSS hacks for IE are based are parsing oddities, it may be presumable that this duplicate entry is somehow reapplying the background texture on top of the any child elements (and IE doesn't support '>' selectors, which may add to its confusion).

Kind Regards

Jonty

P.S. This is entirely your call, but I'm told that adding quotes to background 'url()' CSS code can cause IE Mac to encounter problems which omitting them solves. It's still perfectly valid code without the quotes, but I guess it depends on how far you're willing to support browsers (ironically IE Mac has better standards support than it's Windows counterpart and, suprisingly, Mozilla and Opera when it was first released).

 

[Shovel]

Hello again

Well, after much poking around (thanks for your help Jonty!) I narrowed the problem to the 'icon' images in each news post. As soon as they were told not to float (using CSS "float: left|right"), the problem went away. Using any variation of this, or using the old "align: right" also reproduces the bug.

Not sure what to do about this yet, probably have to work out some kind of alternative implementation for IE.. again. Job for tomorrow though. Thanks all

Ben

 

[Shovel]

Fixed!

IE now doesn't get floated icons but instead has a form of absolute positioning with a margin. Doesn't look as good but looks acceptable (which has been my IE philosophy with this site all along).

Sadly my blog got spammed yesterday and my hosting account had to be suspended as it was slowing the server. I'll hopefully get a 'fixed' preview up tonight either on my blog space or on studentssocial space. I didn't have time to put a preview up last night anyway.

Just content to format + layout now and I've officially finished a web project. Bloody hell...

 

[Gef]

Still looks broken to me in IE

 

[Gef]

You can try setting a height/width on those background div's, often helps

 

[Shovel]

Aha, *embarressed* Sorry!

I had an incident last week where my ben-ward.co.uk host went down and I had to preview it on a different domain. I'd forgotten to update the link in this thread, and I'd forgotten to update this host when it came back online.

I'll get the 'fixed' version uploaded tonight for you all the see

Thanks for the sizing tip though Gef, I'll give that a look at some point too.
Regards,

Ben