box model differences when using display: table-cell

[djeyewater]

Demo: http://www.iliveinabin.com/css-vertical-nav/
CSS: http://www.iliveinabin.com/css-vertical-nav/style.css

I have a vertical nav menu with display: table-cell for each item.

In IE and Webkit border and padding are added to the table-cell's height. In Opera and FF they are included within the table-cell's height.

I am adding padding and border on mousedown (a:active). This means I can either get it to work in IE & Webkit by also adjusting the height, or can get it to work in Opera and FF by leaving the height alone.

How can I make all browsers use the same box model for an element with display: table-cell?

Thanks

Dave

[RyanReese]

This is just how Opera and FF have interpreted the specs I believe. The spec states "In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row but it does not increase the height of the cell box."

Though it only has to deal with tables. Why are you using display:table-cell for the anchors? If you need it to accept width/height stuff, you could just set it to display:inline-block and avoid the browser discrepancies.

Assuming of course, the issue is as I mentioned .

[djeyewater]

I'm using table-cell as I want the text vertically centred. Do you (or anyone else) know if there is another way I can get vertically centred text, or if there is some hack to get FF and Opera to use the standard box model?

Thanks

Dave

[RyanReese]

Let's just remove the display:table-cell and use the inline-block example

http://www.brunildo.org/test/inline-block.html

Inline-block allows vertical center. If you need help, just shout. Though take a look at the code in Firebug, look at how it's working. Tinker with it and see if you can work it out yourself .

We are here in case you get stuck though .

[djeyewater]

Thanks, I did as you suggested and got it working okay. It required the code modified like so:

<li><a href="/about_us.html"><span>About Us</span><span class="valign"></span></a></li>

#sidebarNav li a span{
	display: inline-block;
	vertical-align: middle;
    cursor: pointer;
}
#sidebarNav li a span.valign{
    height: 40px;
}

and the a changed to be block.