Help me please!

Navigation bar will not go in a single straight line.

[dancedevils]

I am making a navigation bar and I am trying to get the whole of it to line up in a straight line like the top bar on the page. I would put the source code here but it is a bit long. The page is located at:

<snip>

and the css file is at:
<snip>

please let me know if there is any way I can get it to line up!

[edited by: Woz at 1:28 pm (utc) on Aug. 4, 2003]
[edit reason] No URLs please, see TOS#13 [/edit]

[joolsm]

It's against the TOC to post urls to this forum.

Put snippets of your html code and cssin your post for people to look at your problem.

Have you purposely included the header, bar, title, nav and bar2 divs in the body div? If not - this may solve your order problem. On IE6 with Win 98se, both bars go right across the page in a straight line.

Jools

[dancedevils]

I know it is against the t&c to put in URL's. It is the second time I have read that now but I posted that message before I read that elsewhere. This is from the body of my XHTML 1 Strict Document:

<div id="nav">
<div id="bar2">
<p class="l"><span>¦</span></p>
Navigation
<p class="r"><span>¦</span></p>

<p class="link"><a href="http://example.com/folder/">My Page</a></p>
</div>
</div>

and this is the CSS for this:

p.l {
background: transparent url('images/b_left.gif') no-repeat top;
width: 7px;
height: 15px;
float: left;
margin: 0px;
}

p.r {
background: transparent url('images/b_right.gif') no-repeat right top;
color: black;
width: 7px;
height: 15px;
margin: 0px;
padding: 0px;
float: right;
}

span {
display: none;
}

#nav {
position: absolute;
top: 69px;
height: 15px;
width: 100%;
padding: 0px;
margin: 0px;
}

#bar2 {
background: transparent url('images/barheader_bg.gif') repeat-x top;
color: #AAAAAA;
font-size: 11px;
width: 100%;
height: 15px;
font-weight: bold;
margin: 0px;
padding: 0px;
}

#bar2 p.link {
background: transparent url('images/b_yellow2.gif') no-repeat right top;
color: #444444;
width: 146px;
height: 15px;
padding: 0px;
margin: 0px;
float: right;
text-align: right;
}

#bar2 p.link a {
background: transparent;
color: #444444;
text-transform: lowercase;
text-align: right;
float: right;
}

#bar2 p.link a:hover {
background: transparent;
color: #444444;
}

[edited by: Woz at 11:41 pm (utc) on Aug. 4, 2003]
[edit reason] examplified code [/edit]