[Solved] Horizontal Menu Doesn’t Work in IE7

[Hrvojeee]

Hello guys, please help! and yes, i’ve read the same thread about ie7 and dropdown menu problems but it doesn’t solve my problem.

So, I have a menu that i’ve made in photoshop, its .png file 720x120px, and this is the css for the horizontal menu made with that single image:

Code:

div#izbornik {margin-left:auto; margin-right:auto; width:740px; height:60px; z-index:1;}
div#izbornik_1 {background:url(images/izbornik.png) no-repeat 0px 0px; width:145px; height:60px; display:inline-block; z-index:100;}
div#izbornik_1:hover {background:url(images/izbornik.png) no-repeat 0px -60px; width:145px; height:60px; display:inline-block;}
div#izbornik_2 {background:url(images/izbornik.png) no-repeat -145px 0px; width:165px; height:60px; display:inline-block; z-index:100;}
div#izbornik_2:hover {background:url(images/izbornik.png) no-repeat -145px -60px; width:165px; height:60px; display:inline-block;}
div#izbornik_3 {background:url(images/izbornik.png) no-repeat -310px 0px; width:135px; height:60px; display:inline-block; z-index:100;}
div#izbornik_3:hover {background:url(images/izbornik.png) no-repeat -310px -60px; width:135px; height:60px; display:inline-block;}
div#izbornik_4 {background:url(images/izbornik.png) no-repeat -445px 0px; width:125px; height:60px; display:inline-block; z-index:100;}
div#izbornik_4:hover {background:url(images/izbornik.png) no-repeat -445px -60px; width:125px; height:60px; display:inline-block;}
div#izbornik_5 {background:url(images/izbornik.png) no-repeat -570px 0px; width:150px; height:60px; display:inline-block; z-index:100;}
div#izbornik_5:hover {background:url(images/izbornik.png) no-repeat -570px -60px; width:150px; height:60px; display:inline-block;}

where div#izbornik is the whole menu block, and each pad is then made in normal nad hover state. the menu works fine in firefox, chrome and ie8 but in ie7 only the first pad appears and works in hover state, and the rest is blank. I have the same menu at the bottom of my page and same thing with that, and it seems that the pads stack on top of each other, instead of lining up like in other browsers. Can anyone help me please, i’m freaking out! Thank You!

[Hrvojeee]

link:
http://www.igraonica-medvjedic-winnie.hr

thanx

[Hrvojeee]

hmm yes you’re right "virtual" about the alternative text if images are disabled!

I’ll try Your suggestion, thanx for the time. now i’m downloading ie7 portable so i can see the results and i’ll report later if this works for ie7!

[Hrvojeee]

Thanks again for the advice, but I want to finish this now the way i started it. i’ll have in mind for the next project that it should be wiser to make menu using text. But please can You help me now and tell me why does ie7 stack div’s on top of each other instead of lining them up like other browsers?

[Hrvojeee]

i think i’ve got it! the trick was to make parent’s div display:block (which i didn’t define earlier)! Problem resolved

[Author]

Posts