Unordered list & images (IE7)

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

ninja_girl

Thread Starter
Joined
Nov 22, 2005
Messages
41
Hi,

I'm having the following problem and I could use a fresh pair of eyes to look over my css. :D (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:
Code:
     <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 here's the css:

Code:
#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 in advance!
 
Joined
Mar 28, 2006
Messages
690
I'd normally do this type of list nav by applying a float:left to the li

Code:
#menul li
{
float: left;
}
You might need to tweak around other bits if you apply that - but give it a go
 
Joined
Oct 14, 2008
Messages
135
Hi,

Just define the top:0px in styles

-------------------------------------------//
#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;
top: 0px;
}

#menu1 .natur {
width : 71px;
height : 25px;
background : url(images/natur.jpg) no-repeat;
left : 170px;
top: 0px;
}

#menu1 .selbst {
width : 112px;
height : 25px;
background : url(images/selbst.jpg) no-repeat;
left : 241px;
top: 0px;
}

-------------------------------------------//

Hope this helps

Cheers,

 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top