I am having a problem with a disjoint rollover navbar that I created with CSS. Oddly, the navbar works fine when I run the website locally, but when I upload it to my server and run it from there the problem occurs.

The content of the last button in the navbar that is within the div that is visible on mouseover, but hidden on mouseout, is always visible below the button. This is not even the position where the content should display. Also odd, is the fact that the problem occurs with Firefox, but not with IE. I haven't tested with any other browsers.

The website, which is incomplete, is currently located at

http://pending.bigdwebspinner.com/blessings-art

The styles that the define the rollover are:

#homenav a .contentroll {
width: 340px;
height: 270px;
position: absolute;
top: 165px;
left: 200px;
visibility: hidden;}

#homenav a:hover .contentroll {
visibility: visible;
text-decoration: none;
padding: 5px;}


If I click on the "go" button, to the right of the address bar, several times, the navbar will display correctly. Subsequent clicks on "go" will cause it to display incorrectly again. Clicking "reload" does nothing to fix the problem.

Any suggestion on how to fix this problem? Is this a bug in Firefox? I was under the assumption that Firefox was CSS compliant.

Could this be a hosting server problem? The hosting server is Godaddy. I assume they have adequate hardware. Could it be a server OS issue? The website is on a linux server.

Any help would be greatly appreciated.

It's very weird and it always seems not to work when you first load the page and then always works after I refresh the page.

I'm not sure if this is the problem, but I did notice on that one link you close everything with <a></div></dt> inside of <div></a><dt>

I think IE will be a little more lax and let you get away with the improper nesting while Firefox will hold you to nesting things correctly. I wasn't able to confirm that as the solution, but after looking for awhile it's the only thing I can see different and it would make sense that IE would let you get away with that where Firefox won't.

I hope that's it.

vangogh,

Thanks for the reply. I checked out what you had suggested, but I couldn't find the improper nesting isssue that you mentioned. When I created the buttons, I created one, tested it and then just copied and pasted to create the rest. All the buttons have the same html (only IDs and content are unique). The buttons were also created by copy, paste, change text colors rotation dimensions etc, so they are essentially the same image.

One thing that I did, after I noticed the problem, is I created a dummy button at the end of the DL. My thought was that since only the last button seemed to be the problem, maybe adding a dummy button would solve the problem for the last "real" button. This did not work. The dummy button is still in the code, but it also has the same nesting as the rest of the buttons.

I also thought to check to see if the issue was network specific. As I mentioned in my first post, the problem does not occur when I run the website locally (another reason why the problem is probably not anywhere in the css or html). I ran the website from another computer on my LAN, but it ran fine. The problem is obviously not a network issue per se.

Any thought on the server being the problem?

BTW, in case it helps, here is the path to the css file.

http://pending.bigdwebspinner.com/bl...s-art/main.css

Thanks

Daniel

Ok.. major problem there. You cannot have a <div> or block-level element inside a definition list like that. IE's loosey-goosey rendering allows you to get away with it, Firefox and Opera do not. The validator complains and explains:

Error Line 18 column 28: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. <div class="contentroll"><img class="topleft" src="Images/content/lyn_intro. The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

You might want to read this article by Eric Meyer and see if that solution will work for you - and there is no javascript required.
http://meyerweb.com/eric/css/edge/popups/demo.html

Hey Red,

Thanks for the help. I changed the divs to spans and this solved the problem, but created a new (not as significant) one. Now IE displays a small black mark at the inferior right corner of the button images. Any idea what is causing this?

You may notice that on mouseover the mark disappears. This is because the background color, which is assigned to the anchor on mouseover, apparently covers the mark. I tried adding a rule to assign the same background to the anchor on mouseout, but then the rollover didn't work in IE (the rollover also doesn't work in IE without the background color assigned to the anchor). Love this css.

Thanks again for the help.

BTW, this is only the second website that I have designed using only css for presentation. The first was my own website, but it didn't seem to be as much of a pain to tweak as this one has been. Between the homepage and the lower level pages layout (only two layouts), it has taken me over ten hours of work just to get the layouts down. Is this css web design experience the exception or the rule? Or, maybe with experience I'll have fewer problems!!!

Daniel

It takes some time to learn CSS and to learn how to deal with the cross-browser issues. Once you've got those down, then it certainly does get easier and faster.

That 'dot' isn't actually a dot, it's a remnant of the underline from the link.
I put this in the CSS and it went away:

a{
text-decoration: none;
}

Red,

That did it!!!

Thanks so much for your help.

Daniel

You're most welcome