2 replies [Last post]
dthomas31uk
Offline
Enthusiast
Last seen: 14 years 40 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

Hi, have developed my website. Works great in IE6 for Windows and Firefox 1.

The problem I am having is with my CSS drop down menu list which appears on the left of the screen. When using Netscape 7 and IE5 Mac the menu list does not appear properly.

Does anyone have any suggestions

Here is the link.

http://www.alakesidevilla-florida.co.uk/Heraldic/index.htm

Cheers

dthomas31uk
Offline
Enthusiast
Last seen: 14 years 40 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

CSS drop down menu list problem. With Netscape7 and Mac IE5

Hope you don't mind me posting the code, but here it is. The drop down menu list works fine in firefox and ie6, but does not work in IE5 for the Mac and Netscape 7. Has anyone ideas

Cheers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Heraldic Pottery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Hp.css" rel="stylesheet" type="text/css">
<style type="text/css">

#vertnav {
WIDTH: 122px; LIST-STYLE-TYPE: none
}
#vertnav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#vertnav LI {
DISPLAY: block; LEFT: 0px; MARGIN-BOTTOM: 0px; WIDTH: 130px; BORDER-BOTTOM: 0px; POSITION: relative; BACKGROUND-COLOR: #515033
}
#vertnav A {
PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; FONT: 13px verdana; BORDER-LEFT: #ffffff 1px solid; WIDTH: 150px; COLOR: white; PADDING-TOP: 1px; BACKGROUND-COLOR: #515033; TEXT-ALIGN: left; TEXT-DECORATION: none
}
#vertnav A:hover {
COLOR: #cccccc; BACKGROUND-COLOR: #beb968
}
#vertnav UL {
DISPLAY: none; LEFT: 152px; POSITION: absolute; TOP: 0px
}
#vertnav LI:hover UL {
DISPLAY: block
}
#vertnav UL LI:hover UL {
DISPLAY: block
}
HTML #vertnav LI {
FLOAT: left; HEIGHT: 2%
}

UNKNOWN {
LEFT: auto; TOP: auto
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px; PADDING-TOP: 0px
}

#wrapper {
WIDTH: 600px; MARGIN-RIGHT: -40px; TEXT-ALIGN: left;

}

.center {
MARGIN: 0px; COLOR: #673; BACKGROUND-COLOR: #cb6; TEXT-ALIGN: center; font:12px verdana;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
}
.clearing:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
.clearing {
DISPLAY: inline-block
}
HTML .clearing {
HEIGHT: 1%
}
.clearing {
DISPLAY: block
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
TEXT-ALIGN: center
}
LI.rt {
FLOAT: right; BORDER-LEFT: white 1px solid; WIDTH: 150px; font:12px verdana;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
}
LI.lt {
BORDER-RIGHT: white 1px solid; FLOAT: left; WIDTH: 150px;font:12px verdana;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
}
LI A {
DISPLAY: block; COLOR: white; BACKGROUND-COLOR: #673; TEXT-DECORATION: none
}
LI A:hover {
BACKGROUND-COLOR: #cb6
}

li>ul {
top: auto;
left: auto;
}

/* Win IE only \*/
* html #vertnav2 li{float:left; height: 1%;}
/* end holly hack */

.descrp {
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-decoration: none;
text-align: center;
}
</style>

<SCRIPT type=text/javascript>

activateMenu = function(vertnav) {

/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(vertnav).currentStyle) {
var navroot = document.getElementById(vertnav);

/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {

/* If the LI has another menu level */
if(lis[i].lastChild.tagName=="UL"){

/* assign the function to the LI */
lis[i].onmouseover=function() {

/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}

window.onload= function(){
/* pass the function the id of the top level UL */
/* remove one, when only using one menu */

activateMenu('vertnav');
}

</script>

</head>

<body
<ul id="vertnav">
<div align="left"></div>
<li><a href="index.htm">Home</a></li>
<div align="left"></div>
<li><a href="Profile.htm">Profile</a></li>
<div align="left"></div>
<li><a href="Mugs1.htm">Mug Shapes</a></li>
<li> <a href="#">Processes</a>
<ul>
<li><a href="Design.htm">Design</a></li>
<li><a href="Printing.htm">Printing</a> </li>
<li><a href="Decorating.htm">Decorating</a> </li>
<li><a href="Despatch.htm">Despatch</a></li>
<li><a href="MailOrder.htm">Mail Order</a></li>
</ul>
</li>
<li><a href="Contact.htm">Contact</a></li>
<li><a href="Products.htm">Products</a></li>
<li><a href="openstock.htm">Open Stock/Retail</a></li>
</ul>

</div>

</body>
</html>

dthomas31uk
Offline
Enthusiast
Last seen: 14 years 40 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

CSS drop down menu list problem. With Netscape7 and Mac IE5

have managed to locate the line of CSS code that is giving me problems. I use the following in the CSS Menu list

HTML #vertnav LI {
FLOAT: left; HEIGHT: 2%
}

I use this line of code in my CSS to stop white spaces appearing between my menu list items when viewed in Internet Explorer 6 for windows. Now when I take this line of code out the CCS menu works great in all browsers apart from IE6 due to the white spacing problem. How can i place the css tag above in my code only to be read by the IE6 browser. Is there a hack for this.

Hope this makes sense