SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6.0 Hiding my Images

    Hi All,
    I have a fairly straightforward 3 column layout using CSS for positioning and formatting, pretty much following examples from Dan Shafer's HTML Utopia book. In my centre column (class=content) I have a number of images. When I set a background color on the content class my images get hidden. If I set the background color to transparent there's no problem. Also, no problem at all using Mozilla 1.4 with either a background color or transparent. I haven't tried older versions of IE. It seems as if when using IE 6.0 the images are being hidden "behind" the background color. I've attached a zip file with code samples. The style sheet is styles/diamond.css - there are two classes .content (with a background color) and .content2 (transparent background). Switching between the two will show how the images dissapear. I don't really understand what I'm doing wrong and would appreciate the help of a CSS pundit.
    tia,
    Ben
    Attached Files Attached Files

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I haven't looked at your code (as it hasn't been attached yet) but try adding position:relative (without co-ordinates) to your content class. In some situations this seems to force ie to show images that have otherwise been hidden.

    (If it's already in the style then I'll wait for the zip file to be attached before I post again )

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Thanks for the advice. I just checed and I'm already using position:relative. I'm off to bed, it's 3:30 am down under
    Ben

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Add position:relative to your inline styles that you have for the image in the content class.

    Or better still take out the inline styles in the images altogether and just add this to your stylesheet.
    Code:
      .content img {float: left;position:relative; margin: 5px 5px 0 0}
    The images now appear in IE6 and Mozilla etc.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Thank you very much. That fixed it :-) Can you explain why this is necessary? Why without position:relative does it display differently in IE6 than in Mozilla? Just an ie browser quirk?
    thanks again,
    Ben

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I hink it's just a quirk with IE. When you float an image in a container that has position:relative set but has no specific width then IE seems to loose the image behind the background.

    Putting position:relative on the child element(image) makes the image appear. I assume its something to do with gaining a stacking context but I think its probably just a bug.

    Adding a specific width to your content class would have made the image appear also but you obviously wanted the width controlled by the margins etc.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. The site's coming along very nicely now. I showed a prototype to some stakeholders tonight and the changes they suggested can be implemented very quickly thanks to the use of css.
    take care,
    Ben


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •