CSS IE LINKs not working
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 this Thursday to show my tutor, otherwise he's going to throw me off of the course for sure!
Can anyone help please? I'm using IE 6.
I had problems with the IE and Z-Index where it would just sit behind a paragraph. (please see all of my code below)
Now this has been fixed with the external style sheet as per below;
(ie.css)
#container {
z-index:-1;
}
(text in head)
<!--[if IE]>
<link rel="stylesheet" href="../thailand/css/ie.css" media="screen" />
<![endif]-->
....but now I have a problem with all of the A:links, rollover, hover, active etc. They just do nothing if you mouse over them in IE. Of course all is ok in Firefox.
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 id="footer">
<p id="info-footer">
<a href="#">terms</a> |
<a href="#">conditions </a>|
<a href="#">sitemap</a>
</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-decorationverline;
}
#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;
}
#footer {
position:absolute;
bottom:3px !important;
bottom:0px;
right:23px;
width:100%;
font-size:0.94em;
}
#info-footer {
position:absolute;
right:-32px;
}
/*#info-standards {
position:absolute;
right:0;
top:-1.2em;
}*/
/*additional*/
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;
}
*******************************
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 also 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 in advance much.
Lisa.
CSS Codes
Reply With Quote
Bookmarks