--- title: "Horisontell lista blir trappa i IE" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/158687-horisontell-lista-blir-trappa-i-ie" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "Mr. N." published: "2007-03-28T23:34:35.000Z" updated: "2007-03-29T16:59:24.000Z" replies: 12 views: 792 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/158687-horisontell-lista-blir-trappa-i-ie" --- # Horisontell lista blir trappa i IE ## #1 — Mr. N., 2007-03-28T23:34Z Jag håller på och experimenterar lite med horisontella listor. Jag har nu lyckats få till det rätt stiligt och det funkar utmärkt i Opera och Firefox, men i IE blir den horisontella listan en trappa istället. Här är sidan ifråga: Och här är lite kod: CSS: ``` .menulist { list-style-type: none; margin-left: 0px; padding-left: 0px; } .menulist li a { list-style-type: none; display: block; float: left; font-size: 80%; padding: 5px; width: 80px; text-decoration: none; color: black; border-left: 1px solid #8597A6; border-right: 1px solid #8597A6; background: url("images/ponggradienthover.gif") repeat-x 20px; text-align: center; } .menulist li a:hover { border-left: 1px solid #465058; border-right: 1px solid #465058; color: white; background: url("images/ponggradient.gif") repeat-x; } ``` ``` ``` Jag antar att jag har missat nåt kring float och display: block, men jag har stirrat mig blind på det nu. :p Permalänk: https://www.webforum.nu/p/158687 ## #2 — tranceformer, 2007-03-29T03:26Z Jag har en liknande meny på en sida som jag gjort, och där har jag gjort ungefär såhär istället.. ``` .menulist ul { list-style-type: none; margin-left: 0px; padding-left: 0px; } [I].menulist ul li { display: [B]inline[/B];}[/I] .menulist ul li a { float: left; font-size: 80%; padding: 5px; width: 80px; text-decoration: none; color: black; border-left: 1px solid #8597A6; border-right: 1px solid #8597A6; background: url("images/ponggradienthover.gif") repeat-x 20px; text-align: center; } .menulist ul li a:hover { border-left: 1px solid #465058; border-right: 1px solid #465058; color: white; background: url("images/ponggradient.gif") repeat-x; } ``` ```
``` Finns säkert ett mycket enklare och bättre sätt, men jag tittade bara på hur jag har gjort förut eftersom jag kom att tänka på det när jag såg din meny. Ändrade till display: inline; och satte listan i en div med menulistklassen istället, vet inte om det är "rätt", men det funkar :) Permalänk: https://www.webforum.nu/p/1952000 ## #3 — Danne V, 2007-03-29T05:51Z Jag tror du måste visa ALL kod och ALL CSS eftersom det är viktigt att se vad som innesluter menyn. För att det ska gå så smidigt som möjligt vore det ju bra om du kunde ladda upp sidan nånstans och ge en länk. Permalänk: https://www.webforum.nu/p/1952006 ## #4 — @nders, 2007-03-29T05:59Z > **Danne V skrev:** > > För att det ska gå så smidigt som möjligt vore det ju bra om du kunde ladda upp sidan nånstans och ge en länk. > **Mr. N. skrev:** > > Här är sidan ifråga: Permalänk: https://www.webforum.nu/p/1952008 ## #5 — Danne V, 2007-03-29T07:28Z > **@nders skrev:** > > > **Danne V skrev:** > > > > För att det ska gå så smidigt som möjligt vore det ju bra om du kunde ladda upp sidan nånstans och ge en länk. > > > > > **Mr. N. skrev:** > > > > Här är sidan ifråga: DUH..... Jag har sagt till mig själv att INTE skriva inlägg föränn efter 4 muggar expresso... F'låt. Permalänk: https://www.webforum.nu/p/1952016 ## #6 — Danne V, 2007-03-29T07:33Z Gissning: Du har inte formaterat \ någonstans. Delar av formateringen för \ ska egentligen läggas på \, t.ex. float och även borders och annat. EDIT: Läste nyss vad jag skrivit och kom att tänka på att det kanske bör förklaras: Om du inte formaterar \, så är det sannolikt att olika webbläsare lägger in sin "default". Om då din formatering för \ som ju ligger inuti \ t.ex. är bredare/större/annorlunda än webbläsarens "default", så kan konstiga grejer hända. Alltså: formatera \ innan du formaterar \. Se till att få med border, padding, float, osv. Permalänk: https://www.webforum.nu/p/1952017 ## #7 — Mr. N., 2007-03-29T09:00Z Jaha, jag tror jag har missförstått syntaxen lite. Jag trodde att .menulist li a { \[X\] } formaterade både \ och \ enligt \[X\], men det betyder alltså att bara \ som ligger inom \ formateras? tranceformer: det finns en väldigt bra anledning till varför jag kör display: block och float: left istället för display: inline, naturligtvis kommer jag inte på vad anledningen är just nu men... ;) Permalänk: https://www.webforum.nu/p/1952038 ## #8 — Troxy, 2007-03-29T09:25Z > **Mr. N. skrev:** > > det finns en väldigt bra anledning till varför jag kör display: block och float: left istället för display: inline Antagligen för att man inte kan sätta width och height på en inline. :) Permalänk: https://www.webforum.nu/p/1952046 ## #9 — Mr. N., 2007-03-29T09:33Z Ah, just det. Ville ha knapparna i samma bredd oavsett vad länktexten var, tack Troxy. :) Permalänk: https://www.webforum.nu/p/1952047 ## #10 — tanten, 2007-03-29T10:26Z Men vad händer om du bara gör den här ändringen ``` .menulist li { list-style-type: none; display: block; float: left; font-size: 80%; padding: 5px; width: 80px; text-decoration: none; color: black; border-left: 1px solid #8597A6; border-right: 1px solid #8597A6; background: url("images/ponggradienthover.gif") repeat-x 20px; text-align: center; } .menulist a{ text-decoration: none; }{ ``` Hinner inte testa men tycker att det borde gå. Kanske behövs något mer i a för att det ska se ut som du vill, men för att undvika trappan...? Permalänk: https://www.webforum.nu/p/1952053 ## #11 — tranceformer, 2007-03-29T10:56Z > **Troxy skrev:** > > Antagligen för att man inte kan sätta width och height på en inline. :) Jaha där ser man :) Permalänk: https://www.webforum.nu/p/1952060 ## #12 — Mr. N., 2007-03-29T16:25Z Sådär, nu blev det som jag vill ha det. :) ``` .menulist li { display: block; float: left; font-size: 80%; text-align: center; } .menulist a { text-decoration: none; color: black; display: block; float: left; width: 80px; padding: 5px; background: url("images/ponggradienthover.gif") repeat-x 20px; border-left: 1px solid #8597A6; border-right: 1px solid #8597A6; } .menulist li a:hover { border-left: 1px solid #465058; border-right: 1px solid #465058; color: white; background: url("images/ponggradient.gif") repeat-x; } ``` Permalänk: https://www.webforum.nu/p/1952134 ## #13 — Danne V, 2007-03-29T16:59Z Gôtt mos! Permalänk: https://www.webforum.nu/p/1952143 --- Tråden på webben: https://www.webforum.nu/amne/html-css/158687-horisontell-lista-blir-trappa-i-ie