First of all, your left side menu is messed in IE.
Try this in your CSS to fix it:
img {
border: none;
}
As far as your issue with the header goes, change a few things around and it should work:
#mauivacationpage {
margin-left: auto;
margin-right: auto;
position: relative; /* This will position all sub elements in relative terms to this div. It comes in handy later. */
width: 800px;
}
#content {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 200px;
padding: 0;
border: 0px;
width: 800px;
}
The margin-top will position the content div 200 pixels from the top of the page in both browsers.
Next property:
#mauihawaiiluaulogo {
position: absolute; /* because this div is a child of the #mauivacationpage div, the positioning will be defined based on the coordinates of it vs. the body coordinates */
top: 0;
left: 0;
margin: 0;
padding: 0;
background-image: url(images/mauiluaulogo2.jpg);
border: 0px;
height: 200px;
width: 800px;
overflow: hidden; /* Not necessary, but somtimes it helps. It never hurts to be a little paranoid. */
}
Note: you can put your logo div after your content div if you like. It won't make a difference since it's absolutely positioned. I tend to do this with my absolutely positioned elements when possible so that I know they're not part of the normal flow of the document.
Try that and let me know. Just make a backup copy first in case you get lost or something gets messed up.
|