I seem to have stumbled onto some Firefox-specific problem that is making me tear my hair out. As you can see in the screenshot, my site looks fine in Chrome (on the left) but in Firefox the header items are overlapping. It also looks fine in Safari and in IE8. Some of the pages use different skins, but the code for the header content is the same for all of them, so the same problem appears on every page. Once we get to the top of the next element on the page, everything lines up from there on down.

My skin.css file validates at level 2.1.

My FireFox Web Developer toolbar shows 5 errors; four of them are related to the menus, but shouldn’t be messing up the positioning. I think the last one is probably a DNN thing…

Expected declaration but found ‘url’. Skipped to next declaration. http://ktw.baessolutions.com/Portal...20Skin/CSS BarOnly/Css BarOnly.css Line: 15 Error in parsing value for ‘width’. Declaration dropped. http://ktw.baessolutions.com/Portal...Suckerfish" target="_blank" rel="nofollow">http://ktw.baessolutions.com/Portal...Suckerfish" target="_blank" rel="nofollow">http://ktw.baessolutions.com/Portal...Suckerfish Arrow hor grey/SuckerFish Arrow hor grey.css Line: 4 Unknown property ‘font-color’. Declaration dropped. http://ktw.baessolutions.com/Portal...Suckerfish" target="_blank" rel="nofollow">http://ktw.baessolutions.com/Portal...Suckerfish" target="_blank" rel="nofollow">http://ktw.baessolutions.com/Portal...Suckerfish Arrow hor grey/SuckerFish Arrow hor grey.css Line: 20 Error in parsing value for ‘width’. Declaration dropped. http://ktw.baessolutions.com/Portal...Suckerfish" target="_blank" rel="nofollow">http://ktw.baessolutions.com/Portal...Suckerfish" target="_blank" rel="nofollow">http://ktw.baessolutions.com/Portal...Suckerfish Arrow hor grey/SuckerFish Arrow hor grey.css Line: 83 Unknown property ‘behavior’. Declaration dropped. http://ktw.baessolutions.com/default.aspx Line:514 (line 514 reads: img { behavior: url(iepngfix.htc) })

If I view source for the page, save the file and run it through the w3C validator in XHTML transitional, I get two errors:
Line 513, Column 23: document type does not allow element "style" here The line falls within a block of code relating to one of the modules on my page (The pageflip in the upper right corner)

Line 577, Column 7: end tag for "div" omitted, but OMITTAG NO was specified Not sure what it is, but I don’t think it has anything to do with my menu problem, seems to be a jscript call of some sort

In my skin package is a portal.doctype.xml file, which declares XHTML 1.0 Transitional

Attached are: screenshot.jpg, showing the problem
Portal.ascx (named portal.txt as my attachment)
skin.css (named skin.txt as my attachment; note there's lots of extra commented-out code in this one because I haven't cleaned it up yet)

I would be delighted with any help I can get on this one, I’ve run out of ideas… Thanks, Liz

Would it be possible to provide a way to view the site without logging in?  I don't have the 360 menu, so I can't quite test your skin.

my development server is remote, and I need to keep the site password protected until it is approved to go live. I can provide you with login and password, but would prefer not to post them to the forum, is it possible for you email me directly?

thank you thank you thank you!

Liz

Joe and I finished this conversation via email, but I thought I would post the outcome in case it helps someone else.

Joe said "A major part of the problem is these styles:
#logo { float: left; }
#right_header_items { float: right; }

If you remove the floats, it will look better in FF.
Where did you intend to close the div with id headercontent? Is it possible that is misplaced?"

Yes, there was a missing div tag (I fixed it), but I didn't want to get rid of the float as my other choice was to use some absolute positioning that I knew had cross-browser issues, as I had tried it in v.1 of my skin.

But I was able to solve the problem by wrapping the main menu and breadcrumbs in another div and clearing the float in that div. I'm not sure why clearing the float in mainmenu didn't work, but I have my fix so I am happy!

you can use some Hack Css for firefox

The problem was some bad HTML which, when fixed, fixed the problem.