|
| |
|
|
paul rayner
Posts: 200
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
 |
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?
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
|
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
paul rayner
Posts: 200
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
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
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
caz
Posts: 3431
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.)
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
paul rayner
Posts: 200
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
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
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
paul rayner
Posts: 200
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
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
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
paul rayner
Posts: 200
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
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
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
