Inline-block with IE6/IE7

HTML & CSS
1

Hi people :slight_smile:

I have a test case here : http://jsfiddle.net/fZFYK/

I can’t get the same result in IE7 and FF :confused:
Why does the margin, applied on the first <a>, affect the others?

Is there some clean way of fixing this?

Thanks!

2

The margin is increasing the height of the line-box and changing the vertical alignment.

Try this.


#publication a{vertical-align:top}
3

Well, that’s what I ended up doing.

vertical-align:top;

and

margin-top:7px;

To have everything centered.

What I wanted to know was why IE6 and IE7 modified the adjacent <a>'s.
I guess they handle inline-block differently?
So, the only way to do what I want is use margins?

Thanks!

4

IE6 and 7 treat vertical-align:baseline (the default) almost as bottom on inline-blocks and line everything at the bottom of the tallest element while other browsers align the baseline at the top of the element much the same as vertical-align:top.

Therefore to keep both happy change the default of baseline to something else and they will all be the same (more or less).

Adding a margin-bottom to the inline-block element will offset the alignment as the line-height will be stretched by that margin and if you are trying to line the text up then they will be offset becaus ethe middle will be different for the inline element.

To align the elements remove the bottom margin and place a margin on the parent instead (otherwise you will need to offset half the margin as you have done.).

These all align centrally for me with the text all matching.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    margin:0
}
a.first {
    display:inline-block;
    width:100px;
    background:red;
    margin:0 5px 0 0;
    vertical-align:middle;
    height:200px;
    line-height:200px;
}
a {
    vertical-align:middle;
}
</style>
</head>
<body>
<p><a class="first" href="#">testggggg</a> <a href="#">testgggggggg</a> <a href="#">test</a> <a href="#">test</a></p>
</body>
</html>

vertical-align has always been a little buggy cross browser.