• Hi,

    I have a problem with IE 7 displaying my menu, it only shows the first item… Apparently the problem is with the inline-block CSS property. Here’s the code in the header:

    <div id="menu">
    	<div id="menu_items">
        	<ul>
    		<li><a title="Home" href="<?php echo get_option('home'); ?>/" id="home">Home</a></li>
    		<?php wp_list_pages('exclude=6,7,8,9,10,11,12,13,14,15,16&title_li='); ?>
    	</ul>
        </div>

    And here are the relevant CSS attributes:

    #menu{
    	width:100%;
    	height:56px;
    	background:url(images/menu_bg.gif) no-repeat right top;
    }
    
    #menu_items{
    	font-size:13px;
    	color:#ffffff;
    	float:left;
    }
    
    #menu_items ul {
    	list-style: none;
    }
    
    #menu_items li {
    	color:#ffffff;
    	display: inline-block;
    	height: 38px;
    	padding-top:13px;
    	padding-left:7px;
    	padding-right: 7px;
    }
    
    #menu_items li:hover {
    	color:#ffffff;
    	display: inline-block;
    	height: 38px;
    	padding-top:13px;
    	padding-left:7px;
    	padding-right: 7px;
    	background:url(images/menu_bgd_hover.gif) repeat-x;
    }
    
    #menu_items li a{
    	color:#ffffff;
    }
    
    #menu_items li a:hover{
    	color:#ffffff;
    	text-decoration: none;
    }

    Now, what I’m trying to do is to add some text and make it look as a button, showing custom image as a background on hover. This works well in Opera and FF, but I just can’t seem to make IE7 show more that one “button” (only the Home link is visible). Didn’t try it in IE6, I’m using Vista and creating this under WAMP, but I suppose it won’t show it either. Now, I’ve read IE has problems with this inline-block attribute, but I just don’t know the solution… Any help?

  • The topic ‘IE7 CSS problem’ is closed to new replies.