CSS navigation bar issue - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS navigation bar issue

CSS navigation bar changes when text re-sized

MarkAD

10:00 am on Sep 18, 2007 (gmt 0)

10+ Year Member

Hi,

I've built a CSS horizontal navigation bar which sits at the top level of a page. When the text is increased in Firefox the last link on the right drops down a level and the bottom border drops down. In I.E 7.0 all the text in the link boxes shift to the left making the navigation almost unreadable. A very irritating problem.

Here is the CSS anyway;

/* Navigation /*
/* -------------------------------------------*/

#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
}
#navsite li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 2px 0.5em;
margin-left: 2px;
border: 1px solid #BE9369;
border-bottom: none;
background: #FFFFFF;
text-decoration: none;
}
#navsite ul li a:link {
/*color: #BE9369;*/
}
#navsite ul li a:visited {
color: #000;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #e2ded2;
border-color: #bf9565;
}

Any ideas on where the root of this problems lies and how I could approach solving it

Any help appreciated, thanks.

tomda

10:12 am on Sep 18, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

A/ Force font-size to be the same -> disable text-resize by using "px" instead of "em"

OR

B/ Try to force <ul> (or #navsite) to have a fixed width

#navsite ul {
width:550px
padding: 3px 0;
margin-left: 0;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
}

Marshall

4:53 pm on Sep 18, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

You can also add:

#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
white-space: nowrap;
}

Though I am not sure how cross-browser friendly it is.

Marshall

MarkAD

10:16 am on Sep 27, 2007 (gmt 0)

10+ Year Member

I tried a few of those fixes but still no joy :(

Anyway, there is now a bigger issue with the navigation bar. When the site is viewed in Safari (and Opera) theres a huge gap at the end of the navigation bar, its as though it shrinks it. I've set the width of the bar to be fixed at 780px so I'm confused as to why this is happening?

Here is the code again;

/* Navigation /*
/* -------------------------------------------*/

#navsite ul {
width:780px;
padding: 3px 0;
margin-left: 0;
margin-bottom: none;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
}
#navsite li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 2px 0.5em;
margin-left: 2px;
border: 1px solid #BE9369;
border-bottom: none;
background: #FFFFFF;
text-decoration: none;
}
#navsite ul li a:link {
/*color: #BE9369;*/
}
#navsite ul li a:visited {
color: #000;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #e2ded2;
border-color: #bf9565;
}

Thanks again for any help.