SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top/bottom inline padding in IE.

    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.

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Sydney, Australia
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bling View Post
    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.
    Hello

    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>

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bling View Post
    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.
    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.

    Quote Originally Posted by csswiz View Post
    I don't believe it's fully supported on all browsers though. (not sure which one's as I never use it).
    What I wanted to do worked in the browsers I tested, which were IE6, IE7, FF, Opera, and Safari.


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
  •