CSS menu has a combo box appearing in front of it in IE6

#1

Hi All,

I'm pretty new to CSS, I added a CSS menu to some existing HTML code I
had to create a menu. It works fine on every browser except IE6,
there one of the comboboxes below the menu appears on top of the
menu. Code is below. Any ideas on how to fix this?

Thanks,
Fred

-----------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
</style>
<title>Barometer Configuration</title>
<script type="text/javascript">

var XmlHttp = null;

function Init() {
if (window.XMLHttpRequest) {
XmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0'); // TODO : test
this on earlier IEs
}
else {
alert("Your browser is too old to support dynamic value updates");
}

if (XmlHttp) {
setInterval(GetData, 1000);
}
}

function GetData() {
XmlHttp.open("GET","/update.html?id=" + Math.random(), true);
XmlHttp.onreadystatechange = Update;
XmlHttp.send(null);
}

function Update() {
if (XmlHttp != null && XmlHttp.readyState == 4) {
if (XmlHttp.status == 200) {
var r = XmlHttp.responseText.split("|");
document.getElementById("mytable").rows[2].cells[1].innerHTML =
"<b>" + r[9] + "</b>";
document.getElementById("mytable").rows[0].cells[1].innerHTML =
"<b>" + r[10] + "</b>";
}
}
}

sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTag Name
("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body onload="Init();">
<img alt="" src="istar.png" height="65" width="237"><br>
<div>
<ul id="navbar">

<li><a href="index.html">System Set-Up & Status</a>
</li>
<li><a href="#">NMEA Output</a>
<ul>
<li><a href="ch1.html">Channel 1</a></li><li>
<a href="ch2.html">Channel 2</a></li><li>
<a href="ch3.html">Channel 3</a></li><li>
<a href="ch4.html">Channel 4</a></li></ul>
</li>
<li><a href="#">UDP Output</a>
<ul>
<li><a href="udpch1.html">Channel 1</a></li><li>
<a href="udpch2.html">Channel 2</a></li><li>
<a href="udpch3.html">Channel 3</a></li><li>
<a href="udpch4.html">Channel 4</a></li></ul>
</li>
<li><a href="baro.html">Barometer</a>
</li>
</ul>
<br>
<form action="baro.cgi" method="get">
<table id="mytable" cellpadding="3">
<tbody>
<tr>
<td>Barometric Pressure</td>
<td><b></b></td>
<td><input TYPE=checkbox NAME="resetBaro">Reset Barometer
Sensor</td>
</tr>
<tr>
<td>Units</td>
<td>
<select name="baroUnits"><!--#echo var="baropressureunits" --

Quote:

/select
/td

<td></td>
</tr>
<tr>
<td>Temperature (Motherboard)</td>
<td><b></b></td>
<td></td>
</tr>
<tr>
<td>Units</td>
<td>
<select name="tempUnits"></
select>
</td>
<td></td>
</tr>
<tr>
<td><input value="Save Changes" type="submit"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<br>
</body>
</html>

#2

fred wrote:

Quote:

Hi All,

I'm pretty new to CSS, I added a CSS menu to some existing HTML code I
had to create a menu. It works fine on every browser except IE6,
there one of the comboboxes below the menu appears on top of the
menu.

Firstly, IE and form controls, with IE6 all controls "overlay"
positioned elements, regardless of z-index as I remember. You can Google
and discover endless complaints where folks have tried to "disable" a
control by overlaying a positioned element which works in other browsers
but not in IE.

Code is below.

No, no, no, no! Post a url to a live example, do not paste markup in
postings, except maybe a small snippet in *addition* to a URL to focus
where suspected trouble is located.

Any ideas on how to fix this?

Quote:

Thanks,
Fred

-----------------------------------------------------------------------------------------
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"
html
head
style
#navbar {

<snip code>

HTML 3.2 in 2009! Get real! If I remember correctly 3.2 had minimal CSS
support. If this is a new document, then discover "HTML 4.01 strict"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#3

On Sun, 5 Jul 2009 08:20:22 -0700 (PDT), fred wrote:

Quote:

I'm pretty new to CSS,

[and this group]

Quote:

I added a CSS menu to some existing HTML code I
had to create a menu. It works fine on every browser except IE6,

....and presumably IE 5.5, IE 5, etc.
I'll bet without looking that you're using hover on elements other than
<a>.

Quote:

there one of the comboboxes below the menu appears on top of the
menu. Code is below.

Please don't post code here. Especially with a bunch of JS and a lot of
unrelated markup.

Quote:

Any ideas on how to fix this?

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"

Ooh, look: quirks mode!
See <http://hsivonen.iki.fi/doctype/>

Quote:

#navbar li:hover ul, #navbar li.hover ul {
... }
#navbar li:hover li, #navbar li.hover li {
... }
#navbar li:hover li a, #navbar li.hover li a {
... }
#navbar li li a:hover {
... }

Aha, I knew it! ;-)

Take a look at, e.g.,
<http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm>

HTH

--
John

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

CSS menu has a combo box appearing in front of it in IE6

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

CSS menu has a combo box appearing in front of it in IE6 - 07-05-2009 , 11:20 AM

Re: CSS menu has a combo box appearing in front of it in IE6 - 07-05-2009 , 12:10 PM

Re: CSS menu has a combo box appearing in front of it in IE6 - 07-05-2009 , 04:46 PM