CSS menu has a combo box appearing in front of it in IE6
fred
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").getElementsByTagName
("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">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<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><!--#echo var="pressure" --></b></td>
<td><input TYPE=checkbox NAME="resetBaro">Reset Barometer
Sensor</td>
</tr>
<tr>
<td>Units</td>
<td>
<select name="baroUnits"><!--#echo var="baropressureunits" --
></select>
</td>
<td></td>
</tr>
<tr>
<td>Temperature (Motherboard)</td>
<td><b><!--#echo var="temp" --></b></td>
<td></td>
</tr>
<tr>
<td>Units</td>
<td>
<select name="tempUnits"><!--#echo var="barotempunits" --></
select>
</td>
<td></td>
</tr>
<tr>
<td><input value="Save Changes" type="submit"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<br><!--#echo var="errmsg" -->
</body>
</html>
Jonathan N. Little
> 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?
>
> 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
John Hosking
>
> I'm pretty new to CSS,
[and this group]
> 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>.
> 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.
> 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/>
> #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