Menu not displaying correctly in IE

**Digidoom** · 04-19-2009, 11:59 AM

Hi,

I am fairly new in CSS and been creating a site with dynamic menus.
It was going along nicely when I finally tried the site in IE.
Only tested it in Firefox when I was writing it.
I have been looking up the problem but cant seem to find the solution.
Here is my code,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html>
<head>
<title>Welkom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/evs.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="css/IE_hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">

<div id="header">
	<div id="header-top">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="975" 

height="125" id="FlashID" title="logoheader">
	    <param name="movie" value="images/logo header.swf">
	    <param name="quality" value="high">
	    <param name="wmode" value="opaque">
	    <param name="swfversion" value="9.0.45.0">
	    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to 

download the latest version of Flash Player. Delete it if you don’t want users to see 

the prompt. -->
	    <param name="expressinstall" value="Scripts/expressInstall.swf">
	    <!-- Next object tag is for non-IE browsers. So hide it from IE using 

IECC. -->
	    <!--[if !IE]>-->
	    <object type="application/x-shockwave-flash" data="images/logo 

header.swf" width="975" height="125">
	      <!--<![endif]-->
	      <param name="quality" value="high">
	      <param name="wmode" value="opaque">
	      <param name="swfversion" value="9.0.45.0">
	      <param name="expressinstall" value="Scripts/expressInstall.swf">
	      <!-- The browser displays the following alternative content for users 

with Flash Player 6.0 and older. -->
	      <div>
	        <h4>De inhoud van deze pagina vereist een nieuwere versie van Adobe 

Flash Player.</h4>
	        <p><a href="http://www.adobe.com/go/getflashplayer"><img 

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 

alt="Haal Adobe Flash player of geef toestemming." /></a></p>
          </div>
	      <!--[if !IE]>-->
        </object>
	    <!--<![endif]-->
      </object>
	</div>
	<div id="nav">
	 <ul>
            <li><a href="index.htm">Button Home</a></li>
            <li><a href="subject1.htm" class="current">Button 1</a></li>
            <li><a href="#">Button 2</a></li> 
            <li><a href="#">Button 3</a></li>
            <li><a href="#">Button 4</a></li>        
	  </ul>
	</div>
</div>
<div id="clr"></div>
<div id="column1">
	 <ul>
            <li><a href="#" class="current">Button<BR>ONE</a></li>
            <li><a href="#">Button<BR>TWO</a></li>
            <li><a href="#">Button<BR>THREE</a></li> 
     </ul>
</div>
<div id="column3">
      <ul>
        <li><a href="http://www.site1.com" id="logo"></a></li>
        <li><a href="http://www.site2.com" id="logo"></a></li>
      </ul></div>
  <div id="column2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Vestibulum 
    libero urna, rhoncus nec, pellentesque ut, facilisis vel, lacus. Donec orci 
    quam, euismod sit amet, bibendum quis, ullamcorper porta, ligula. Cras sem 
    tortor, pulvinar non, porta fermentum, dapibus at, massa. Nulla auctor pede 
    nec dolor. Mauris non nisi. Suspendisse blandit. Proin egestas elementum dui. 
    Donec egestas. Nullam velit. Nullam sed mi ac mauris scelerisque pretium. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue nunc, 
    eleifend sed, tristique quis, iaculis vitae, dolor. Vivamus gravida. Sed purus. 
    <p>Pellentesque ante. Vestibulum tempor nibh et mi. Vestibulum sed nisl. Nunc 
      tempor, lectus vehicula interdum gravida, velit sapien blandit purus, id 
      fermentum sem libero eu diam. Ut sed mauris a dolor ornare bibendum. Nam 
      in nisi. Cras ullamcorper. Proin sit amet ligula in nisl feugiat blandit. 
      In viverra purus in leo. Aenean tempor libero tempus lorem. Maecenas sed 
      orci vel nisi feugiat consequat. Vestibulum posuere ipsum. </p>

    <p>Maecenas at tortor. Maecenas elementum pellentesque tellus. Sed quam neque, 
      rhoncus in, lobortis nec, ullamcorper faucibus, magna. Praesent euismod. 
      Vivamus congue eros congue augue. Vivamus tincidunt. Donec laoreet, pede 
      eu aliquam sagittis, justo eros sollicitudin purus, ut consequat sem mauris 
      vitae quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
      posuere cubilia Curae; Phasellus ut ipsum. Fusce ultrices orci in metus. 
      Maecenas mollis volutpat sapien. Donec iaculis, risus at feugiat egestas, 
      mi massa rutrum eros, id suscipit libero ligula quis augue. <br>
    </p>
  </div>


