background colour to match nav bar text height

[piggeh]

I currently have a dropdown navigation bar thats text on a blue background. This only goes around halfway across and so I wanted to fill the remaining navigation bar space (on the right of the text) with the same colour background. ie (have done a different colour here to show area affected) as per the attachment.

 

It works at the default heights. However when I resize the text (ctrl + scrollwheel) it becomes slightly too small or large. On the attachment I've highlighted this with the red arrow. Is there a way to get this to conform to the same height as the nav bar text size?

 

Only solution I can currently think of is to size the background colour a pixel or two more than the menu text, as it then wouldnt show, but would rather not do it that way.

 

#navbar {
    margin: 0;
    padding: 0;
    height: 1em;
background-color: black;
}
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #5e8ce9;
    color: #fff;
    text-decoration: none; }
#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #69f;}

#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #69f;
    border-bottom: 1px solid #fff;
    color: #000; }
#navbar li li a:hover {
    background-color: yellow; }
#nav_container ul {
width: 782px;
height: 25px;
}

<script type="text/javascript">
sfHover = function() {
    var sfEls = document.getElementById("navbar").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<div id="nav_container">
<ul id="navbar">
<li><a href="./index.php">Home</a>
</li>
  <li><a href="./index.php?load=news.php">News</a><ul>
  <li><a href="./index.php?load=news_main.php">Subitem One</a></li></ul>
</li>
   <li><a href="./index.php?load=matches.php">Matches</a><ul>
  <li><a href="./index.php?load=previews.php">Previews</a></li>
    <li><a href="./index.php?load=reports.php">Reports</a></li></ul>
</li>
</ul>
</div>

 

 

Thanks for any help.

 

 

[attachment deleted by admin]

[JustLikeIcarus]

The bottom padding on the a elements are what is causing it.

[haku]

It looks like there is a 1px gap above the blue part, which is about the amount it's extending below the black bar. You probably have a top margin on one of your elements causing the blue parts to shift down. See if you can figure out where that is.

[JustLikeIcarus]

Take a look here http://css.maxdesign.com.au/listamatic/horizontal03.htm You notice that they dont float the list items themselves they use display:inline.  When you float an element even if its already inline sets it to a block level element.  Their CSS may fix your issues.

[piggeh]

I can't see any top margin on any of my elements. I've only got (so far) the top banner div and then the nav bar.The small amount of black above the nav menu is the border from the banner. I should have probably chosen a different colour to show where the bg color is but it doesnt overlap at the top.

 

Seems it doesn't affect IE though, only FF (havent tested on others yet), The increase/decrease in size in ie keeps the menu constrained to the height of the containing div (ie 25px) but FF increases the size of both and slightly disproportionately, it can start off slightly smaller then as size increases it grows larger than the menu.

 

@JustlikeIcarus - thanks for the reply, posted as I wrote this. Will take a look and see if it helps me solve it.

[JustLikeIcarus]

In regards to your borders.  IE handles borders differently than FF and basically everyone else for that matter.  IE is legendary for their flawed box model.  Im betting if you removed the border the problem would disappear.  To learn more about this google ie box model.

[piggeh]

Thanks for the help. Managed to sort it out and now displays properly by shifting formatting into the other element.