[SOLVED] Menu change in IE
 

I am trying to move my menu bar to the right of the header, and i have done this by adding padding-left to the ul.rMenu-hor

This work well in Firefox and Chrome.
However in IE the two tabs on the furthest right do a word wrap thing - and I can't figure out why this occurs at a padding increase of 217px or higher.

www.esa.org/fed

CSS Inserts on the page:
/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px;}
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px;}
ul.rMenu-hor { padding-left: 325px; }
ul.rMenu-ver li { margin-top: 0px; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}

I would probably use absolute positioning and CSS for top, bottom, left, right. Not padding.

Perhaps, I do not completely understand how the absolution attribute works.

When i change ul.rMenu-hor {padding-left: 350px; } to

ul.rMenu-hor {
position: absolute;
left: 350px; }

This seems to make things worse and not better.

It places the menu bar behind the header image in IE and in front of the header image in Firefox -- instead of above the header image.

You may have to set the containing element to position:relative and perhaps use margin-left, margin-top, etc.

I figured it out..
I needed to change the ATO settings in Configure Header Area from
%pages to %page-right

Then I could adjust the padding as needed.

Thanks.