Horizontal navigation using CSS

I'm using <ul> and CSS to create a horizontal navigation menu. My aim is to
keep the entire line of links on one line regardless of the browser window
size. In IE6 this is no problem, in Mozilla, the last link wraps onto the next
line under the first. How can I stop this from happening? (I haven't got a
Netscape browser to view it in so I'd appreciate it if anyone could let me know
how it renders there.)
Another issue is that one of the links is quite long: "Vision & Mission". When
the window width is reduced, the link wraps onto another line, creating a box
with a border which no longer fits the nice clean line of the original menu. As
a temporary fix I've simply contracted the letter-spacing so it views ok in,
say, a 800x600 res using IE browser. But play around with the width and you'll
see what I mean. Ideas for a fix?
The site is almost finished so I'd appreciate comments including how I managed
with the code (html/CSS virgin - a HUGE thanks to Murray for pointing me to
W3School to learn how!!)

http://www.haden-investments.com

You'll have to click through to find the bits I'm referring to.

and the CSS looks like this:

/* CSS Document */

body {
margin-left: 20px;
font-family: arial,verdana,courier;
padding-right: 2%;
padding-bottom: 70px;
color: #999999;
}

a:link, a:active {color: #F88E20}
a:visited {color: #666666}
a:hover {color: #A0CDEE}

#logo {
padding-top: 10px;
padding-bottom: 60px;
}

#heading {
text-align: center;
padding-left: 250px;
padding-right: 5%;
}

h1, h2, h3 {
color: #666666;
font-weight: 400;
}

p {
color: #999999;
}

#content {

}

#sideimage {
float: left;
padding-right: 30px;
padding-bottom: 30px;
}

#movie {
position: absolute;
top: 25px;
right: 5%;
}

#navigation ul {
position: absolute;
top: 130px;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}

#navigation a {
float: left;
width: 14%;
text-decoration: none;
text-align: center;
color: #A0CDEE;
background-color: white;
padding: 0.2em 0.2em;
border: 1px solid #A0CDEE;
}

#navigation a:hover {
background-color: #F88E20;
}

#navigation li {
display: inline;
}

#landingmovie {
padding-top: 50px;
}

Remove the width (17%) from your navigation a rule. Control the boxes
using padding instead.

ReedyRA wrote:

I'm using <ul> and CSS to create a horizontal navigation menu. My aim is to
keep the entire line of links on one line regardless of the browser window
size. In IE6 this is no problem, in Mozilla, the last link wraps onto the next
line under the first. How can I stop this from happening? (I haven't got a
Netscape browser to view it in so I'd appreciate it if anyone could let me know
how it renders there.)
Another issue is that one of the links is quite long: "Vision & Mission". When
the window width is reduced, the link wraps onto another line, creating a box
with a border which no longer fits the nice clean line of the original menu. As
a temporary fix I've simply contracted the letter-spacing so it views ok in,
say, a 800x600 res using IE browser. But play around with the width and you'll
see what I mean. Ideas for a fix?
The site is almost finished so I'd appreciate comments including how I managed
with the code (html/CSS virgin - a HUGE thanks to Murray for pointing me to
W3School to learn how!!)

http://www.haden-investments.com

You'll have to click through to find the bits I'm referring to.

and the CSS looks like this:

/* CSS Document */

body {
margin-left: 20px;
font-family: arial,verdana,courier;
padding-right: 2%;
padding-bottom: 70px;
color: #999999;
}

a:link, a:active {color: #F88E20}
a:visited {color: #666666}
a:hover {color: #A0CDEE}

#logo {
padding-top: 10px;
padding-bottom: 60px;
}

#heading {
text-align: center;
padding-left: 250px;
padding-right: 5%;
}

h1, h2, h3 {
color: #666666;
font-weight: 400;
}

p {
color: #999999;
}

#content {

}

#sideimage {
float: left;
padding-right: 30px;
padding-bottom: 30px;
}

#movie {
position: absolute;
top: 25px;
right: 5%;
}

#navigation ul {
position: absolute;
top: 130px;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}

#navigation a {
float: left;
width: 14%;
text-decoration: none;
text-align: center;
color: #A0CDEE;
background-color: white;
padding: 0.2em 0.2em;
border: 1px solid #A0CDEE;
}

#navigation a:hover {
background-color: #F88E20;
}

#navigation li {
display: inline;
}

#landingmovie {
padding-top: 50px;
}

--
kim
--------------------------
http://mouseriders.dk

You can also remove the position:absolute from your nav ul rule.

