CSS/Javascript:1 || Me:0

January 10, 2006 2:20 PM

CSS and javascript: I thought I had them beat, then I had to go and test my site in IE

This menu is supposed to have a drop down menu under each of the main buttons. It is supposed to appear when you mouseover the buttons. It does this everywhere but in IE, both mac and windows. Please help me!

posted by renderthis to Computers & Internet (8 answers total)

It's because you've thrown those div's everywhere. The LI have to be children of the UL. Also, the UL has to have the id of "nav", not its surrounding DIV.
posted by sbutler at 2:35 PM on January 10, 2006

Holy cow I can't see a darned thing (all white in Firefox).

There are a bunch of things wrong with your CSS and HTML. First off, there's absolutely no reason why you should need a single DIV or H3 tag for any of that. None. If you want your LI's to have a H3 "look" to them, apply the Heading 3 styles to the LI in CSS. Also, if you want the sub-LI's to have the "linkbox" style, make it a sub LI style, not a DIV. Finally, ID's are assigned to a single element. You can't assign multiple ID's to different elements (that's what classes are for). In other words:

css:

LI {
   font-family: sans-serif;
   font-size: 1.2em;
   margin: 2px; padding: 0;
}
LI.linkbox {
   whatever style;
}

html:

<ul>
   <li>Heading
   <ul>
      <li class="linkbox">Sub-heading 1</li>
      <li class="linkbox">Sub-heading 2</li>
   </ul>
   </li>
</ul>


That probably won't solve all your problems, but it should get you going in the right direction.
posted by Civil_Disobedient at 4:01 PM on January 10, 2006

You don't even really need the separate "linkbox" class, by the way. You can accomplish the same thing by doing the following:

LI {
   font-family: sans-serif;
   font-size: 1.2em;
   margin: 2px; padding: 0;
}
LI UL LI {
   whatever style;
}


In which case your HTML would be even simpler:

<ul>
   <li>Heading
   <ul>
      <li>Sub-heading 1</li>
      <li>Sub-heading 2</li>
   </ul>
   </li>
</ul>

posted by Civil_Disobedient at 4:05 PM on January 10, 2006

Page is all white in Safari, too.
posted by Thorzdad at 4:14 PM on January 10, 2006

Three little words: Validate. Your. Code.

Your HTML and your CSS both have serious problems. For instance, your CSS is calling a file that doesn't exist, and your HTML has the same ID multiple times, when IDs must be unique.

Which ones are causing your particular issue? Doesn't matter, you should fix them all.

Validate your code. If you don't know what that means, find out.

If you know what it means but you don't understand the errors and warnings you get, find out.

If you're doing web development and not validating your code you might as well be pounding on the keyboard and just hoping for the best.
posted by AmbroseChapel at 5:29 PM on January 10, 2006

Response by poster: thanks everyone, yeah I am pretty new at this side of things. I've basically been doing stuff that worked on my screen.
posted by renderthis at 5:45 PM on January 10, 2006

Just use one of the many CSS/JS drop-down menu scripts that are freely available and already cross-browser compatible...

I have used Tigra Menu...
posted by nielm at 7:01 AM on January 11, 2006

... in the past for a few projects (Ack -- sorry for the split post)
posted by nielm at 7:02 AM on January 11, 2006