1. Home
  2. Forums Index
  3. Browser Side / CSS 4:10 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Need urgent css help please - ie problem :-(

IE Problem with CSS

         

learncss

11:27 am on Mar 19, 2006 (gmt 0)

10+ Year Member



Apologies for my css lack of knowledge - but I am trying.

I have been trying to fix this for days now but to no avail. I need to get this online next Thursday to show my tutor. Can anyone help.

I'm having problems with IE and the Z-Index. It sits behind my paragraph.
I have searched everywhere on line but I just don't understand. Im out of my depth. I would really appreciate any help. Thanks in advance and sorry.

Here's some my htm file code
*******************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<META name="Description" content="">
<META name="Keywords" content="">
<link href="css/main.css" rel="stylesheet" type="text/css">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="scripts/menu.js" type="text/javascript">
</script>
</head>
<body>
<div id="nav-toplevel">
<div id="nav-meta">
<ul title="Top Level Navigation bar">
<li><a href="./">Top 1</a></li>
<li><a href="./">Top 2</a></li>
<li><a href="./">Top 3</a></li>
</ul>
</div>
</div>
<!-- End of meta navbar -->
<div id="nav-nextlevel">
<div align="center">
<div id="menu">
<ul id="menujs">
<li id="1"><a href="./" >Item 1</a>
<ul>
<li><a href="./">Item A of 1</a></li>
<li><a href="./">Item B of 1</a></li>
<li><a href="./">Item C of 1</a></li>
<li><a href="./">Item D of 1</a></li>
<li><a href="./">Item E of 1</a></li>
</ul>
<li id="2"><a href="./" >Item 2</a>
<ul>
<li><a href="./">Item A of 2</a></li>
<li><a href="./">Item B of 2</a></li>
<li><a href="./">Item C of 2</a></li>
<li><a href="./">Item D of 2</a></li>
<li><a href="./">Item E of 2</a></li>
</ul>
</li>
<li id="3"><a href="./">Item 3</a>
<ul>
<li><a href="./">Item A of 3</a></li>
<li><a href="./">Item B of 3</a></li>
<li><a href="./">Item C of 3</a></li>
<li><a href="./">Item D of 3</a></li>
<li><a href="./">Item E of 3</a></li>
</ul>
</li>
<li id="4"><a href="./">Item 4</a>
<ul>
<li><a href="./">Item A of 4</a></li>
<li><a href="./">Item B of 4</a></li>
<li><a href="./">Item C of 4</a></li>
<li><a href="./">Item D of 4</a></li>
<li><a href="./">Item E of 4</a></li>
</ul>
</li>
<li id="5"><a href="./">Item 5</a>
<ul>
<li><a href="./">Item A of 5</a></li>
<li><a href="./">Item B of 5</a></li>
<li><a href="./">Item C of 5</a></li>
<li><a href="./">Item D of 5</a></li>
<li><a href="./">Item E of 5</a></li>
</ul>
</li>
</li>
</li>
</ul>
</div>
</div>
</div>
<!-- End of top level navbar --> </div>
<!-- Start of main content section -->
<div id="container">
<div id="content">
<div align="center">
<div id="content"></div>
<p>This is not working very well as the menu items are behind me in IE.</p>
<p>I also need to put another css horizontal dropdown menu here with three dropdown sub menus inside :-(</p>

</div>
</div>
</div>
</div>
</body>
</html>

****************************
Here's my css file:

html {
font-family:verdana, arial, helvetica, sans-serif;
font-size:65%;
color:#555;
background:#fff;
/* Border Image */
background-position:center center;
background-repeat:repeat-y;
}

body {
position:relative;
width:700px;
padding:15px 30px 180px 20px;
margin:10px auto 10px auto;
/* Page Background */
background-position:center center;
background-repeat:repeat-y;
}

#nav-toplevel {
position:relative;
right:290px;
margin-right:-25px;
}
#nav-nextlevel {
position:relative;
right:0px;
margin-right:-30px;
}

#nav-meta {
position:absolute;
right:0;
top:1px!important;
top:0px;
}

#nav-meta ul {
display:inline;
margin:0;
padding:0;
}

#nav-meta ul li {
display:inline;
margin:0!important;
margin-left:3px;
padding:1px;
background-color:#F8FBFF;
border:1px solid #ccc;
border-top:none;
list-style:none;
}

#nav-meta a {
padding-left:2px;
padding-bottom:2px;
font-size:0.94em;
letter-spacing:0.04em;
color:#888;
text-decoration:none;
margin:0!important;
margin-right:-2px;
}

#nav-meta li:hover {
border-top:1px dashed #CACACA;
}

#nav-meta a:hover {
background-color:transparent!important;
text-decoration:none!important;
background-color:#fff;
text-decoration:overline;
}
#menu ul,
#menu li,
#ClearFloat {
margin:0px;
padding:0px;
}
#menu{
position:absolute;
display:block;
top:122px;
margin:0px 0px 0px 99px;
width:auto;
font-family:verdana,Georgia, serif;
font-size:11px;
list-style-type:none;
float:left;
z-index:300;
}

