Hor Nav disappears in Firefox (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

paul rayner -> Hor Nav disappears in Firefox (2/25/2008 4:30:40)

Quite some time ago I created this for a friend, and now I realize it has compatibility issues -it works fine in IE but the top hor nav doesn't display in Firefox.

The site is DST
I've included the relevent (one's I thought were anyway) from the style sheet. 

#navMenu
{
	float: left;
	width: 579px;
	border:  1px solid #999;
	background-color: #aaa;
	margin: 3px 0px;
    width:579px;
  	margin-left:85px;
	margin-top:150px;    
}

#navMenu a, #navMenu a:visited
{
	float: left;
    background: #f3f3f3 0px 0px;
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    font:10px verdana;
    text-align: center;    
    color: #000;
    text-decoration: none;
    height: 15px;
    width: 96px;
	
}
#navMenu .footerNav a, #navMenu .footerNav a:visited
{
	width:96px;
}
#navMenu #navMenu:visited
{
	width: 96px;
}

#navMenu a:hover
{
    background: #2e8446  0px 15px;
}
#navMenu a.margin 
{
    margin-right: 2px;
}

#navMenu ul, #navMenu li
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	
}
#navMenu li { display: inline; }


Can anyone suggest a fix that will work in both IE and Firefox?



Tailslide -> RE: Hor Nav disappears in Firefox (2/25/2008 5:02:38)

You've got a lot of issues there I'm afraid and it's not just Firefox - it's everything apart from IE6 (just testing on my PC it's failing in Firefox, Opera and IE7 so probably all the mac browsers too).

Firstly - you need to correct your markup - you've got a ton of errors on the page which will make getting decent cross-browser compatibility almost impossible. Take it to the W3C validator and see how many you can fix.

For a start you've got more than one document head - one appears in the middle of the page markup! Secondly you're using the XML prolog which will put IE into Quirks mode - so remove this: <?xml version="1.0" encoding="UTF-8"?> It's not being used on the page anyway and so is just doing harm.

Then you've got two stylesheets - each with styles for the same area of the page in them which will make it really really hard to track down which one has the problem. If you absolutely must have more than one stylesheet then make sure that they're for completely different things (e.g. one for layout and one for styling) but personally I've always thought this was a bad idea!

Then you've got your top navigation in a div called navmenu but you're trying to reference that in the stylesheet with navMenu - that won't work - you need to use all lower case if you're going to go for XHTML of any sort.

Sort all that out and then see where you are - hopefully it will have at least reduced the problems.

Another thing you might want to look at is using SWF object to show the flash animation thing as currently in IE6 you get "Continue with the page" prompt flashing up before the page actually loads. Using SWFobject will get rid of this issue.



jaybee -> RE: Hor Nav disappears in Firefox (2/25/2008 5:27:58)

quote:

and now I realize it has compatibility issues


Ooooh yes, you can say that again. [;)]

Here's a hint for you. When developing, test with Firefox NOT IE. If it works in FF it's likely to work in everything else apart from IE. You then just fix any IE problems.



paul rayner -> RE: Hor Nav disappears in Firefox (2/29/2008 21:01:33)

I've endeavoured to fix most errors, and in doing so have been able to get the hor nav to appear in FireFox 2. (Only on the index page at this stage!!)

The hor nav bar in FireFox is now 0px from the #main div, but in IE 6 is way out of whack at the top of the page.

Ideally I'd like it about 200px from the top in both browsers. I didn't think that #navmenu was inside #main 
#navmenu
{
	float: left;
	width: 590px;
	border:  1px solid #999;
	background-color: #aaa;
	margin: 3px 0px;
    margin-left:185px;
	margin-top:0px;   
}


Your assistance would be appreciated.

Cheers



caz -> RE: Hor Nav disappears in Firefox (2/29/2008 22:03:32)

You still have a lot of errors in your html so work on correcting them before any thing else. ( I suspect that most of them are simple typos btw.)



paul rayner -> RE: Hor Nav disappears in Firefox (2/29/2008 23:01:19)

Thanks

When you say errors - I know I sometimes get "blinded" after looking over the code too long.

But this does now validate to the lower transitional standard, and the CSS validates too.

Can you give me an example of one error I've overlooked?

Cheers



Tailslide -> RE: Hor Nav disappears in Firefox (3/1/2008 2:21:41)

There are 9 errors currently: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ozdst.com%2F

Most seem to be either regarding your having a body and html tag in the middle of the document and also having multiple identical IDs (on your nav) which can cause havoc with browsers.

So get rid of the body/html tags in the middle of the page and then change the uberlink id to class in the markup and the CSS and you should be alright.



paul rayner -> RE: Hor Nav disappears in Firefox (3/1/2008 17:42:05)

Thanks Tailslide.

I was validating by file upload from WDG.

SO most of the major errors are fixed - still some tweaking needed. But I'd like to push the hor nav UP in FireFox - to about 200px from the top and;

DOWN in IE 6 - and across to 200px down, and about 185px from the browser edge.

Any suggestions?

Cheers



Tailslide -> RE: Hor Nav disappears in Firefox (3/2/2008 4:51:41)

You're not going to like me much... I'd re-jig it quite a bit to make life generally easier and to lessen the effect of cross-browser differences.

In no particular order:


Get rid of position absolute stuff
Stick everything in a container div to help control it all
zero the margins and padding on everything at the start of your stylesheet - then add back what you need
Correct that PHP call in your document head - you need a space between the "<?" and the next letter - it's not currently working properly.


Anyrate - didn't have a lot of time so I was just messing about a bit to give you a general idea and came up with this: TEST PAGE obviously it's not exactly the same and you'd need to add a ton of stuff back in. (I just used images for the applets as it was crashing my system) but it should give you a general idea. I removed the link to the stylesheet and stuck all the styles in the document head for ease of reference on the demo.



paul rayner -> RE: Hor Nav disappears in Firefox (3/2/2008 5:22:04)

Thanks Tailslide.

The fact that you have it working, it's gotta be better than it is now!!!

I really appreciate you taking the time at all - I'll start work on it tomorrow.

Thanks heaps



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125