IE hides inline images with opaque background

Discussion in 'HTML' started by Beauregard T. Shagnasty, Dec 31, 2004.

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

    --
    -bts
    -Happy New Year, everyone.
    Beauregard T. Shagnasty, Dec 31, 2004
    #1
    1. Advertising

  2. Beauregard T. Shagnasty

    Richard Guest

    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/bshagnasty/imgtransparent.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.
    Richard, Dec 31, 2004
    #2
    1. Advertising

  3. Beauregard T. Shagnasty

    Richard Guest

    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/bshagnasty/imgtransparent.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.
    Richard, Dec 31, 2004
    #3
  4. Beauregard T. Shagnasty

    Augustus Guest

    "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/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...
    Augustus, Dec 31, 2004
    #4
  5. 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/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...


    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.
    Beauregard T. Shagnasty, Dec 31, 2004
    #5
  6. 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/bshagnasty/imgtransparent.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, Dec 31, 2004
    #6
  7. Beauregard T. Shagnasty

    paul Guest

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



    What is a "transparent" background color?
    paul, Dec 31, 2004
    #7
  8. paul wrote:

    > What is a "transparent" background color?


    It allows whatever is behind it to show through.

    http://home.rochester.rr.com/bshagnasty/imgtransparent.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, Dec 31, 2004
    #8
  9. Beauregard T. Shagnasty

    rf Guest

    "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.
    rf, Dec 31, 2004
    #9
  10. Beauregard T. Shagnasty

    Duende Guest

    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.
    Duende, Dec 31, 2004
    #10
  11. Beauregard T. Shagnasty

    Duende Guest

    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>

    --
    D?
    If it ain't broken fix it anyway.
    Duende, Jan 1, 2005
    #11
  12. Duende wrote:
    > 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>


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

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Jan 1, 2005
    #12
  13. rf wrote:
    > "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.


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

    --
    -bts
    -Happy 2005, everyone.
    Beauregard T. Shagnasty, Jan 1, 2005
    #13
  14. Beauregard T. Shagnasty

    rf Guest

    "Beauregard T. Shagnasty" <> wrote

    > 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 :)

    --
    Cheers
    Richard.
    rf, Jan 1, 2005
    #14
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian Tozer

    Semi-opaque colored background

    Brian Tozer, Feb 8, 2004, in forum: HTML
    Replies:
    11
    Views:
    4,782
    Steve Pugh
    Feb 9, 2004
  2. Adrienne Boswell
    Replies:
    1
    Views:
    499
    dorayme
    Aug 4, 2009
  3. Travis Newbury
    Replies:
    0
    Views:
    429
    Travis Newbury
    Aug 4, 2009
  4. SED

    IE TreeView Control has opaque background!

    SED, Nov 20, 2003, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    133
    Alvin Bruney
    Nov 21, 2003
  5. Tania

    table with opaque background

    Tania, Nov 18, 2004, in forum: Javascript
    Replies:
    1
    Views:
    71
    Randy Webb
    Nov 18, 2004
Loading...

Share This Page