5 replies [Last post]
Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 9 years 46 weeks ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

Hi all! Long time no...err...post! Anyway...

I have made a quite nice looking, i think, navigation bar. However, ie and mozilla differ slightly in there layout (what a surprise)! Not the best ever constructed navigation menu, but it is how i would like it to look in ie! Here is the css: http://www.uea.ac.uk/~gs676/default.css! And here is how it differs in ie and mozilla : http://www.uea.ac.uk/~gs676/problems.html!

(test page http://www.uea.ac.uk/~gs676/index.html)
Anybody have a solution?

Thanks in advance,

Guy

p.s. general comments welcome, plus i haven't tested this for a mac user yet.

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly

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

2 pixels out on my navigation bar!

Hi there guy,
the 5px bottom margin on the #nav ul is causing the problem, can you not remove it and put it on the #middle p if needed ?
Not sure how removing it will effect IE but you could always feed the rule back to IE with a star selector.

Hope that's of some help,

Hugo.

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

Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 9 years 46 weeks ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

2 pixels out on my navigation bar!

sorry, perhaps i didn't explain very well! I was referring to the gap (2px) between the bottom of the #nav ul border and the bottom of the #nav li section (which highlights when hovered)! They should both line up! Sorry about that, its a hell of a job explaining! The 5px gap between the bottom of the border and the middle section is intentional, and i am aware that the gap is different in ie and mozilla, will fix that when i have this all fixed!

Cheers,

Guy

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly

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

2 pixels out on my navigation bar!

That is, what I was refering to; removing the 5px brings it into line when you hover (the ul is unbalanced) if you need the spacing I was suggesting moving it to another element.

Hugo.

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

Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 9 years 46 weeks ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

2 pixels out on my navigation bar!

I still cannot get this to work! Even when removing the 5px bottom margin from the ul!

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

2 pixels out on my navigation bar!

I can't help but but believe this is related to line-height and vertical-align, but can't quite get a handle on it. So what I did was add 2px bottom padding to <a>, while hiding it from IE. This fixed it for the Moz/Gecko family and for IE, but Opera7 is half modern and half IE wannabe—so phhhht!

 
#nav { 
    font-size: 10pt; 
    font-family: Lucida Console; 
    } 
 
#nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    border-bottom: 4px #999 solid; 
    } 
 
#nav li { 
    display: inline; 
    margin-left: 20px; 
    } 
 
#nav li a,  
#nav a:link,  
#nav a:visited { 
    color: #666; 
    text-decoration: none; 
    } 
 
html>body li a { 
    padding-bottom: 2px; 
    } 
 
#nav a:hover { 
    border-bottom: 4px solid #039; 
    background-color: #ddd; 
    color: #039; 
    } 
 
a#current,  
a#current:link 
a#current:hover { 
    cursor: default; 
    background-color: #ddd; 
    color: #444; 
    border-bottom: 4px #999 solid; 
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.