Jump to content

Css Menu Problem In Ie7, Works In Ff


Recommended Posts

If you could go to www.dirtjournal.com and look at the far right menu, "Contest"...the first menu selection is a link. It is the only link that I have in all of my menus and it is the only one that doesn't appear correctly in IE7. It looks fine in FF. Before adding display:block to the #menubar ul li:hover ul a, it didn't have the beige background at all but instead had the <ul> background which is dark brown. Adding block to the <a> caused it to get a background down to the bottom of the text. What can I do to get it to look like it does in FF?Here is the HTML for that menu...

<li>  <img id="contestbutton" src="pictures/button6.jpg" alt="Contest">  <div class="menutop">	<ul style="width:126px;">	  <a target="_blank" href="http://www.dirtjournal.com/poll.php"><li>Vote!</li></a>	  <li id="winnersmenu">Winners		<div class="menutop">		  <ul>			<li onClick="ajaxFunction('winners09')">2009</li>			<li onClick="ajaxFunction('winners08')">2008</li>			<li onClick="ajaxFunction('winners07')">2007</li>			<li onClick="ajaxFunction('winners06')">2006</li>		  </ul>		</div>	  </li>	</ul>  </div></li>

The CSS...

#menubar{ text-align: center; clear: both; width: 797px; }#menubar img{border: none; vertical-align: middle; cursor: pointer; }.menutop{position:relative;}#menubar ul{padding: 0; margin: 0; list-style: none;}#menubar ul li{float: left;}#menubar ul li ul {display: none;}#menubar ul li ul li, #menubar ul li ul li ul li{float: none; background-color: #e2cda1; padding: 5px; border-style: solid; border-color: #48372d; border-width: 1px; cursor:pointer;}#menubar ul li:hover ul{position: absolute; display: block; background-color: #48372d;}#menubar ul li:hover ul a{display: block; text-decoration: none; color: black;}#menubar ul li:hover ul li ul{display: none;}#menubar ul li#archivesmenu:hover ul li:hover ul{display: block; position: absolute; top: -25px; left: 134px; background-color: #48372d; width: 100px;}#menubar ul li:hover ul li#winnersmenu:hover ul{display: block; position: absolute; top: -25px; left: -105px; background-color: #48372d; width: 100px;}#menubar ul li:hover ul li:hover, #menubar ul li:hover ul li:hover a, #menubar ul li:hover ul li:hover ul li:hover{background-color: #674d3d; color: #e2cda1;}

Link to comment
Share on other sites

  • 2 weeks later...

actually, just because your site uses it, how do you get images that overlap items like the coins over the nav bar and the such? Are those done with floated images and whatnot? What is theory behind setting up a site like that and how do you design it? Do you make the site without the overlapping picture and then measure the site out and customize the picture specific to the site and z-float them all on top? Sorry if that wasn't explained well, but I have little knowledge on how that effect is achieved.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...