header image won't center in IE8

I must be missing something completely obvious but I've been struggling and struggling and cannot figure out what I'm doing wrong. I can't find an answer in existing posts nor on the web. I realized today that my header image isn't centered in IE8 though it looks fine in FF. I have added the following code to the site.css (.masthead is the div containing the entire header, .masthead-img is the style applied to the div containing the image, and .img-border is the style applied to the image). I'll also include the code from my header.html file. I've tried all sorts of combinations with text-align, display=block, and margins set to auto. What do I need to change to make this seemingly simple task work? The site is www.macontracks.org/membership/ .

.masthead {
background-color: #000066;
width: 100%;
}

.masthead-img {
width: 763 px;
margin-right: auto;
margin-left: auto;
text-align: center;
display: block;
}

.img-border {
border: 3px solid #660000;
}


code from header.html:
<div id="masthead" class="masthead">
<div id="masthead-img" class="masthead-img">
<a href="http://www.macontracks.org"><img src="http://www.macontracks.org/Images-MTRC-Website/masthead-runnerslgfont.jpg" class="img-border" alt="Macon Tracks Running Club" />
</a>
</div>
</div>

Finally got it working. Perhaps it was because I put the text-align=center in the div that I wanted centered, rather than the containing div? Still, seems like setting a width and making the right and left margins auto should have worked.

I also have another problem in IE8 but not in FF. The tabs are not displaying properly. I didn't even change anything, so why they would not be displaying properly now and look fine in FF but not IE8 has me completely baffled. If anyone has an idea for a quick fix I'd be most grateful.

Definitly working now ok in IE 7, 8 & 9, Firefox, chrome & Opera, oh and Safari 5!!

Thank you very much for testing it and I do think the header problem is solved, but I still can't figure out how to make the menu tabs display properly in IE8 on the screen that shows up after a member logs in (see thumbnail above). I tried uploading the original amember.css file and that did not help. It displays properly in FF, so I can't use Firebug to try and troubleshoot the problem. It also displays properly when I bring it up in Expression Web so that's no use either. I have tried a bunch of different settings in amember.css, reuploading the file with each change which is a pain, but cannot get it to work. I can't figure out what is different about displaying lists horizontally in FF vs. IE to make it work in one but not the other.

Hard to say without being able to actually view page live in IE but would think it is again a CSS problem.

Do you have correct doc type declaration at start of html page? This is important because it helps browser deside how to construct a page.

The browser 'decides'how to render a page, based on instructions given, and if those instructions are not always fully correct some browsers may render a page as you intend whilst others may not. That is the reason for testing a site in at least the main browsers used today. That is also the reason I have 7 browsers installed here over three computers.

I downloaded a new amember file, unzipped it, and uploaded the new amember.css to the server. Then I renamed site.css, taking it out of the mix. The problem was still there, so now I'm thinking it's not the css because otherwise everyone would be having the same problem. Can you explain to me how the menu bar is assembled? There is some stuff in tabs.inc.php that seems to be called by member_menu.inc.html, but I'm having a hard time even figuring out where to look. I was thinking to try and put in an inline style on the template but can't figure out where the <li> tags are. I really appreciate any help because I know just enough about computers to get myself really frustrated!

Try amember/templates/css/amember.css

About line 188 is the following:

Code:

    .menu-tabs a {
        color: black;
        font-weight:normal;
        font-size:9pt;
        display: block;
        padding: 5px 5px 7px;
        white-space: nowrap;
    }

Try changing the 'display: block;' line to 'display: inline;' and see if that makes any difference.

That didn't help (thanks for the suggestion), but interestingly when I removed the > between .menu-tabs and ul li, then it went to an inline display finally (because the float: left was able to kick in, presumably). It's still not behaving properly with respect to the backgrounds changing color as you hover and bottom borders disappearing, but at least those ugly bullets are gone and it's horizontal like it's supposed to be.

I'm assuming the conflict between IE and FF arises when something is designated as a child vs. a descendent? I still don't really understand it and it seems like the original css file from amember should work in both IE and FF.

original file from amember:

.menu-tabs > ul li {
float:left;
margin:0;
padding:0 0.4em;
list-style: none;
}

changed to:

.menu-tabs ul li {
float:left;
margin:0;
padding:0 0.4em;
list-style: none;
}

Just in case anyone else has this problem, a computer expert friend figured out a solution. My understanding is that the problem is that the doc type file declaration was not coming up first in the code, but rather farther down. FF seemed to handle that okay, but IE was confused. She moved the site customizations from the header and footer templates into the layout.html. That made the doc type come up first in the code and that has solved the problem.

Koedel if you had read fully my reply posted 4 days ago?????