No replies to this topic

[ninja_girl]

RESOLVED! Only needed to put

manu1 li{
 float: left;
 }

That worked wonders.

_____________________

Hi,

I'm having the following problem and I could use a fresh pair of eyes to look over my css. (knowing me, it'd be a really simple solution...) I have an unordered list which is customized to make menu. In FF, IE8, Chrome, Opera it works, but IE 7 is stubborn and instead of displaying in on one line, it displays it like this:



Here's my HTML:

  
	  <div id="submenu"><ul id="menu1">
	  <li><a href="#events" class="events">events</a></li>
	  <li><a href="#portrait" class="portrait">portrait</a></li>
	  <li><a href="#natur" class="natur">natur</a></li>
	  <li><a href="#selbst" class="selbst">selbstportrait</a></li>
	  </ul></div>

and my CSS:

#submenu {
	  margin: 0;
	  padding: 0;
	  float: left;
	  width: 500px;
	  }
	  
	  #menu1 {
	  margin: 0;
	  padding: 0;
	  list-style-type : none;
	  padding : 0;
	  width : 665px;
	  height : 25px;
	  position : relative;
	  }
	  
	  #menu1 a {
	  display : block;
	  text-indent : -900%;
	  position : absolute;
	  outline : none;
	  }
	  
	  #menu1 a:hover {
	  background-position : left bottom;
	  }
	  
	  #menu1 a:hover span {
	  display : block;
	  }
	  
	  #menu1 .events {
	  width : 56px;
	  height : 25px;
	  background : url(images/events.jpg) no-repeat;
	  left : 25px;
	  
	  }
	  
	  #menu1 .portrait {
	  width : 88px;
	  height : 25px;
	  background : url(images/portrait.jpg) no-repeat;
	  left : 82px;
	  
	  }
	  
	  #menu1 .natur {
	  width : 71px;
	  height : 25px;
	  background : url(images/natur.jpg) no-repeat;
	  left : 170px;
	  
	  }
	  
	  #menu1 .selbst {
	  width : 112px;
	  height : 25px;
	  background : url(images/selbst.jpg) no-repeat;
	  left : 241px;
	  
	  }

Thanks a lot!

Edited by ninja_girl, 12 September 2009 - 04:54 AM.