SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    box model differences when using display: table-cell

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Let's just remove the display:table-cell and use the inline-block example

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

    I
    nline-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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I did as you suggested and got it working okay. It required the code modified like so:
    Code:
    <li><a href="/about_us.html"><span>About Us</span><span class="valign"></span></a></li>
    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •