SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2002
    Location
    Near Ottawa, Canada
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's up with my CSS and IE6

    I'm just working on a site for some friends and trying to use CSS only. The page looks fine in Opera 7.x Netscape 7.x but in IE6 the images don't show up in my "content" class. Even though the alt text shows up on mouse over and the text wraps around the "invisible" image....

    The following is the class for the area:

    .content {
    position:relative;
    width:auto;
    min-width:120px;
    margin:0px 20px 50px 170px;
    background-color: #E3E3E3;
    padding:10px;
    z-index:3;
    }

    and this is the html

    <div class="content">

    <h1>Condoms, Fish and Circus Tricks</h1>

    <p>A compelling narrative on the HIV/AIDS pandemic in Southern Africa. <br>
    <br>
    Shot in Malawi, South Africa, and Zambia, Condoms, Fish and Circus Tricks takes
    an intimate look at the people who are dying, those who are caring for them
    and why AIDS has had such a devastating impact on African society.</p>
    <p><img src="http://www.rooneyproductions.com/images/condom1.jpg" alt="Circus kids and condom" align="left" hspace="15" clear=all></p>
    <p>A group of Durban street
    kids, trained in circus, guide us through the harsh realities of living with
    the HIV/AIDS crisis. The circus becomes a visual metaphor for countries where
    the fight against AIDS depends on the ability to juggle, build pyramids and
    to balance issues of poverty, health care and education. </p>
    <p>In a remote village in northern
    Malawi the struggle is led by local volunteers who care for the dying and 50
    orphaned children without the aid of medicines, transport, clean water or even
    rubber gloves. In fishing community on Zambia's windswept Kafue Flats 10,000
    people live a nomadic existence and often trade sex for fish. Monze Mission
    hospital copes with three doctors, 300 beds and an estimated 8,000 HIV/AIDS
    patients. </p>
    <p>
    Condoms, Fish &amp; Circus
    Tricks discovers a &quot;quiet revolution&quot; is underway as young people
    are talking about sex and starting to challenge traditional concepts of sexuality.
    It is these young people that offer hope for Africa's future.<br>
    </p>
    </div>

    This is bugging me. Why doesn't the picture show up in IE even though it is obviously there?

    URL is here

    Content and design are not the issue. Why the pic shows up in Netscape and Opera, but not in IE is what is baffling.

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [total guess]
    I suspect a peculiar interaction between align="left" on the image, and position: relative on the div.
    [/total guess]

    Try removing one or the other and see what happens. It'll trash the layout a bit, but if the image miraculously appears, then you at least have some idea of what you're up against...

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

    IE6 likes the image to have position:relative when the parent also has a position set otherwise it seems to get drawn over by the background.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Nov 2002
    Location
    Near Ottawa, Canada
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    I defined a class of

    #image { padding: 5px; float: left;position:relative; }

    and it works, now the images show up in IE6. All very basic compared to lots of the posts I see.......

    mucho gracias


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
  •