need help with CSS menu(works fine in firefox)

[surf]

Maybe someone could give me some quick help on this or pointer. The
following is basic code
for a CSS style menu. It seems to work fine in firefox, but in IE the
pulldowns off the menu do not appear. I'm a bit new at this, can
someone tell me what to try ?



<style type="text/css">
body {
/* background: black */
background: black;

}
#subnav {
width: 900px;
height: 2.7em;
margin: 0 auto;
/*background: #fff url(../images/navfade.gif) repeat-x;*/
background: #bc8f8f url(/public/images/sh42.jpg) no-repeat bottom;
font-size: 14;
}

#nav, #nav ul {
width: 31.7em;
padding: 0;
margin: 0 auto;
list-style: none;
}

#subnav ul.admin {
width: 36.3em;
}

#nav a {
display: block;
padding: 0 0.5em;
text-decoration: none;
}

#nav li {
float: left;
}

#nav li ul {
position: absolute;
left: -999em;
width: 10em;
background-color: #ccc;
}




}

</style>

<div id="subnav">

<ul id="nav">


<li><a href="#">Gigs</a>
<ul>
<li> <a href="/main/list_gigs/1">Upcoming Gigs</a> </li>
<li> <a href="/main/list_gigs/0">Past Gigs</a> </
li>

</ul>
</li>
<li><a href="#">Bio</a>
<ul>

<li> <a href="/main/show_bio/1">John </a> </li>

<li> <a href="/main/show_bio/2">Joe</a> </li>

<li> <a href="/main/show_bio/3">Tom</a> </li>

<li> <a href="/main/show_bio/4">Larry</a> </li>

</ul>
</li>

</ul>

</div> <!-- eof #lvl2nav -->

 

[Adrienne Boswell]

Maybe someone could give me some quick help on this or pointer. The
following is basic code
for a CSS style menu. It seems to work fine in firefox, but in IE the
pulldowns off the menu do not appear. I'm a bit new at this, can
someone tell me what to try ?

Google for suckerfish - you may need a bit of javascript to make it work
correctly for IE (I am assuming < 7 ?).

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

surf wrote :

Maybe someone could give me some quick help on this or pointer. The
following is basic code
for a CSS style menu. It seems to work fine in firefox, but in IE the
pulldowns off the menu do not appear.

Which version of Firefox? Which version of IE? Please be specific.

I'm a bit new at this, can

someone tell me what to try ?



<style type="text/css">
body {
/* background: black */
background: black;

If I have set color to be black if the author stylesheet does not define
one, then I'll have black on black.
If you submit your stylesheet to the CSS validator, you'll get a
warning, precisely for such reasons.

}
#subnav {
width: 900px;

Is your menu still working in 800x600 scr. res.?

height: 2.7em;

One recommendation/advice when designing stylesheet is to set width and
height using the same unit, at least the same type of unit (absolute or
relative. You avoid some type of rendering problems that way. At the
very least, use absolute or relative unit for the dimension of a page
division, not both mixed up.

margin: 0 auto;
/*background: #fff url(../images/navfade.gif) repeat-x;*/
background: #bc8f8f url(/public/images/sh42.jpg) no-repeat bottom;
font-size: 14;

CSS 1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C
standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing
CSS 2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

An example is well given by your own stylesheet: sometimes, you use em,
sometimes you use px. A machine reading your stylesheet would not be
able to assume what unit you use for font-size.

}

#nav, #nav ul {
width: 31.7em;
padding: 0;
margin: 0 auto;
list-style: none;
}

#subnav ul.admin {
width: 36.3em;
}

Where is ul.admin in your code?

#nav a {
display: block;
padding: 0 0.5em;
text-decoration: none;
}

#nav li {
float: left;
}

#nav li ul {
position: absolute;
left: -999em;
width: 10em;
background-color: #ccc;
}




}

</style>

<div id="subnav">

<ul id="nav">


<li><a href="#">Gigs</a>

If Gigs is not a link, then don't use an href for it. You have to
consider cases where javascript support is disabled or inexistent. Your
markup code and css must degrade as gracefully as possible. Here, I'm
sure the accessibility of your menu could be improved.

<ul>
<li> <a href="/main/list_gigs/1">Upcoming Gigs</a> </li>
<li> <a href="/main/list_gigs/0">Past Gigs</a> </
li>

</ul>
</li>
<li><a href="#">Bio</a>

Same thing here: if Bio is not a real link, then do not define it as a
link. The menu could still be expandable on a click event ... without
having Bio as a link.

<ul>

<li> <a href="/main/show_bio/1">John </a> </li>

<li> <a href="/main/show_bio/2">Joe</a> </li>

<li> <a href="/main/show_bio/3">Tom</a> </li>

<li> <a href="/main/show_bio/4">Larry</a> </li>

</ul>
</li>

</ul>

</div> <!-- eof #lvl2nav -->

Where is the javascript/DHTML triggering the pulldown of the menu?
Can you please from now on only post an url, not code?

Gérard