SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down IE 6 probs again.

    Hi peeps

    Dammit... i really wanted to get throught this time without asking for your help, but it seams IE PC has stumped me again.

    2 small display problems...

    Firstly, you can see that at the top and bottom of the page.. the divs holding the little shadows are all out... and i cant understand why.

    Second, I have made a class for the footer like Paul O'B advised me to on this forum before, so that the left hand nav bar stretches to the bottom of the page in Firefox and camino. But now... that same fix has broken it in IE.... but only on the PC. If i remove the class, and just use a clear:both; its ok... but broken again in firefox.

    So if anyone has a clue... i would love to find out !

    http://62.110.86.76/test/template/weblog.html

    Cheers everyone.

    Matt

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

    The shadows are out because ie won't render an element less than the current font-size/line height unless you specify overflow:hidden;

    Code:
    .topcap {
    background-image: url(http://62.110.86.76/test/template/images/top_cap.gif);
    width: 786px;
    height: 8px;
    margin: 0 auto 0;
    overflow:hidden;
    }
     
    .bottomcap {
    background-image: url(http://62.110.86.76/test/template/images/bottom_cap.gif);
    width: 786px;
    height: 8px;
    margin: 0 auto 0;
    overflow:hidden;
    }
    I'm nor sure why iE isn't clearing the div but tis will work.
    Code:
    .mainblog {
    margin: 21px 0 0 0;
    padding-bottom: 8px;
    }
    .clearer {
    height:1px;
    overflow: hidden;
    clear: both;
    margin-top: -1px;
    display:block;
    font-size:0;
    border-bottom:1px dotted #ccc;
    }
    I've taken the border out of main blog and added it to the clearer to make things neater as ie won't play ball.

    The html is changes as follows
    Code:
    	     <br class="clearer" />
    </div>
    <div id="footer">
    We get rid of the div and use the break tag instead.

    This should fix everything with any luck :}

    Paul

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

    We better split those as mozillas complaining

    Code:
    .mainblog {
     margin: 21px 0 0 0;
     padding-bottom: 8px;
     border-bottom:1px dotted #ccc;
     }
    .clearer {
     height:1px;
     overflow: hidden;
     clear: both;
     margin-top:-1px;
     }
    * html .clearer {
     font-size:1px;
     border-bottom:1px dotted #ccc;
     display:block;
    }
    Thats better

    paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhh... all better ! Once again, thanks a heap Paul ! The only thing i had to do was to leave the border on the bottom of the main blog because in the real site, this will be repeated with different entries, and that border will act as a separator... but everything looks cool with it left in place !

    One other question... i understand everything you have done here, except for the ( * html ) part... could you explain what exactly that does ?

  5. #5
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattwebb
    One other question... i understand everything you have done here, except for the ( * html ) part... could you explain what exactly that does ?
    The ( * html ) part is a hack that only IE sees.


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
  •