Please help make this layout look the same in FF & IE

[mrchaos]

Working Link: http://www.forsythe.on.ca/working/index.htm

I cant seem to get the alignment to of the navigation links (Home, Services, About Us) to look the same in IE and FF. IE seems to be displaying it correctly however FF overlaps it into the search bar. I want the navigation links to be stacked on the border just above the banner picture but in the current state it will require different padding numbers for IE and FF.

I'm sure there is something small that I am missing and I hope someone else can find it quick.

The I found the code for the menus on another site (it was free) so I still need to change some naming conventions, colours, etc. but would like to get it working first.

[ray326]

I'm not seeing any difference between IE6 and Fx2.

[KDLA]

Looks the same to me, too.
mrchaos - you might clean out the browsers' caches and take another look.

KDLA

[smyhre]

not seeing any difference either.

[Centauri]

There may not be much difference at the moment, but mrchaos wanted the navbar at the bottom of the header, and that is where differences occur.

Firstly, IE is showing the header slightly too high, due to a gap below the logo image - setting this to block display solves that :

#upperlogo img {display: block;}

The easiest way to position the navbar is to position it absolute referenced to its container. First the wrapper needs a relative position to provide the reference, and the nav can be positioned absolutely in the bottom right corner :

#upperrightwrapper {
   float: left;
   width: 616px; /*636*/
   height: 110px;
   padding: 10px 20px 0px 0px;
   color: #996600 !important;
   text-align: right;
   position: relative;
}

#dolphinnav {
   position: absolute;
   right: 0;
   bottom: 0;
   height: 33px;
   width: 400px;
   text-transform: uppercase;
   font-weight: bold;
   background: #ffffff url(../content/images/dolphin_bg.gif) repeat-x bottom left;
   padding: 0 0 0 20px;
}