Browser compliant rounded-corner navbar with CSS

Question

Hey guys,

I'm working on a browser-compatible navbar with rounded corners using DIVs and rounded images. I had it working perfectly in FireFox, only to discover that IE butchers it (of course).

The only problem I'm having now is getting my content DIV (navBody) to stretch to match the height of the side images. In both browsers now I have this:

[screenshot of the problem] http://img80.imageshack.us/img80/5088/40128898.jpg

<div class="navWrapper">
 <div class="navLeft"></div>
 <div class="navBody">
  <a href="/members">Login/Register</a>
 </div>
 <div class="navRight"></div>
</div>

.navRight
{
 float: left;
 width: 12px; 
 height: 25px; 
 background: url('/images/nav/tabright_off.png');
}

.navLeft
{
 float: left;
 width: 12px; 
 height: 25px; 
 margin-left: 3px;
 background: url('/images/nav/tableft_off.png');
}

.navBody
{
 float: left;
 background: #DDDDEE;
 white-space: nowrap;
 font: bold 12px Verdana, sans-serif;
 padding-top: 5px;
 overflow: hidden;
}

.navWrapper
{
 float: left; 
 height: 25px;
 display: inline;
}

I tried adding 5px padding-bottom to navBody, but this only works on FF and not IE due to box model issues. Setting navBody to a fixed height (tabs should be 20px high) seems to do nothing. Any ideas?

Answer 1

Try adding a

<br style="clear:both" />

To the bottom of the navBody div and see if that helps things.

Answer 2

Not sure why adding a height of 20px in the CSS isn't working (on navBody), that would be my first guess. You could instead try making it height: 25px (to match the sides) but then change the line-height to push your text down (instead of the padding-top).

Another option (that would change the actual design of your nav) would be to set a width on all the nav items. Rendering engines in general prefer to have width set on any floated elements.

Answer 3

Found the issue - FireFox was adding the padding-top (5px) to the 20px height I set to get a total of 25px; IE was not so the height stayed at 20px. Fixed it by making the height 25px by default and compensating in Firefox by cropping out the overflow in the wrapper div.