if you look at my site in Firefox, and in IE, there is a button that I used position: absolute; on that is in the RIGHT PLACE in Firefox, but not in IE. I know that I should use position: relative; , but I can not seem to get it to work right. When I do that, my nav menu is pushed down. I am not that good with the positioning. Please advise, thanks.
The portion of code that is the button is #header. purchase
Code:
/** BEGIN header **/
#header {
height: 178px;
}
#header .search {
float: right;
margin-top: 11px;
}
#header .search form {
background: url(../images/search.png) no-repeat 0 0;
height: 49px;
width: 284px;
}
#header .search form input {
float: right;
background-color: transparent;
border: 0;
font-size: 0.8em;
color: #FFFFFF;
height: 38px;
width: 223px;
margin-top: 5px;
text-transform: uppercase;
}
#header .search form button {
float: left;
width: 59px;
height: 49px;
background-color: transparent;
border: 0;
color: transparent;
text-indent: -9999px;
}
#header .subscribe {
position: relative;
top: 75px;
left: 635px;
float: left;
text-align: center;
color: #ffffff;
}
#header .purchase {
position: absolute;
top: 149px;
right: 512px;
}
#header .logo {
clear: both;
}
#header .logo h1 {
padding-bottom: 32px;
}
#header .logo h1 a {
position: relative;
bottom: 15px;
background: url(../images/logo.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
height: 62px;
width: 352px;
}
#header ul {
list-style-type: none;
}
#header ul li {
float: left;
margin-right: 15px;
}
#header ul li a {
padding: 5px 8px;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9em;
font-weight: bold;
}
#header ul li a:hover {
background-color: #b9c3cf;
}
/** END header **/
Before you post, read our: 
