Dopo aver pacioccato un pochetto sono riuscito a far girare il menu su IE 8 e IE 7. Su IE 7 le scritte "A", "B", ecc... sembrano traslare leggermente e questo non mi piace affatto ma il problema più grave é la compatibilitò con IE 6 ed IE 5.5 che vorrei aggiungere al layout.
Qualcuno mi da una pulita al CSS e mi spiega come allargare la compatibilità ad IE 5.5 e IE 6?
Attualmente per il layout ho un solo commento condizionale per IE 5.5 e non mi dispiacerebbe continuare questa filosofia ma se non si può pazienza.
Vorrei usare solo il CSS, no javascript od altro!
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> </head> <style type="text/css"> html, body { margin:0px; padding:0px; text-align:center; } div#layout { clear:both; text-align:left; width:960px; height:auto; margin:10px auto; border-width:0px; font:italic 90% arial; } div#tot { float:left; width:960px; height:30px; padding:0px; margin:0px; border-width:0px; background-color:green; } div#1 { float:left; width:10px; height:30px; padding:0px; margin:0px; border-width:0px; } div#2 { float:left; position:relative; width:940px; height:30px; padding:0px; margin:0px; border-width:0px; } div#3 { float:left; width:10px; height:30px; margin:0px; padding:0px; border-width:0px; } ul#contenitore, ul#contenitore li, ul#contenitore ul, ul#contenitore ul li { margin:0px; padding:0px; list-style-type:none; } ul#contenitore { height:30px; line-height:30px; margin-left:10px; background:transparent; color:#FFFFFF; } ul#contenitore a { display:block; padding:0px 15px; text-decoration:none; color:#FFFFFF; } ul#contenitore li { float:left; position:relative; } ul#contenitore li li { float:none; line-height:23px; display:block; } ul#contenitore ul { position:absolute; top:29px; left:-9999px; width:220px; background:#FFFFFF; color:#FFFFFF; } ul#contenitore ul { padding:12px 0px; border:1px solid black; } ul#contenitore li li a { height:25px; } ul#contenitore ul, ul#contenitore li li a { background-color:#FFFFFF; color:blue; } ul#contenitore li:hover, ul#contenitore a:hover { background-color:red; color:#FFFFFF; } ul#contenitore li:hover ul.primo_livello { left:-5px; z-index:100; } ul#contenitore li.secondo_menu:hover ul.secondo_livello { top:-12px; left:220px; z-index:200; } </style> <body> <div id="layout"> <div id="tot"> <div id="1"></div> <div id="2"> <ul id="contenitore">[*]A[*]B <ul class="primo_livello">[*]b1[*]b2[*]b3[*]b4[/list] [*]C <ul class="primo_livello">[*]c1[*]c2[*]c3 <li class="secondo_menu">c4 <ul class="secondo_livello">[*]c4_1[*]c4_2[/list] [/list] [*]D <ul class="primo_livello">[*]d1[*]d2[/list] [*]E <ul class="primo_livello">[*]e1[*]e2[/list] [*]F <ul class="primo_livello">[*]f1[*]f2[/list] [*]G[*]H <ul class="primo_livello">[*]h1[*]h2[/list] [/list] </div> <div id="3"></div> </div> </div> </body> </html>
Rispondi quotando
