/    Sign up×
Community /Pin to ProfileBookmark

Navigation bar alignment

Hey all – I’m sure this is a really stupid question but I’ve got to ask it as it’s driving me mad…

I’m trying to make my navigation tabs all fit within my container div and, in Safari, this works fine. However, in FF, no matter what I do, I can’t seem to get the thing to stay put… any ideas?!

Firefox: [URL=”http://www.roundthebend.org/temp/images/firefox.png”]http://www.roundthebend.org/temp/images/firefox.png[/URL]

Safari: [URL=”http://www.roundthebend.org/temp/images/safari.png”]http://www.roundthebend.org/temp/images/safari.png[/URL]

[CODE]* {margin: 0; padding: 0; border: 0;}

body {
background: url(images/background.gif) left top repeat;
}

#container {
background: #FFFFFF;
width: 700px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
margin: 0 auto;
}

#header {
height: 228px;
background: url(images/header.png) no-repeat;
}

#footer {
background: url(images/footerbg.png) no-repeat;
border-top: 1px solid #000000;
height: 27px;
font-family: “Tahoma”; font-size: 0.7em; line-height: 230%;
padding-left: 20px;
clear: both;
}

img.sticker {
margin-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
}

#content {
width: 655px;
float: left;
margin-top: 15px;
padding-left: 20px;
padding-bottom: 20px;
text-align: justify;
}

h1 {font-family: “Tahoma”; font-size: 1.37em; font-weight: bold;}

h2 {font-family: “Tahoma”; font-size: 1em; font-weight: bold;}

p {font-family: “Tahoma”; font-size: 0.7em; line-height: 150%;}

a:link {font-weight: bold; text-decoration: none; color: #000000;}

a:hover {font-weight: bold; text-decoration: underline; color: #607333;}

#navigation ul
{
clear: both;
list-style: none;
padding: 0;
margin: 0;
}

#navigation li
{
float: left;
margin: 0 0.10em;
}

#navigation li a
{
background: url(images/navbg.png) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-family: “Times”, sans-serif; font-weight: normal;
}

/* Hide from IE5-Mac */
#navigation li a
{
float: none
}
/* End hide */

#navigation
{
width:45em
}

#navigation li a:hover
{
background: url(images/navbg.png) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #000000;
color: #000000;
text-decoration: underline;
text-align: center;
font-family: “Times”, sans-serif; font-weight: normal;
}[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@CentauriOct 28.2007 — Problem here is that you are specifying the width of the menu and its components in ems, which may or may not equal the with of the page in px depending on the way the browser displays its fonts. It will also change depending on the browser's default font size, and the user selected font size.

Either set the page width in ems (which presents problems with fixed-width background images), or set the menu widths in px or %.
Copy linkTweet thisAlerts:
@twiggystardustauthorNov 05.2007 — Thank you Centauri! ?
×

Success!

Help @twiggystardust spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...