SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: Banner image gone in IE7
-
Oct 18, 2006, 11:22 #1
-
Oct 18, 2006, 12:12 #2
- 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]-->
add height:150px; in #banner-inner
-
Oct 18, 2006, 12:29 #3
- 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; }
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>
-
Oct 18, 2006, 12:57 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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; } /* */
Your other problems could have been sorted quite easily also by using these styles.
Code:#container-inner{float:none} #navcontainer{height:auto}
Code:<div id="navcontainer" class="pkg"> <ul id="navlist">
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.
-
Oct 18, 2006, 14:16 #5
- 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