SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member MindPlunge's Avatar
    Join Date
    Oct 2006
    Location
    California
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Banner image gone in IE7

    I guess I'm going snowblind here. Can't figure out why IE7 isn't displying the banner. All looks good in Safari, IE6 and FF.

    SITE
    CSS

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css should be completely rewritten, ie hacks moved between conditional comments...
    As a quick fix, add before </head>
    Code:
    <!--[if IE 7]>
    <style type="text/css">
    #navcontainer{height:auto;}
    </style>
    <![endif]-->
    remove width and height from #banner
    add height:150px; in #banner-inner

  3. #3
    SitePoint Member MindPlunge's Avatar
    Join Date
    Oct 2006
    Location
    California
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! The quick fix worked. One other problem is that my navigation is 'hidding' in IE7. If I change the height in the #navcontainer (currently 22px) the navigation will be visible but the 1px doesn't stretch 100%. Changing the height will also change the design in FF and Safari...

    Any work around this problem?

    CSS
    Code:
    #navcontainer
    {
    margin: 0;
    padding: 0;
    height: 22px;
    font: 11px Verdana, sans-serif;
    width: 100%;
    border-bottom: 1px solid #bbb;
    list-style-type: none;
    background: #fff;
    }
    
    #navlist li
    {
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
    display: block;
    }
    
    #navlist li a, #navlist li a:link
    {
    background: #fff;
    color: #333;
    text-decoration: none;
    padding: 3px 5px 3px 5px;
    display: block;
    }
    
    #navlist li a:hover
    {
    color: #333;
    border-bottom: 3px solid #647858;
    cursor: pointer;
    background: #eee;
    }
    
    #navlist li a#current, #navlist li a#current:link
    {
    color: #000;
    cursor: default;
    font-weight: bold;
    border-bottom: 3px solid #999;
    }
    
    #navlist li a#current:hover
    {
    border-bottom: 3px solid #f90;
    background: #eee;
    }
    CSS
    Code:
    <ul id="navlist">
    <li><a href="http://www.mindplunge.com" >home</a></li>
    <li id="active"><a href="http://www.mindplunge.com/weblog/" id="current">blog</a></li>
    <li><a href="http://www.mindplunge.com/weblog/archives.php">archives</a></li>
    <li><a href="http://www.mindplunge.com/weblog/about.php">about</a></li>
    <li><a href="http://www.mindplunge.com/weblog/contact.php">contact</a></li>
    </ul>

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

    Your clearing technique is flawed in ie7 because you have copied it incorrectly. You need to remove * html from the inline-block property because ie7 needs it.

    e.g.

    Code:
     /* .pkg class wraps enclosing block element around inner floated elements */
     .pkg:after
     {
     	content: " ";
     	display: block;
     	visibility: hidden;
     	clear: both;
     	height: 0.1px;
     	font-size: 0.1em;
     	line-height: 0;
     }
      .pkg { display: inline-block; }
     /* no ie mac \*/
     * html .pkg { height: 1%; }
     .pkg { display: block; }
     /* */
    ie7 uses inline-block to force layout and then uses display:block to reset the display but still keeps "layout" forced.

    Your other problems could have been sorted quite easily also by using these styles.

    Code:
     #container-inner{float:none}
     #navcontainer{height:auto}
    Then add the clearing technique to the navcontainer instead of the height.
    Code:
     		<div id="navcontainer" class="pkg">
     			<ul id="navlist">
    That works for all without resorting to conditional comments or extra hacks.

    There is no need to add the clearing technique to actual floats either as floats will automatically encompass child floats. You only add the clearing technique to elements that are not floated so that they will contain their nested floats.

  5. #5
    SitePoint Member MindPlunge's Avatar
    Join Date
    Oct 2006
    Location
    California
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Thanks for the help. I'm still not sure how the 'float' behaves but for now I'm good to go.


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
  •