This is one of the weirdest problems I've ever seen and will be genuinely grateful if any one can point me in the right direction.
I've created a drop-down menu bar using the Son of Suckerfish technique. When I am viewing the test page locally (eg. looking at the page from my hard drive) the drop-downs work just swimmingly. When I upload the test page and css though, it doesn't work.
After uploading the page it works in Mozilla (ie. the menus drop down, they look like crap, but I'll have to fix that later). But in IE6 absolutely nothing happens, even though I was just testing, and still testing it from the hard drive.
I have never had part of a file stop working just because it was uploaded to the web. To clarify, the css file does work, the whole page is styled except there are no drop-downs in IE6.
The test page is at http://www.chrisbroughton.com/dg/text.html
Here is what I think is the relevant CSS code is:
body { background: #AAAAAA; margin: 0px; padding: 0px; text-align: center; } #page { background: #9d9d9d; width: 94%; border: 1px solid #676767; font-family: Verdana, Arial, Helvetica, sans-serif; } #header { background: no-repeat; height: 154px; } #header h1 { display: none; } #rndheader { background: no-repeat; height: 154px; } #rndheader h1 { display: none; } #navcontainer { background: #666666 url("../images/menubg.jpg") no-repeat; height: 28px; } #nav { padding-left: 0px; margin-left: 0px; } #nav a { margin-top: 3px; padding-left: 20px; font-size: 20px; display: block; } #nav li ul li a { text-decoration: none; color: #C1261D; padding-left: 8px; } #nav li { float: left; height: 28px; list-style: none; } #nav li ul li { float: left; clear: left; height: 0px; margin: 5px 20px 5px 0px; padding: 0px; } #nav ul { background: #999999; border-style: solid; border-color: #666666; border-left-color: #C1261D; border-width: 0px 1px 1px 7px; top: 183px; font-size: .8em; font-style: italic; font-weight: bold; text-decoration: none; margin-left: 15px; display: block; } #nav ul a { font-size: 1em; } #nav li ul { position: absolute; left: -999em; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #navcontainer #about { background: url(../images/mnu_about.gif) no-repeat; } #navcontainer #services { background: url(../images/mnu_services.gif) no-repeat; } #navcontainer #gallery { background: url(../images/mnu_gallery.gif) no-repeat; } #navcontainer #careers { background: url(../images/mnu_careers.gif) no-repeat; } #navcontainer #safety { background: url(../images/mnu_safety.gif) no-repeat; } #navcontainer #links { background: url(../images/mnu_links.gif) no-repeat; } #navcontainer #contact { background: url(../images/mnu_contact.gif) no-repeat; } #navcontainer a em{ visibility: hidden; }
A bizarre navbar that displays locally but not on the web
Hi there,
Without looking much I would suggest taking out the <?xml version> line (it's in the wrong position anyway, should be the very first line) because it throws IE6 into quirks mode not standards and is not strictly needed, I don't know if this is the problem as it doesn't explain the local/server difference or does it?
Not sure if this has helped but I'm sure one of the others will help
Hugo.
N.B Just seen that the class submenu is contained in single quotes not double! and some others, you may want to check your html and perhaps validate.
A bizarre navbar that displays locally but not on the web
Thanks for the reply Hugo. I tried your suggestions and both the xhtml and css validate perfectly (except the cursor:hand for IE5). I still get the exact same results though. I can even download the .html and .css from the web onto my computer and it works just fine.
It's truly strange.