Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > IE hides inline images with opaque background

Reply
Thread Tools

IE hides inline images with opaque background

 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-31-2004
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/bshagna...ansparent.html
http://home.rochester.rr.com/bshagnasty/imgopaque.html

--
-bts
-Happy New Year, everyone.
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      12-31-2004
Beauregard T. Shagnasty wrote:

> 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/bshagna...ansparent.html
> http://home.rochester.rr.com/bshagnasty/imgopaque.html



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.





 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      12-31-2004
Beauregard T. Shagnasty wrote:

> 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/bshagna...ansparent.html
> http://home.rochester.rr.com/bshagnasty/imgopaque.html


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.



 
Reply With Quote
 
Augustus
Guest
Posts: n/a
 
      12-31-2004

"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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/bshagna...ansparent.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...




 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-31-2004
Augustus wrote:
> "Beauregard T. Shagnasty" <(E-Mail Removed)> wrote
>
>> 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/bshagna...ansparent.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...


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.

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-31-2004
Richard wrote:
> Beauregard T. Shagnasty wrote:
>
>> 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/bshagna...ansparent.html
>> http://home.rochester.rr.com/bshagnasty/imgopaque.html

>
> 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
<span>...</span> is floated within the paragraph.

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


There are no missing tags. The pages validate.

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
paul
Guest
Posts: n/a
 
      12-31-2004
Beauregard T. Shagnasty wrote:

> 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/bshagna...ansparent.html
> http://home.rochester.rr.com/bshagnasty/imgopaque.html



What is a "transparent" background color?
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-31-2004
paul wrote:

> What is a "transparent" background color?


It allows whatever is behind it to show through.

http://home.rochester.rr.com/bshagna...ansparent.html

#boxcontent {
background: transparent;

The other page uses:
#boxcontent {
background: #dfdfdf;

The problem with IE and the opaque page is the images are behind the
background color...

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-31-2004
"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote

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


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.

--
Cheers
Richard.


 
Reply With Quote
 
Duende
Guest
Posts: n/a
 
      12-31-2004
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?
If it ain't broken fix it anyway.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: background images and span element when images are turned off Adrienne Boswell HTML 1 08-04-2009 10:51 AM
Re: background images and span element when images are turned off Travis Newbury HTML 0 08-04-2009 10:27 AM
table with opaque background Tania Javascript 1 11-18-2004 05:26 PM
Semi-opaque colored background Brian Tozer HTML 11 02-09-2004 06:36 PM
IE TreeView Control has opaque background! SED ASP .Net Web Controls 1 11-21-2003 07:46 PM



Advertisments