I'm having a heck of a time getting my navbar to work. I think that what I need is a second set of eyes to help me get my CSS straight.

Anyways, I have a working navbar in Firefox which should look like this:

but unforunately in internet explorer I'm getting this:


Here is the HTML:

  <div id="container">
  <div id="banner"><a href="http://www.mysite.com" /></div>
  <div id="navcontainer">
    <ul id="navlist">
      <li><a href="/" id="navlist_current">Home</a></li> 
      <li><a href="/blog">Blog</a></li>
      <li><a href="/news">News</a></li> 
      <li><a href="/reviews">Reviews</a></li>
      <li><a href="/websolutions">Web Solutions</a></li>
      <li><a href="/contactus">Contact Us</a></li>
      <li>
      <div id="search">
        <form action="search.html" id="cse-search-box">
          <div>
            <input type="hidden" name="cx" value="0136059034576918921841:bted32mmqvm" />
            <input type="hidden" name="cof" value="FORID:10" />
            <input type="hidden" name="ie" value="UTF-8" />
            <input type="text" name="q" size="31" value="Search" onclick="this.value=''" />
            <input type="submit" name="sa" value="Go" />
          </div>
        </form>
      </div>
    </ul>
  </div>

and the CSS:

html, body {
    background-image: url(images/background.gif);
    background-repeat: repeat-x;
    background-color: #8c8c8c;
}

body,td,th {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: .8em;
    line-height: 1.3em;
    color: #333;
}

a:link {
    color: #006699;
    text-decoration: none;
}

a:visited {
    color: #006699;
    text-decoration: none;
}

a:active {
    color: #006699;
    text-decoration: none;
}

a:hover {
    color: #333;
    text-decoration: none;
}

#container {
    background-color:#FFFFFF;
    height: auto;
    width: 900px;
    border: 1px solid #333333;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
}

#banner {
    background-image: url(images/mysite_test_logo_no_border.gif);
    background-repeat: no-repeat;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #666;
    height: 104px;
}

#banner a {
    display: block;
    height: 100%;
    width: 100%;
    color: #666;
}

#banner a:visited {
    color: #666;
}

#navcontainer {
    border-bottom-width: 1px;                       
    border-bottom-style: solid;                       
    border-bottom-color: #666;                        
    background-color:#F5F5F5;                        
}

#navcontainer ul
{
    margin-left: 0;                                    
    padding-left: 10px;                                
    list-style-type: none;                            
    margin-top: 0px;                                
    padding-top: 10px;                                
}

#navlist li
{
    list-style: none;                                
    display: inline;                                
    padding-left: 0px;                               
}

#navlist a
{
    display: block;
    padding-bottom: 3px;
    width: 160px;
    background-color: #F5F5F5;
    display: inline;
    font-size: 1.05em;
    padding-left: 0px;
}

#navlist a:link, #navlist a:visited
{
    color: #333;
    text-decoration: none;
    display: inline;
    padding: 3px 6px 3px 6px;
}

#navlist a:hover
{
    background-color: #333;
    color: #fff;
    display: inline;
    padding: 3px 6px 3px 6px;
}

#navlist_current 
{
    border-style: solid;
    border-width: 0px 2px 0px 2px;
    padding: 3px 0px 3px 0px;
}

#footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    height:20px;   /* Height of the footer */
    background:#F5F5F5;
    left: 0px;
    border-top: 1px;
    border-top-style: solid;
    border-top-color: #666;
    font-size: .8em;
}

img {
    border: 1px solid #333;
}

.title {
    font-size: 16px;
    text-decoration: underline;
    padding-bottom: 3px;
}

#row1{
    height: 75%;
    overflow: hidden;
}

#row2 {
    height: auto;
    overflow: hidden;
}

#column1_1 {
    width: 400px;
    float: left;
    margin-top: 10px;
    margin-left: 25px;
}

#column1_2 {
    width: 400px;
    float: right;
    margin-top: 10px;
    margin-right: 25px;
}

#column2_1 {
    width: 250px;
    float: left;
    margin-left: 25px;
    font-size: .9em;
    text-align: justify;
}

