CODEWITHSUNDEEP
htmlcssinternet-explorer-7html-listsinline
Dor Aharonson
Dor Aharonson

Reputation: 31

IE7 li not in the same row

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:

And maybe some more that I don't remember. Non of them worked.

This is my code:

#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;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</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>
</body>
</html>

Upvotes: 3

Views: 129

Answers (1)

Matthias Wegtun
Matthias Wegtun

Reputation: 1261

Since the question got voted for by others I am answering it without a hack and have it also crossbrowser compatible.

<!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>

Upvotes: 0

Related Questions