#menu ul li ,
#menu ul li ul li {
position:relative;
font-family:verdana,Georgia, serif;
list-style-type:none;
float:left;
z-index:500;

}
#menu ul li ul {
position:absolute;
display:none;
font-family:verdana,Georgia, serif;
}
#menu ul li a,
#menu ul li a:link,
#menu ul li a:visited {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
color:#888;
text-decoration:none;
margin-left:3px;
margin-top:0px;
padding-bottom:3px!important;
padding-left:4px;
padding-right:4px;
padding-top:3px;
background-color:#FFF;
border:1px solid #ccc;
border-top:none;
line-height:10px;
}
#menu ul li.over ul,
#menu ul li:hover ul {
display:block;
font-size: 11px;
font-family:verdana,Georgia, serif;
text-align:left;
width:100px;
background-color:transparent!important;
text-decoration:none!important;
}

#menu ul li a:hover {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
color:#ccc;
}

#menu ul li ul li a:hover {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
}

#container {
position:relative;
top:160px;
height:100%;
background-color:#F8FBFF;
/* Footer Image */
background-repeat:no-repeat;
margin-bottom:10px;
z-index:100;
}

#content {
position:relative;
width:700px;
background:transparent;
}

#content p {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 25px;
margin:0 15px 1.1em 0;
background-position:bottom center;
background-repeat:no-repeat;
}

#content ol, #content ul{
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 25px;
margin:0 13px 1.1em 0;
background-position:bottom center;
background-repeat:no-repeat;
}
#content li {
list-style-type:square;
margin: 0px 0px 0px 15px;
}

#contentb {
position:relative;
width:525px;
background:transparent;
}

#contentb p {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 20px;
margin:0 15px 1.1em 0;
background-position:bottom left;
background-repeat:no-repeat;
}

#contentb ol, #contentb ul {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 40px;
margin:0 13px 1.1em 0;
background-position:bottom left;
background-repeat:no-repeat;
}

*******************************

and finally here's my menu.js

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menujs");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

window.onload=startList;

***********************************

I alos need to put a horizontal css menu within the page with three sub menu's but I'm not too sure if I'm going to have the same problem.

Thanks so much.

Lisa.

peco

3:01 pm on Mar 19, 2006 (gmt 0)

10+ Year Member



Hi Lisa, try this.

In the <head> put this:

<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" media="screen" />
<![endif]-->

Then save this as ie.css:

#container {
z-index:-1;
}

I tried it in IE6 and it worked.

learncss

6:28 am on Mar 20, 2006 (gmt 0)

10+ Year Member



Yes this worked -I'm so happy thank you so much for all of your help.

I though I was going mad!

Yipeeeeeeeeeeeeee

learncss

7:55 am on Mar 20, 2006 (gmt 0)

10+ Year Member



Hi - Sorry I though it had worked but now none of my A's work as below;

A:link {
color:#888;
text-decoration:underline;
}

A:active {
color:#000;
text-decoration:none;
}

A:visited {
color:#888;
text-decoration:underline;
}

A:hover {
color:#ff490d;
text-decoration:none;
}

I tried to put z-index:-1 for these but it didn't work :-(
Firefox of course works fine!

Any other suggestions please. I really would appreciate it.
Thanks again :-)

Lisa.

doodlebee

1:44 pm on Mar 20, 2006 (gmt 0)

10+ Year Member



You have them in the wrong order (you order is "link, active, visited, hover") . Links ALWAYS need to be put in the order of "link, visited, hover, active". Otherwise, they will not perform as you want them to.

Remember LoVe HAte and you'll always remember the order your link styling should be.

learncss

3:52 am on Mar 21, 2006 (gmt 0)

10+ Year Member



Hi ya,

Thanks so much for your help, but it didn't work unfortunately :(
I didn't know about the order thing, but I suppose that does make sense now.

I ammended my main.css and nope, no go. The links are still disabled in IE, but fine in Firefox, any other suggestions will be greatly appreciated.
Thanks again.

Lisa.

doodlebee

2:36 pm on Mar 21, 2006 (gmt 0)

10+ Year Member



Ahh, you're calling in the wrong area. Do this:

ul#menujs li a:link {
color:#888;
text-decoration:underline;
}

ul#menujs li a:visited {
color:#888;
text-decoration:underline;
}

ul#menujs li a:hover {
color:#ff490d;
text-decoration:none;
}

ul#menujs li a:active {
color:#000;
text-decoration:none;
}

See, your original stylesheet calls for #menu li a to have certain attributes. Your addition of "a:link" simply sets the defaults for the entire page - which the #menu li a stuff overrides. You just needed to be more specific.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:10 am May 2, 2026