«

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.

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.

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.

"Beauregard T. Shagnasty" <> wrote in message
news:...
> 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...

Augustus 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
>
> 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.

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.

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?

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.

"Beauregard T. Shagnasty" <> 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.

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.