ReedyRA wrote:

I'm using <ul> and CSS to create a horizontal navigation menu. My aim is to
keep the entire line of links on one line regardless of the browser window
size. In IE6 this is no problem, in Mozilla, the last link wraps onto the next
line under the first. How can I stop this from happening? (I haven't got a
Netscape browser to view it in so I'd appreciate it if anyone could let me know
how it renders there.)
Another issue is that one of the links is quite long: "Vision & Mission". When
the window width is reduced, the link wraps onto another line, creating a box
with a border which no longer fits the nice clean line of the original menu. As
a temporary fix I've simply contracted the letter-spacing so it views ok in,
say, a 800x600 res using IE browser. But play around with the width and you'll
see what I mean. Ideas for a fix?
The site is almost finished so I'd appreciate comments including how I managed
with the code (html/CSS virgin - a HUGE thanks to Murray for pointing me to
W3School to learn how!!)

http://www.haden-investments.com

You'll have to click through to find the bits I'm referring to.

and the CSS looks like this:

/* CSS Document */

body {
margin-left: 20px;
font-family: arial,verdana,courier;
padding-right: 2%;
padding-bottom: 70px;
color: #999999;
}

a:link, a:active {color: #F88E20}
a:visited {color: #666666}
a:hover {color: #A0CDEE}

#logo {
padding-top: 10px;
padding-bottom: 60px;
}

#heading {
text-align: center;
padding-left: 250px;
padding-right: 5%;
}

h1, h2, h3 {
color: #666666;
font-weight: 400;
}

p {
color: #999999;
}

#content {

}

#sideimage {
float: left;
padding-right: 30px;
padding-bottom: 30px;
}

#movie {
position: absolute;
top: 25px;
right: 5%;
}

#navigation ul {
position: absolute;
top: 130px;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}

#navigation a {
float: left;
width: 14%;
text-decoration: none;
text-align: center;
color: #A0CDEE;
background-color: white;
padding: 0.2em 0.2em;
border: 1px solid #A0CDEE;
}

#navigation a:hover {
background-color: #F88E20;
}

#navigation li {
display: inline;
}

#landingmovie {
padding-top: 50px;
}

--
kim
--------------------------
http://mouseriders.dk

I'm sorry... on your navigation a:hover add color:#FFF; which will make
the links easier to read on hover.

ReedyRA wrote:

I'm using <ul> and CSS to create a horizontal navigation menu. My aim is to
keep the entire line of links on one line regardless of the browser window
size. In IE6 this is no problem, in Mozilla, the last link wraps onto the next
line under the first. How can I stop this from happening? (I haven't got a
Netscape browser to view it in so I'd appreciate it if anyone could let me know
how it renders there.)
Another issue is that one of the links is quite long: "Vision & Mission". When
the window width is reduced, the link wraps onto another line, creating a box
with a border which no longer fits the nice clean line of the original menu. As
a temporary fix I've simply contracted the letter-spacing so it views ok in,
say, a 800x600 res using IE browser. But play around with the width and you'll
see what I mean. Ideas for a fix?
The site is almost finished so I'd appreciate comments including how I managed
with the code (html/CSS virgin - a HUGE thanks to Murray for pointing me to
W3School to learn how!!)

http://www.haden-investments.com

You'll have to click through to find the bits I'm referring to.

and the CSS looks like this:

/* CSS Document */

body {
margin-left: 20px;
font-family: arial,verdana,courier;
padding-right: 2%;
padding-bottom: 70px;
color: #999999;
}

a:link, a:active {color: #F88E20}
a:visited {color: #666666}
a:hover {color: #A0CDEE}

#logo {
padding-top: 10px;
padding-bottom: 60px;
}

#heading {
text-align: center;
padding-left: 250px;
padding-right: 5%;
}

h1, h2, h3 {
color: #666666;
font-weight: 400;
}

p {
color: #999999;
}

#content {

}

#sideimage {
float: left;
padding-right: 30px;
padding-bottom: 30px;
}

#movie {
position: absolute;
top: 25px;
right: 5%;
}

#navigation ul {
position: absolute;
top: 130px;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}

#navigation a {
float: left;
width: 14%;
text-decoration: none;
text-align: center;
color: #A0CDEE;
background-color: white;
padding: 0.2em 0.2em;
border: 1px solid #A0CDEE;
}

#navigation a:hover {
background-color: #F88E20;
}

#navigation li {
display: inline;
}

#landingmovie {
padding-top: 50px;
}

--
kim
--------------------------
http://mouseriders.dk