How to make my CSS meny work in IE7?

Hi,

I am trying to make my new IPB forum design work with my CSS meny.

The design (almost) works great in Firefox and Opera. But if you try to view it in Internet Explorer 7 you can clearly see that the main (green) meny doesnt work properly. What is wrong and how can I fix it?

The URL: http://www.enviro-space.com

Here is the CSS code for my meny:

#meny1 {
         display:block;
         width:960px;
         height:30px;
         background: #54933e url('http://www.enviro-space.com/media/images/bg-meny.gif') repeat;
         font-family: "Tahoma", Arial, Verdana, Sans-Serif;'
         font-size:12px;
         text-align:left;
         }
    
     #meny1 ul {
         width:960px;
         height:30px;
         float:left;
         text-align:left;
         list-style: none;
         margin:0px;
         padding:0px;
         }
    
     #meny1 ul li {
         margin:0px;
         text-align:left;
         list-style: none;
         padding-left:0px;
         padding-right:0px;
         font-family: "Tahoma", Arial, Verdana, Sans-Serif;'
         font-size:11px;
         }
    
     #meny1 ul li a {
         float:left;
         margin:0;
         color: #ffffff;
         padding-left:15px;
         padding-right:15px;
         line-height:30px;
         text-decoration: none;
         }
    
     #meny1 ul li a:hover {
         color: #ffffff;
         background: url('http://www.enviro-space.com/media/images/bg-meny-hover.gif') repeat;
         line-height:30px;
         padding-left:15px;
         padding-right:15px;
         }

Code (markup):

And here is the actual meny code from the global_board_header file:

    <div id="meny1">
             <ul>
                 <li><a href="http://www.enviro-space.com">Enviro Space</a></li>
                 <li><a href="{$this->ipsclass->base_url}act=Members">{$this->ipsclass->lang['tb_mlist']}</a></li>
                 <li><a href="{$this->ipsclass->base_url}act=calendar">{$this->ipsclass->lang['tb_calendar']}</a></li>
                 <li><a href="{$this->ipsclass->base_url}act=Search&amp;f={$this->ipsclass->input['f']}" id="ipb-tl-search">{$this->ipsclass->lang['tb_search']}</a></li>
                 <li><a href="{$this->ipsclass->base_url}act=Help">{$this->ipsclass->lang['tb_help']}</a></li>
             </ul>
          </div><!-- end #meny1 -->
                         <if="$component_links != """>
                     {$component_links}
                 </if>
                 <div class='popupmenu-new' id='ipb-tl-search_menu' style='display:none;width:210px'>
                     <form action="{$this->ipsclass->base_url}act=Search&amp;CODE=01" method="post">
                         <input type='hidden' name='forums' id='gbl-search-forums' value='all' />
                         <input type="text" size="20" name="keywords" id='ipb-tl-search-box' />
                         <input class="button" type="image" style='border:0px' src="{$this->ipsclass->vars['img_url']}/login-button.gif" />
                         <if="($this->ipsclass->input['act'] == 'sf' OR $this->ipsclass->input['act'] == 'st') AND $this->ipsclass->input['f']">
                            
     <input type='checkbox' id='gbl-search-checkbox' value='1' onclick='gbl_check_search_box()' checked='checked' /> {$this->ipsclass->lang['gbl_forum_search']}
                         </if>
                     </form>
                     <div style='padding:4px'>
                         <a href='{$this->ipsclass->base_url}act=Search'>{$this->ipsclass->lang['gbl_more_search']}</a>
                     </div>
                 </div>
                 <script type="text/javascript">
                     ipsmenu.register( "ipb-tl-search", 'document.getElementById("ipb-tl-search-box").focus();' );
                     gbl_check_search_box();
                 </script>
                 <if="$this->ipsclass->can_use_fancy_js != 0">
     <script type="text/javascript" src='jscripts/ips_xmlhttprequest.js'></script>
     <script type="text/javascript" src='jscripts/ipb_global_xmlenhanced.js'></script>
     <script type="text/javascript" src='jscripts/dom-drag.js'></script>
     <div id='get-myassistant' style='display:none;width:400px;text-align:left;'>
     <div class="borderwrap">
      <div class='maintitle' id='myass-drag' title='{$this->ipsclass->lang['myass_drag']}'>
       <div style='float:right'><a href='#' onclick='document.getElementById("get-myassistant").style.display="none"'>[X]</a></div>
       <div>{$this->ipsclass->lang['myass_title']}</div>
      </div>
      <div id='myass-content' style='overflow-x:auto;'></div>
      </div>
     </div>
     <!-- Loading Layer -->
     <div id='loading-layer' style='display:none'>
         <div id='loading-layer-shadow'>
            <div id='loading-layer-inner'>
              <img src='style_images/<#IMG_DIR#>/loading_anim.gif' border='0' alt='{$this->ipsclass->lang['ajax_loading_msg']}' />
             <span style='font-weight:bold' id='loading-layer-text'>{$this->ipsclass->lang['ajax_loading_msg']}</span>
             </div>
         </div>
     </div>
     <!-- / Loading Layer -->
     <!-- Msg Layer -->
     <div id='ipd-msg-wrapper'>
         <div id='ipd-msg-title'>
             <a href='#' onclick='document.getElementById("ipd-msg-wrapper").style.display="none"; return false;'><img src='style_images/<#IMG_DIR#>/close.png' alt='X' title='Close Window' class='ipd' /></a> &nbsp; <strong>{$this->ipsclass->lang['gbl_sitemsg_header']}</strong>
         </div>
         <div id='ipd-msg-inner'><span style='font-weight:bold' id='ipd-msg-text'></span><div class='pp-tiny-text'>{$this->ipsclass->lang['gbl_auto_close']}</div></div>
     </div>
     <!-- Msg Layer -->
     </if>

