Horisontell meny i IE

Tråden skapades och har fått 5 svar. Det senaste inlägget skrevs .
1

Hej, jag och min kompis sitter och försöker att lösa ett stort problem vi har med IE serien. Vi vill ha en horisontell meny med enbart text och en seperator imellan menyn:

STARTSIDA I STARTSIDA I STARSIDA

så vill vi att det ska se ut, det funkar bra i alla webbläsare förutom i versionerna IE7, IE6 och IE5. Nu ligger menyn i en lista som har display:inline-block som kod. menyn ligger även i div som heter meny. Koden ser ni nedan:

#menu {
margin:0 auto;
width:750px;
height:15px;
}

#menu a {
font-size:1.1em;
text-shadow: 0px 2px 0px #FFF;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
text-decoration:none;
}

#menu ul {
list-style:none;
}

#menu li {
background-image:url(../grafik/seperator.png);
background-repeat:no-repeat;
background-position:right;
display:inline-block;
width:100px;
margin-left:15px;

Det som händer är att texten eller länkarna i menyn inte lägger sig bredvid varandra som det dock gör i alla andra webbläsare. Hur kan man lösa detta?

  • Medlem
  • Harestad
  • 2011-09-08 17:52

Jag skulle tippa på att det räcker för er att ändra på "inline-block" till bara "inline". Kolla på denna sidan, där står det att "inline-block" inte stöds i äldre IE-versioner:
CSS2 - The display declaration

En fråga. Varför stödja IE5 & 6? Finns ingen anledning till det.

Tack för tipset. Det gick dessvärre inte att bara ändra till "inline" istället för "inline-block".

  • Medlem
  • Harestad
  • 2011-09-08 23:15
Ursprungligen av Polpotkinz:

Tack för tipset. Det gick dessvärre inte att bara ändra till "inline" istället för "inline-block".

Jaså? Varför gick inte det då? Det är det absolut enklaste sättet att göra en lista horisontell, i alla browsers. Sedan sätter man en höjd och bredd. Då får du samma effekt som om du hade valt block.

Det kanske kan fungera om du istället sätter display:block och sedan sätter float:left eller right. Då borde varje li-objekt hamna jämte det tidigare.

Jag förstod inte varför det inte fungerade, jag läste på sidan du länkade och det borde funkat. Men nu har vi löst det för IE7 i alla fall. Koden för den webbläsaren ser ut såhär nu:

#menu {
margin:0 auto;
width:660px;
height:15px;
}

#menu a {
font-size:1.1em;
text-shadow: 0px 2px 0px #FFF;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
text-decoration:none;
}

#menu ul {
list-style:none;
}

#menu li {
background-image:url(../grafik/seperator.png);
background-repeat:no-repeat;
background-position:right;
display:inline-block;
zoom:1;
*display:inline;
width:100px;
margin-left:15px;

Vi hittade någon hack som, med hjälp av "zoom" och "*display:inline" gjorde så att den la sig som en horisontell linje. Konstigt nog fungerade det.

1
Bevaka tråden