2 replies [Last post]
mistr_e
Offline
newbie
Last seen: 18 years 20 weeks ago
Joined: 2004-07-22
Posts: 2
Points: 0

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;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mistr_e
Offline
newbie
Last seen: 18 years 20 weeks ago
Joined: 2004-07-22
Posts: 2
Points: 0

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.