Is there a way to force IE (6 and 7) to obey top and bottom padding for inline elements? It works in FF/Opera.
EDIT:
Nevermind, just realized display: inline-block works.
| SitePoint Sponsor |
Is there a way to force IE (6 and 7) to obey top and bottom padding for inline elements? It works in FF/Opera.
EDIT:
Nevermind, just realized display: inline-block works.
Tip:
An inline element by definition means you can't add padding/margin/height/width. Chances are if you need to use inline-block as a work around, your using the wrong element to begin with.
HelloOriginally Posted by Bling
Works if you make room for the top bottom padding with a Element that wraps the inline
PS the font-size of both elements is an interesting issue here
Code:<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- saved from url=(0022)http://www.domain.com/ --> <style type="text/css"> *{padding:0;margin:0;} .x{ padding:.95em 0; text-align:center; list-style:none; } html .x .y{border-left:1px solid #0000ff;} .x li{display:inline;font-size:1em;} .x a{ padding:.9em 3em; background:#ccccff; border:1px solid #0000ff; border-left:none; } .x a:hover{background:#ffccff;} </style> <script type="text/javascript"> </script> </head> <body> <ul class="x"> <li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li> </ul> </body> </html>
I don't believe that's fully true. You can add padding (in all directions) to an inline element, the top and bottom padding just bleed into other lines and isn't calculated into the line-height. You can't have top/bottom margins, but you can have left/right margins. Obviously you can't specify a width or height for an inline element.
As for inline-block, the element fits perfectly for what I wanted to do. According to this document inline-block elements are formatted as inline replaced elements. Inline replaced elements, for those who don't know, are elements such as images, form inputs, form buttons, and so forth. If memory serves correctly, you can add padding/margins/width/height to those elements.
Feel free to correct me if I'm wrong, but I'm pretty sure inline-block was the correct display type to use here.
What I wanted to do worked in the browsers I tested, which were IE6, IE7, FF, Opera, and Safari.
I don't believe it's fully supported on all browsers though. (not sure which one's as I never use it).
You can usually get around this issue by floating elements and then applying padding/margin/height/width to it although need to remember to clear float's where required.
Posting Permissions
Bookmarks