Menu
I have a layout which renders perfectly fine in Webkit based browsers but in internet explorer and firefox the vertical alignment is off. The simplest example of the code is:
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
<div id="content3">Another piece of content</div>
</div>
</body>
</html>You'll see that the #content2 div is pushed up relative to the #content1 and #content3 divs. I've a relatively strong reason to use the inline-blocks over floats in this situation, however if the only "fix" is to move to floats I'll have to get on with it, however I'd rather avoid that work if possible as, currently, time is short for our pilot test launch, in the long term the layout could be moved to floats.
Further more, I've tried to mess with margins and paddings to no success. In that messing I've established that it is the presence of overflow: hidden in #content2 that causes this line-break-esque distortion.
Any help much appreciated.
521
For inline-block I usually specify vertical-align:top to alleviate vertical alignment issues. And be aware that there will be horizontal gaps between the sibling divs that have inline-block, which can only be fixed by killing the literal whitespace in the HTML.
And I hope you are using a doctype.
Hope this helps, otherwise please setup a jsfiddle so I can visually see this.
120
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
