SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE and display:inline-block... limitations?

    Found this article while trying to make sense why an element I have w/ display:inline-block style-rule doesn't show up on IE(6).

    Hours and hours of testing, I couldn't put a finger on it till just a couple ago. It seems that it has to be in the middle of content, like text for example.

    Let's say in this article, http://hedgerwow.com/360/dhtml/css-display-inline.html. It has the following:

    Code:
    .demo1 a{
    	
    	background:buttonface url(http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif) 50% 50% no-repeat;
    	width:100px;
    	height:100px;
    	border:outset 2px buttonface;
    	margin:2px;
    	vertical-align:middle;
    	
    	display:-moz-inline-block;
    	display:-moz-inline-box;
    	display:inline-block;
    
    
    	font-size:0;
    	line-height:0;
    	text-indent:-500px;
    }
    
    
    
    .demo1 a:hover{
    	border-color:white;
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif);
    }
    
    .demo1 a:active, .demo1 a:focus{
    	border-style:inset;
    	outline:none;
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif);
    }
    Code:
    <p class="demo1">
    	inline text here
    	<a href="#n1">button</a>
    	<a href="#n2">button</a>
    	<a href="#n3">button</a>
    	inline text here
    display inline block ... 
    </p>
    However, taking out anything before the a#n1 would cause the inline-block ruled A-tags to not display in IE(6) but still show up for FF (from my testing). That is:

    Code:
    <p class="demo1">
    	<a href="#n1">button</a>
    	<a href="#n2">button</a>
    	<a href="#n3">button</a>
    	inline text here
    display inline block ... 
    </p>
    >>> Is there any work-around/hack(?) to have IE show it if it is the first element (the way FF shows it)?

    Pointers/suggestions/help greatly appreciated.

    TIA,
    Sherwin
    Last edited by piku; Oct 25, 2007 at 07:44. Reason: Updated w/ example of what I'm trying to achieve in IE


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
  •