#column2_2 {
    width: 250px;
    margin-right: 325px;
    margin-left: 325px;
    position: relative;
    font-size: .9em;
    text-align: justify;
}

#column2_3 {
    width: 250px;
    float: right;
    margin-right: 25px;
    font-size: .9em;
    text-align: justify;
}

#search {
    float: right;
    padding-right: 10px;
}

#cse-search-results {
    padding: 10px 10px 10px 10px;
}

p {
    font-size:.9em;
}

If someone could help me out and just offer some insight on where I may be going wrong, I'd greatly appreciate it.

Give your #navcontainer a height

Originally Posted by LadynRed

Give your #navcontainer a height

Thank you! That worked perfectly for the navigation bar text. However as soon as I did that, my search bar popped out (again only in ie).

Float the <li> items.
Clear the floats (on the ul)

There is extra height coming from the #search box.
You might try taking the search box OUT of the list instead.

Hmm, I did what you said with the following code:

#navcontainer ul
{
    margin-left: 0px;                                /* start navcontainer immediately at left container */
    padding-left: 0px;                                /* space from leftmost part of container */
    list-style-type: none;                            /* no bullets */
    margin-top: 0px;                                /* start navcontainer immediately at top of container under banner */
    padding-top: 10px;                                /* padding from top */
    clear: both;
}

#navlist li
{
    list-style: none;                                /* no bullets */
    display: inline;                                /* display horizontally */
    padding-left: 0px;                                /* space inbetween nav buttons */
    float: left;
}

#search {
    float: right;
    padding-right: 10px;
    margin-top: 0px;
    padding-top: 0px;
}

And it seems to work in ie6 & ie7 but now it's broken in safari and firefox. It shows on the left. Am I using the wrong clear?

Ahh, I hate Internet Explorer. For some reason internet explorer 8 shows up with what seems to be a whole other line of navcontainer.

Okay, I've pulled it out of the <li>, but I'm back to the problem here

Still having trouble with this. Does anyone have any ideas to solve the problem?

Let's have a URL or ALL of the code if you can.

I'm on a train at the moment, but the URL is www.criticalwire.com/test2. I'll post the code when I can.

I hate Internet Explorer. For some reason internet explorer 8 shows up with what seems to be a whole other line of navcontainer

Does this work for you?

#search{
position:absolute;
right: 10px;
}

BJBigler,

That worked! Thank you thank you thank you.

The only odd problem that I have now is the search form is a few pixels lower than the rest of the navigation links. What could be causing this?



And hmm, Internet Explorer 8 seems to have an empty bar right above the navbar =/ Any suggestions for that? I can't seem to figure it out.

Setting it to position absolute may or may not be the best approach. However, it you need to pull it up, now you can use the top:xxpx property to adjust where it sits vertically.

LadyNRed, my knowledge in css isn't all that great. What kind of problems could that cause. Is there a better approach?

Also, do you have any ideas as to why Internet explorer might be displaying a whole other row?

"position:absolute" is a relatively new way to position elements with respect to the right and bottom of a page, although the CSS specs have allowed it for a long time. As such, it breaks some older browsers, and also some small-screen devices like phones.

If you want another way of doing this, you might put the UL in its own DIV, floated left, and the search bar it its own DIV, floated right, something like this:

<div id="navcontainer">
<div class="floatLeftClass">...UL stuff...</div>
<div class="floatRightClass">...Search Bar class...</div>
</div>

"position:absolute" is a relatively new way to position elements

New?? Not even close - it's been around a long time!

with respect to the right and bottom of a page

Nope - with respect to ANY part of a page - top, bottom, left and right.

Okay, so I fixed the odd height of the search bar by using BJ's suggestion here:

If you want another way of doing this, you might put the UL in its own DIV, floated left, and the search bar it its own DIV, floated right, something like this:
<div id="navcontainer">
<div class="floatLeftClass">...UL stuff...</div>
<div class="floatRightClass">...Search Bar class...</div>
</div>

My final problem with this set of code is that in internet explorer 8 there is an entire empty bar above the navigation bar. Does anyone have any insight as to why it's doing this?

Just giving this thread a bit of a bump. I'm still having trouble with Internet Explorer 8, it's displaying a whole other row of my navbar, as shown above. Any ideas?