Tech Support Guy banner
Status
Not open for further replies.
1 - 4 of 4 Posts

·
Registered
Joined
·
41 Posts
Discussion Starter · #1 ·
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!
 

·
Registered
Joined
·
690 Posts
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
 

·
Registered
Joined
·
135 Posts
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,

 
1 - 4 of 4 Posts
Status
Not open for further replies.
Top