CSS UL UL LI issue in IE8

[jarvis]

Hi all,

 

I hope some kind soul can help me as I've an issue driving me mad. I've the following block of html:

<ul>
<li><a href="#"><span class="selected">Link</span></a></li>
<!-- show sub nav -->
<ul>
	<li><a href="#"><span>» Link</span></a></li>
	<li><a href="#"><span>» Link</span></a></li>
	<li><a href="#"><span>» Link</span></a></li>
</ul>
<!-- eof show sub nav -->
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#" class="back">< Back to X</a></li>
</ul>

Which has this rather lengthy block of CSS:

		#section_sub_navigation ul {
			list-style: none;
		}
		#section_sub_navigation li {
			margin: 0px 0px 0px 0px;
			height: 30px;
			line-height: 30px;
		}
			#section_sub_navigation li a {
				font-size: 13px;
				color: #053E77;	
				text-decoration: none;
			}
			#section_sub_navigation li a span {
				font-size: 13px;
				color: #053E77;	
				text-decoration: none;
				background: #F2F2F2;
				border-bottom: 1px solid #E3E3E3;
				display: inline-block;
				height: 29px;
				width: 210px;
				line-height: 30px;
				padding: 0px 0px 0px 10px;
			}		
			#section_sub_navigation li a span.selected {
				font-size: 13px;
				color: #053E77;	
				text-decoration: none;
				background: #EEC52B;
				border-bottom: 1px solid #E3E3E3;
				display: inline-block;
				height: 29px;
				width: 210px;
				line-height: 30px;
				padding: 0px 0px 0px 10px;
			}				
			#section_sub_navigation li a:hover span {
				font-size: 13px;
				color: #053E77;	
				text-decoration: underline;					
			}	
			#section_sub_navigation ul ul li  {

			}				
			#section_sub_navigation ul ul li a span {

			}
			/*#section_sub_navigation ul ul li a span {  
				font-size: 13px;
				color: #FF0000;	
				text-decoration: none;
				background: #FFF;
				border-bottom: 1px solid #E3E3E3;
				display: inline-block;
				height: 29px;
				width: 200px;
				line-height: 30px;
				padding: 0px 0px 0px 20px;
			}*/
			#section_sub_navigation ul ul li a span {  
				font-size: 13px;
				color: #FF0000;	
				text-decoration: none;
				background: #FFF;
				border-bottom: 1px solid #E3E3E3;
				display: inline-block;
				height: 29px;
				width: 200px;
				line-height: 30px;
				padding: 0px 0px 0px 20px;
			}				
			#section_sub_navigation ul ul li a:hover span {
				font-size: 13px;
				color: #FF0000;	
				text-decoration: underline;					
			}	
			#section_sub_navigation li a.back {
				font-size: 13px;
				color: #FF0000;	
				text-decoration: none;
				font-weight: bold;
			}
			#section_sub_navigation li a.back:hover {
				font-size: 13px;
				color: #FF0000;	
				text-decoration: underline;
			}

Now, the menu does what it's meant to in Chrome and FF, however, in IE8 it won't show. For Chrome and FF I get this:

Link

> Link

> Link

> Link

Link

Link

Link

 

In IE8 I just get this:

Link

Link

Link

Link

 

It simply won't show the sub nav (> Link). What am I missing?

Am developing locally at the mo so not got a link (sorry!)

 

TIA

 

jarvis

[jarvis]

Hmm, OK I've solved it by adding:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Not sure if this is a suitable solution or not but it has worked!

 

Thoughts?

 

Thanks for looking

 

jarvis