Christian Koller - IE7 and inline-block

Startseite Blog Allgemein Hotlinks Web-admin Nachrichten Gästebuch Kontakt

Web-admin

HTML

Server

CodeIgniter and XAjAX

Related Items

Startseite

HTML

IE7 and inline-block

So, you've created a nice layout using elements with inline-block. A nice look in any browser, but Internet Explorer 7 shows all elements vertically instead of floating? Using

display:block;
float:left;

is not always a nice alternative.

Gladly some people discovered what to do:

Giving this HTML:

<div style="width:250px;">
  <p class="ib">Hi 1</p>
  <p class="ib">Hi 2</p>
  <p class="ib">Hi 3</p>
  <p class="ib">Hi 4</p>
</div>

And this style:

.ib {
  width: 100px;
  display: inline-block;
  margin: 10px;
  background-color: red;
}

To fix this, change the CSS for IE 7 (only!!!) using e.g. conditional comments to:

.ib {
  width: 100px;
  display: inline-block;
  margin: 10px;
  background-color: red;
}
.ib {
  display: inline;
}

Weird? Read on haslayout.net why this works.

A code example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>IE 7 test</title>
    
    <style type="text/css">
        .ib {
          width: 100px;
          display: inline-block;
          margin: 10px;
          background-color: red;
        }
    </style>
    <!--[if lte IE 7]>
        <style type="text/css">
            .ib {
              display: inline;
            }
        </style>
    <![endif]-->
    
</head>
<body>
    <div style="width:250px; display:block;">
      <p class="ib">Hi 1</p>
      <p class="ib">Hi 2</p>
      <p class="ib">Hi 3</p>
      <p class="ib">Hi 4</p>
    </div>
</body>
</html>

Weiter >