Related Items

Startseite arrow HTML arrow IE7 and inline-block
IE7 and inline-block PDF Drucken E-Mail
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 >