SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Plays Up in List

    Hi - under an h2, I've got a ul, and IE7 uniquely displays the dot of the first list item above the h2 instead of below it.

    Please could you go to this page:

    http://www.greensmoothie.com/1gs/

    scroll down to the right-hand side <h2> "Eat Raw Foods from a Sprouter"

    you'll see IE7 displays the dot of the first list item "Organic home-grown" ABOVE the h2 on right, when in all other browsers, including IE6 + IE8, it displays correctly below the h2 on left.

    Please do you know how to fix this?

    html:

    <div class="leafh2">
    <h2>Eat Raw Foods from a Sprouter</h2>
    </div>
    <blockquote>
    <ul>
    <li><span class="high">Organic home-grown</span>...

    css:

    .leafh2 {
    float:left;
    width:100%;
    background:transparent url(imgpg/leaf25.gif) no-repeat scroll 25% 50%;
    margin:20px 0 30px;
    }
    .leafh2 h2 {
    float:right;
    width:45%; /*or 350px*/
    background:#e5ffbf;
    padding:12px 10px;
    margin-right: -50px; /*txtbox padng*/
    font:bold 1.2em Helvetica,sans-serif; color:#f00251;
    text-align:center; vertical-align:middle;
    position:relative;
    }

    thank you! - Val

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <ul style="clear:both;">

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! that works, I went with:

    <div class="leafh2">
    <h2>Eat Raw Foods from a Sprouter</h2>
    </div>
    <blockquote class="clear">
    <ul>...

    .clear {clear:both}

    But to avoid it ever cropping up, I'd rather place the clear in the css. I tried this but it does not work:

    .leafh2, .leafh2 h2 {
    clear:both;
    content: ".";
    display:block;
    height:0;
    }

    Do you know how I can tell those 2 floats in .leafh2 + .leafh2 h2 to clear themselves from next line on?

    thanks, Val

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .leafh2 ul {
    clear:both;
    }

  5. #5
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes but that makes it specific to ul's only. I'm thinking there may be other instances where the floats don't clear - so I wanted to apply the clear to everything that comes after them - or are ul's the only thing that will be fussy?

    thanks, Val

  6. #6
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually .leafh2 ul {clear:both} does not work! The dot is back up above the h2

  7. #7
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apply it directly ul {clear:both} overflow:hidden works as well, but you then lose the bullets in IE

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by valarcher View Post
    thank you! that works, I went with:

    <div class="leafh2">
    <h2>Eat Raw Foods from a Sprouter</h2>
    </div>
    <blockquote class="clear">
    <ul>...

    .clear {clear:both}

    But to avoid it ever cropping up, I'd rather place the clear in the css. I tried this but it does not work:

    .leafh2, .leafh2 h2 {
    clear:both;
    content: ".";
    display:block;
    height:0;
    }

    Do you know how I can tell those 2 floats in .leafh2 + .leafh2 h2 to clear themselves from next line on?

    thanks, Val
    For one thing that CSS there must include the :after pseudo class (content property only works with :before and :after)

    Try something like this
    Code:
    .leafh2:after {
    	clear:both;
    	content: ".";
    	display:block;
    	height:0;
    }
    It's the same technique as the clearfix . IE will need haslayout set though since it doesn't understand the :after psueodo class (IE6/7 need haslayout I mean )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -

    >Apply it directly ul {clear:both}

    Problem is I don't want to apply it randomly to every ul. I think I'll just stick with class="clear" in the first element below the h2 whenever I see the h2 floats are not clearing.

    Ryan I tried this but it has no effect on the IE7 problem:

    .leafh2:after {
    clear:both;
    content: ".";
    display:block;
    height:0;
    }
    .leafh2 {zoom:1.0}

    many thanks for everyone's input - Val

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well then just give the .leafh2 overflow:hidden; instead (it needs some sort of clearing mechanism )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •