IE7 li not in the same row
Question
I'm creating a menu for a site and the menu is made of li's. In Chrome and Firefox everything works perfectly, but in IE7 the li's are in the same row, but stacked up in each other.
I did some research and tried these solutions:
- Adding a "Float" property
- Adding a "Width" property
- Adding a "Zoom" property set to 1
- Adding "white-space: nowrap" to the ul
And maybe some more that I don't remember. Non of them worked.
This is my html currently:
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">1</a>
<ul id="submenu">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
And this is my CSS:
#menu li {
width: 150px;
height: 44px;
background: url('menu.png') repeat-x;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
margin-left: -3px;
border-left: 1px solid silver;
float: right;
}
Apperantly the problem was the tester I used. I used my dad's old laptot adding "zoom: 1" and "*display: inline" solved the problem. Sorry for the trouble.
1 answers
solution1
0 2013-05-15 09:16:02
Since the question got voted for by others I am answering it without a hack and have it also crossbrowser compatible. Good luck and have a nice day
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
#menu{
float:right;
}
#menu li {
width: 150px;
height: 44px;
border-left: 1px solid silver;
float: left;
}
#submenu {
margin:0;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">1</a>
<ul id="submenu">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.