Code (markup):

Thanks for any help!

 

Add these lines in your css file, It may solve your problem.

#meny1 ul li {display:inline;}
#meny1 ul li a {display:block;}

 

Good idea, but unfortunately it did not work.

 

Problem is here ( in #meny1 and #meny1 ul li) :

font-family: "Tahoma", Arial, Verdana, Sans-Serif;'

Code (markup):

Correct it. It should be

font-family: Tahoma, Arial, Verdana, Sans-Serif;

Code (markup):

 

Sorry, but it still doesn't work. And now, for some reason, it looks worse in IE.. Take a look.

 

Try to check in W3C Validator and will point the mistakes. From there you can start to fix the code.

 

That line is still in your css (#meny1).

 

Ops, sorry, I forgot that one..

Thanks for the help, the meny works now.

 

Wow, that's made of /FAIL/.

First, lose the stupid extra div, it's not doing anything for you. You're redeclaring properties in your CSS you should only need to set once, and in general have just really overthought your CSS. Oh, and 11px is also a /FAIL/ so far as accessability goes, since anything less than 12px is next to useless for large font/120 dpi users. (11px, sheesh you'd almost think it was a phpBB skin)

Take your :hover state - you set all that padding and color and everything else in your normal A, you don't need to say it again. Repeat is the default behavior, you don't need to say it. If you are going to declare a font size you might as well declare your line-height at the same time. I wouldn't bother declaring a height, but I would use a narrow line-height and padding to build it because FF vertical-aligns in a most special way. (the same way some olympics could be said to be 'special'). You don't need the quotes becuase you have no spaces in your image url's, and frankly if you are serving it from the same server you shouldn't be wasting time with putting the full URL in the css.

So... nueter the html down to:

<ul id="mainMenu">
	<li><a href="http://www.enviro-space.com">Enviro Space</a></li>
	<li><a href="{$this->ipsclass->base_url}act=Members">{$this->ipsclass->lang['tb_mlist']}</a></li>
	<li><a href="{$this->ipsclass->base_url}act=calendar">{$this->ipsclass->lang['tb_calendar']}</a></li>
	<li><a href="{$this->ipsclass->base_url}act=Search&amp;f={$this->ipsclass->input['f']}" id="ipb-tl-search">{$this->ipsclass->lang['tb_search']}</a></li>
	<li><a href="{$this->ipsclass->base_url}act=Help">{$this->ipsclass->lang['tb_help']}</a></li>
</ul>

Code (markup):

Oh, and you will have the caching delay issue using two separate images for your menu states. I would suggest putting them one over the other and then sliding the background-position around to dodge that bullet.

Which would make it:

#mainMenu {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats in IE */
	font:normal 12px/14px "Tahoma", Arial, Verdana, Sans-Serif;
	background:#54933e url(images/mainMenu.png) 0 0 repeat-x;
}

#mainMenu li {
	display:inline;
	/* 
		trying to style anything on the LI is
		usually made of /FAIL/, so let's just
		set it to inline to get it out of the way
	*/
}
    
#mainMenu a {
	float:left;
	padding:8px 15px;
	text-decoration: none;
	color:#FFF;
	background:#54933e url(images/mainMenu.png) 0 0 repeat-x;
}
    
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background-position:0 -30px;
	background-color:#482;
}

Code (markup):

You'll notice I trapped the :active and :focus states too - no reason to leave keyboard navigators out in the cold. I also set a background-color change so people browsing images off will have something to look at. Just take your background image and make it a .png 1px wide and 60px tall. Top half would be the 'normal' state, bottom half would be your hover state.

That said, bump yer dang fonts or at least switch to %/em for yer content. All that 12px or smaller is next to useless for people browsing at large fonts/120 dpi like myself without having to zoom in 30% or more.

 

Thanks for your input deathshadow! I will take a closer look at them tomorrow.