Menu
I'm having an annoying rendering issue with IE my code is
CSS :
div {
display: inline-block;
margin-right:40px;
border: 1px solid;
}
HTML :
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
This is how it looks in firefox/chrome (the expected display)
This is how it looks in IE
I googled if IE supports display: inline-block, and apparently it does.
318
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Add white-space: nowrap; to your . layout style declaration. This will do exactly what you need: preventing the divs from wrapping. Save this answer.
We can change the default value of how will the HTML element be rendered using the CSS Display property. NOTE − The <div> element has a default CSS display set to block and <span> element has a default CSS display set to inline.
Compared to display: inline , the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline , top and bottom margins & paddings are not respected, and with display: inline-block they are.
Working Solution
The following appears to work correctly in:
<!DOCTYPE html>
<html>
<head>
<style>
DIV {
display: inline-block;
*display: inline; /* leading asterisk IS correct */
margin-right:40px;
border: 1px solid;
zoom: 1; /* seems to fix drawing bug on border in IE 7 */
}
</style>
</head>
<body>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
</body>
</html>
Answer History
http://jsfiddle.net/3sK4S/
Works fine for me in IE9 Standards Mode. Does not display correctly (as you described) in quirks mode.
Testing with IE9:
To trick IE7:
div {
display: inline-block;
*display: inline; /* leading asterisk IS correct */
margin-right:40px;
border: 1px solid;
}
Taken from this article. Works for me in IE 7 emulation mode.
Per @SKS comment about doctype, I have added a complete solution with a doctype specified.
88
Add DOCTYPE to your html,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It works for me after I added this.
Note: in jsFiddle, DOCTYPE was automatically generated so it will work there.
Edit 1: Check this for more information,
Edit 2: You can read more about inline-block styling here
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
