css - issue with floated divs in IE7 and IE6 -
i have floated 2 elements right in header of website <div id="twitter"> , <div id ="navbar>, there appearance becomes skewed when view them in ie6 , ie7. believe either need clear floated elements or apply clearfix unsure where.
here image of issue in ie6 , ie7:
this desired result appear in modern browsers.

here link web page: http://www.bestcastleintown.co.uk/pg/
css:
#twitter { background: red; float: right; height: 40px; margin-bottom: 40px; width: 200px; } #navbar { font-size: 2.2em; float:right; } html:
<div id="main_header"> <div id="inner_main_header"> <div> <div id="main_logo"> <div class="home_page_logo left"> <a href="index.php"><img src="pg_awards_logo.gif"></a> </div> </div> <div> <div id ="twitter" class="padall"> follow </div> <div id ="navbar" class="right"> <ul class="nav ng"> <li>home</li> <li>enter</li> <li>categories</li> <li>judging</li> <li>sponsorship</li> <li>contact</li> </ul> </div> </div> </div> </div> </div>
change #navbar style this:
#navbar{ font-size: 2.2em; float: right; width: 60%; overflow: auto; } just give #navbar width , overflow other visible.
Comments
Post a Comment