Log in

View Full Version : 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,


<!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

@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:


You can either take a look here. "How to give flash a transparent bg. (http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=2)."

If not, try adding this to your object tag:


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

And add this to your embed tag:


wmode="transparent"

As explained in this post here (http://www.dynamicdrive.com/forums/showthread.php?t=14022).
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.

<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 (http://www.omnicore.be/site)