Css Problem need some help

[.insane]

Im new to coding css and am coding a site in css. well im having a major problem but its small stuff for you guys. so this is what the problem is

In Internet Explorer:
http://img364.imageshack.us/img364/4728/iexplq1.jpg

In Firefox:
http://img296.imageshack.us/img296/9628/firefoxra4.jpg

How I want it:
http://img362.imageshack.us/img362/6698/howiwantgd9.jpg

My code the text that i want on the background is in the navagation divclass.



.header {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-image: url(../images/template_01.gif);
background-repeat: repeat-x;
background-position: left top;
}
.navagation {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-image: url(../images/template_10.gif);
background-repeat: repeat-x;
background-position: left 131px;
height: 24px;
}


Thanks in advance