IE hides inline images with opaque background

  • Thread starter Beauregard T. Shagnasty
  • Start date
B

Beauregard T. Shagnasty

There must be some easy answer to this, but I don't see it. Inline
images (floated in a <span>) are hidden in Internet Exploder when the
content div has a background color. Tested in IE 5.5 and 6. Page
renders as expected with Firefox, etc.

Test cases. Both pages validate. Each has a link to the other. CSS
contained within the pages. The only difference in the two is the
background color of the #boxcontent div.

http://home.rochester.rr.com/bshagnasty/imgtransparent.html
http://home.rochester.rr.com/bshagnasty/imgopaque.html
 
R

Richard

Beauregard said:
There must be some easy answer to this, but I don't see it. Inline
images (floated in a <span>) are hidden in Internet Exploder when the
content div has a background color. Tested in IE 5.5 and 6. Page
renders as expected with Firefox, etc.
Test cases. Both pages validate. Each has a link to the other. CSS
contained within the pages. The only difference in the two is the
background color of the #boxcontent div.


Interesting indeed. In my html editor, the transparent background shows the
image place holders just fine. But in the opaque, nothing is shown at all.
Just the place where the image should be.

So I did a little playing around with the text.
Upon removal of ALL the "latin" text, bingo! Place holders show up where
they should.
Why? </p> is missing! Just before the first <span>.

That's the only thing I could see wrong.
 
R

Richard

Beauregard said:
There must be some easy answer to this, but I don't see it. Inline
images (floated in a <span>) are hidden in Internet Exploder when the
content div has a background color. Tested in IE 5.5 and 6. Page
renders as expected with Firefox, etc.
Test cases. Both pages validate. Each has a link to the other. CSS
contained within the pages. The only difference in the two is the
background color of the #boxcontent div.

A little more fooling around shows that perhaps you should <div> the text
and float it accordingly.
With any text in the body, under a simple <p> or <div> causes the images to
disappear.
 
A

Augustus

Beauregard T. Shagnasty said:
There must be some easy answer to this, but I don't see it. Inline
images (floated in a <span>) are hidden in Internet Exploder when the
content div has a background color. Tested in IE 5.5 and 6. Page
renders as expected with Firefox, etc.

Test cases. Both pages validate. Each has a link to the other. CSS
contained within the pages. The only difference in the two is the
background color of the #boxcontent div.

http://home.rochester.rr.com/bshagnasty/imgtransparent.html
http://home.rochester.rr.com/bshagnasty/imgopaque.html

if you put:

z-index:-1;

in the #boxcontent the images will show up in IE for the imgopaque.html...
 
B

Beauregard T. Shagnasty

Augustus said:
if you put:

z-index:-1;

in the #boxcontent the images will show up in IE for the
imgopaque.html...

The z-index renders the link unclickable in IE, and causes Firefox to
display a blank page (and if you mouse around, the cursor changes to a
hand where the link is. <g> I had already tried the z-index; should
have mentioned it.
 
B

Beauregard T. Shagnasty

Richard said:
Interesting indeed. In my html editor, the transparent background
shows the image place holders just fine. But in the opaque, nothing
is shown at all. Just the place where the image should be.

That is the problem.
So I did a little playing around with the text. Upon removal of ALL
the "latin" text, bingo! Place holders show up where they should.

Well, duh.
Why? </p> is missing! Just before the first <span>.

The </p> is after the </span> and the rest of the paragraph. The
That's the only thing I could see wrong.

There are no missing tags. The pages validate.
 
P

paul

Beauregard said:
There must be some easy answer to this, but I don't see it. Inline
images (floated in a <span>) are hidden in Internet Exploder when the
content div has a background color. Tested in IE 5.5 and 6. Page renders
as expected with Firefox, etc.

Test cases. Both pages validate. Each has a link to the other. CSS
contained within the pages. The only difference in the two is the
background color of the #boxcontent div.

http://home.rochester.rr.com/bshagnasty/imgtransparent.html
http://home.rochester.rr.com/bshagnasty/imgopaque.html


What is a "transparent" background color?
 
R

rf

Beauregard T. Shagnasty said:

This looks like a flavour of a bug discussed here last year, er, rather in
2003 :) except in that case it was the text that was disappearing. IIRC
it's related to the peekaboo bug.

It happens when you have a background on a positioned element. The order of
painting is stuffed, the background gets painted before the text or, in your
case, the images.

You have position: relative on that div. Remove this and all is fine.

BTW why did you position: relative it anyway? The only reason for doing that
is if you wish to absolutely position elements *within* the relatively
positioned div. You aren't doing this when you use float.
 
D

Duende

While sitting in a puddle paul scribbled in the mud:
What is a "transparent" background color?

When you specify a color you should also specify a background color.
 
D

Duende

While sitting in a puddle Beauregard T. Shagnasty scribbled in the mud:
The problem with IE and the opaque page is the images are behind the
background color...

Well then why not just put them on top. <g>
 
B

Beauregard T. Shagnasty

Duende said:
While sitting in a puddle Beauregard T. Shagnasty scribbled in the
mud:


Well then why not just put them on top. <g>

I ruined three LCD screens trying to scrape them off the bottom...
 
B

Beauregard T. Shagnasty

rf said:
This looks like a flavour of a bug discussed here last year, er,
rather in 2003 :) except in that case it was the text that was
disappearing. IIRC it's related to the peekaboo bug.

Ah, that old debbil.
It happens when you have a background on a positioned element. The
order of painting is stuffed, the background gets painted before
the text or, in your case, the images.

You have position: relative on that div. Remove this and all is
fine.

And ... it is. See pages again. Works fine now.
BTW why did you position: relative it anyway? The only reason for
doing that is if you wish to absolutely position elements *within*
the relatively positioned div. You aren't doing this when you use
float.

I have no idea how that got in there. :-\

Really, I don't. Oh wait, yes I do. I was trying to solve a minor
alignment problem difference last week where the top of the content
div is not in the same position (the top) in IE as it is in FF and
others - relative to the banner and navigation boxes.

But thank you for making my upcoming New Year's party one free of
thinking about problems.

(Grumble... IE... grumble...)
 
R

rf

Beauregard T. Shagnasty said:
But thank you for making my upcoming New Year's party one free of
thinking about problems.

We had ours last night. Fireworks and all :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top