SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo Graphic Is Clipped In IE8

    I have a logo located in the top left corner and it is clipped off or trimmed on the bottom part when I view the page in Safari, Chrome and IE 8... but looks okay in IE7. What gives? Why would it do this? Here is a link to the page in question.

    LINK-
    http://www.flynnelectriccompany.com/test/

    Thanks in advance to all that help!
    Todd
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Code:
    #header {
        height: 74px;
    }

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Code:
    #header {
        height: 74px;
    }
    This works well in IE 8 but now the IE6 browser shows the DIV banner pushed down as well as everything beneath it. Would I need to add something to the ie.css style sheet?
    Todd Temple > T2 Design

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    If you change the page you linked to we can look at IE6. Better to have IE8 working first, IMO.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you change the page you linked to we can look at IE6. Better to have IE8 working first, IMO.
    Ralph,

    The link to the page in question has not changed. It is still the same page.
    Todd Temple > T2 Design

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Your header div is not containing it's floats. Your h1 is floated left and the "h1 a" has a height of 101px on it.

    Code:
    #logo a, #logo a:link, #logo a:visited {
    background:url("../i/gfx_logo.png") no-repeat scroll 0 0 transparent;
    display:block;
    height:101px;
    text-indent:-9999em;
    width:271px;
    z-index:999;
    }
    You need to set haslayout on the header for IE6/7 and height will do that. Just make it the same as your "h1 a"
    Code:
    #header {
    height:101px;
    }
    That should work for all browsers.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    After looking at your logo image again it looks like you are wanting the overlap. In that case you could drag the banner up with a neg top margin in addition to what I just posted.

    Code:
    #banner  {
    background:url("../i/gfx_banner_bkg.jpg") no-repeat 0 0 ;
    height:378px;
    margin-top:-27px;
    padding:34px 0 0;
    width:960px;
    }
    Not sure if that is what you are after though.

  8. #8
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    After looking at your logo image again it looks like you are wanting the overlap. In that case you could drag the banner up with a neg top margin in addition to what I just posted.

    Code:
    #banner  {
    background:url("../i/gfx_banner_bkg.jpg") no-repeat 0 0 ;
    height:378px;
    margin-top:-27px;
    padding:34px 0 0;
    width:960px;
    }
    Not sure if that is what you are after though.
    This seems to mess things up for every browser. I am going to remove the margin top and go back to the previous version that worked in all browsers except for IE6... Still wondering why it is doing this. Maybe I should add a condition just for IE6?
    Todd Temple > T2 Design

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I am going to remove the margin top and go back to the previous version that worked in all browsers except for IE6... Still wondering why it is doing this. Maybe I should add a condition just for IE6?
    IE6 treats height as if it were min-height. You have 101px height on your anchor so IE6 is going to stretch the header to accommodate it.

    This seems to mess things up for every browser
    I had mentioned that it needed to be used along with height 101px on the header. Did you do that? I can't get your page to load now for some reason.

    In that case you could drag the banner up with a neg top margin in addition to what I just posted.

  10. #10
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added the height to the #header div and the negative margin-top to the #banner div and all looks well in every browser except IE6.

    Here is a snapshot of the banner with its position shifted down a bit.

    Todd Temple > T2 Design

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    all looks well in every browser except IE6.
    Try setting "haslayout" on #nav for IE6. It is always important that a parent with child floats has-layout. Your LIs' are floated.

    You have overflow:hidden on #nav and that is setting "haslayout" for IE7 and enclosing the floats in modern browsers. It does not trip haslayout for IE6 though.

    Code:
    * html #nav { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
    }

  12. #12
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Try setting "haslayout" on #nav for IE6. It is always important that a parent with child floats has-layout. Your LIs' are floated.

    You have overflow:hidden on #nav and that is setting "haslayout" for IE7 and enclosing the floats in modern browsers. It does not trip haslayout for IE6 though.

    Code:
    * html #nav { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
    }
    I have added this new code to the CSS document and I still see the same results in the IE6 browser only.
    Todd Temple > T2 Design

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You have a "double margin bug" going on in IE6. You have floated the "#nav li a" left with a left margin. It is causing the list items to drop down to a new line. Did you notice that the last couple of links were not visible?

    Code:
    #nav li a, 
    #nav li a:link, 
    #nav li a:visited { 
    text-decoration: none; 
    height: 38px; 
    display: block; 
    margin: 18px 0 0 20px; 
    padding: 0; 
    font: bold 13px/38px Helvetica, Arial, sans-serif; 
    color: #000; 
    text-shadow: #FFF 0 2px 0; 
    float: left; 
    display:inline;/*fix IE6 double margin bug*/
    }
    Also when you set up an override for IE6 it needs to come AFTER the original selector in the cascade.

    Code:
    #nav { 
    overflow: hidden; 
    list-style: none; 
    margin: 0 0 0 12px; 
    }
    * html #nav { /*IE6*/
    height: 1%; 
    overflow: visible; 
    }

  14. #14
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    That did the trick! I should have tried this earlier but I wasn't thinking correctly. I REALLY appreciate your help and sticking with me.

    I am not sure why the links are not working. I tested them on my end and they are working properly. Again, thank you, thank you, thank you!
    Todd Temple > T2 Design


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
  •