2 replies [Last post]
kigoobe
kigoobe's picture
Offline
Regular
Paris
Last seen: 10 years 34 weeks ago
Paris
Timezone: GMT+2
Joined: 2007-06-27
Posts: 14
Points: 0

Hi guys

I was trying this menu from dynamic drive.

I tried using float:left with the menu id. Like:

#sideMenu{
  border: 1px solid black;
  border-bottom-width: 0;
  width: 185px;
  float: left;
}

With a float left, the menu elements are not clickable in IE7. Works fine everywhere else (tested in FF, Netscape, Chrome, Opera, Safari and even in IE6).

If I remove the float:left from the id, everything works fine again.

I tried not to use the float in this place, and used a seperate class with the same (float:left) and then enveloping the list in a div. Ex.

<div class="floatLeft">
  <div id="#sideMenu">
    <ul>
      <li>...</li> etc.
    </ul>
  </div>
</div>

Same result. It seems that IE7 needs something more if I want to have the menu with a float:left attached to this.

Any hints?
Thanks.

Here is the full css for the menu I'm using:

#sideMenu{
	border: 1px solid #858688;
	border-bottom-width: 0;
	width: 185px;
	margin: 0 10px;
	float: left; /*Here is my problem. If I remove this, everything is fine. With this, the menu won't work in IE7, works everywhere else*/
    /*I tried adding z-index here, tried with display: block, inline and inline-block, clear: both, nothing worked*/
}
 
#sideMenu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 90%;
	text-align: left;
}
 
#sideMenu li a{
	display: block;
	padding: 6px 0;
	padding-left: 9px;
	width: 169px; /*185px minus all left/right paddings and margins*/
	text-decoration: none;
	color: #E1E7EF;
	background-color: #1677EF;
	border-bottom: 1px solid #90bade;
	border-left: 7px solid #1958b7;
}
 
* html #sideMenu li a{ /*IE only */
	width: 187px; /*IE 5*/
	w\idth: 169px; /*185px minus all left/right paddings and margins*/
}
 
#sideMenu li a:hover {
	background-color: #2586d7;
	border-left-color: #1c64d1;
}
#sideMenu li a.current{
	border-left: 7px solid #FF0000;
}
#sideMenu li a.current hover{
	border-left: 7px solid #FF0000;
}
 
#sideMenu h3{
	color: #E1E7EF;
	border-bottom: 1px solid #000000;
	padding: 3px 0;
	padding-left: 5px;
	background-color: #858688;
	font-weight: bold;
	margin: 0;
	text-align: left;
	font-size: 15px;
}
and html
<div id="sideMenu">
<h3>My menu</h3>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.csscreator.com">CssCreator</a></li>
</ul>
</div>

kigoobe
kigoobe's picture
Offline
Regular
Paris
Last seen: 10 years 34 weeks ago
Paris
Timezone: GMT+2
Joined: 2007-06-27
Posts: 14
Points: 0

Edit: Solved using

Edit: Solved using position:relative.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 37 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Post updated

*edit, you beat me. Glad it's working for you.

I'm no expert, but I fake one on teh Internets