CSS + IE = Troubles

[semaja2]

Hi guys,

Im having a bit of trouble aligning the buttons on this website in IE6/7? like they do in FF/Safari/etc can anyone help me work out why and how to fix it?

http://www.semaja2.net/cinema/

PS. I can align if i nudge it down with a break, but that stuffs FF/etc up

PSS. Sometimes its also not aligning to the middle, and the middle background (film) does not reach the bottom of the screen

 

[ChicoWeb]

Couple things I noticed.

Maybe you should have your h1 outside of your menu div.

If you were to use this, which isn't necessary.

    <!--[if IE]>
    margin-top: 25px;
    <![endif]-->

It goes in you html not css

If it was me, I could use float left in my LI.

 

[jonnylink]

why are you using

display: table-cell;

? It isn't very cross-browser friendly? Try using "inline" instead, it is supposed to fix a few of the IE quarks when floating things.

Also you seem to be defining a lot of things in ways I can understand. Why are you using

position:static;

for the links? IE doesn't even understand static positioning, but I don't see a need for it here either, nor the line height since these are one line menu items arranged horizontally.

If it was me I'd clean out the code a bit and see how things are working and the narrow down what's going wrong. IE really screws up with float though and you'll probably be best off creating a separate sheet adjust things as needed in IE.

Best of luck— I know IE can be a huge headache.

ps I find this site helpful for these sort of things http://ipinfo.info/netrenderer/