<div id="footer">&copy; 2009</div>

</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

And here my css

Code:

@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding: 0px;
background: #EEE;
}

#wrapper{
width: 975px;
margin-right: auto;
margin-left: auto;
background: #FFF;
}

#header{
width: 975px;
height: 125px;
}

div#clr{
clear: both;
}

div#nav ul{
list-style: none;
padding: 2px;
margin: 1px;
float:right;
}

div#nav ul li{
float:left;
}

div#nav ul li a{
font-family:Arial, Helvetica, sans-serif;
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
height: 18px;
background: #6978B4;
color: white;
text-decoration: none;
}

#column1{
width: 150px;
padding: 5px;
background: #FFF;
float: left;
}

div#column1 ul{
list-style: none;
padding: 2px;
margin: 1px;
float: none;
}

div#column1 ul li a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
display: block;
padding:5px;
margin: 1px;
height: 30px;
background: #6978B4;
color: black;
text-decoration: none;
}

div#nav ul li a:hover{
background: #2D2896;
}

div#nav li a.current, div#nav li a.current:hover, div#nav li a.current:active {
	color: #6964AA;
	background: #FFF;
	cursor: default;
}

#column2{
	width: 625px;
	background: #FFF;
	margin: 0 auto;
	border: 0px solid #000000;
	text-align: left;
}

div#column1 ul li a:hover{
background: #BBD;
}

div#column1 li a.current, div#column1 li a.current:hover, div#column1 li 

a.current:active {
	color: #F00;
	background: #FFF;
	cursor: default;
}

#column3{
width: 150px;
padding: 5px;
background: #FFF;
float: right;
}

div#column3 ul{
list-style: none;
padding: 0px;
margin: 0px;
float: none;
}

div#column3 ul li a{
margin-top: 15px;
display: block;
text-decoration: none;
}

#footer{
width: 975px;
height: 25px;
background: #333333;
color: white;
clear:both;
padding: 0px;
text-align: center;
}

#column3 #logo {
	background: url(../images/logo.jpg) no-repeat;
	width: 145px;
	height: 80px;
	}

I hope it is not too difficult to make it work...

**Nile** · 04-19-2009, 03:09 PM

What's the problem with the menu? Is it under the flash? If it is:

Originally Posted by Nile

You can either take a look here. "How to give flash a transparent bg.."

If not, try adding this to your object tag:

Code:

<param name="wmode" value="transparent">

And add this to your embed tag:

Code:

wmode="transparent"

As explained in this post here.

**Digidoom** · 04-19-2009, 06:25 PM

It is not a flash menu. It is a list menu.
The horizontal menu seems to dissapear behind the main content.
This happens only in IE.
Firefox or Chrome does not have that problem.

Code:

	<div id="nav">
	 <ul>
            <li><a href="index.htm">Button Home</a></li>
            <li><a href="subject1.htm" class="current">Button 1</a></li>
            <li><a href="#">Button 2</a></li> 
            <li><a href="#">Button 3</a></li>
            <li><a href="#">Button 4</a></li>        
	  </ul>
	</div>

Example here

Thread: Menu not displaying correctly in IE

Thread Tools

Search Thread

Menu not displaying correctly in IE

Bookmarks

Bookmarks

Posting Permissions