Salve a tutti.
Ho un menu css a lista dentro un div float right e di conseguenza dentro un div float left. Con FF come sempre tutto bene, con IE come sempre tutto male. Mi spiego. Ho un menù diviso per categorie e sottocategorie dove a queste ho impostato un padding-left. Il menù risulta però molto più in basso del normale, come se ci fosse un margin-top. Ho provato a mettere un display:inline e effettivamente il problema viene risolto. Ecco però che ne salta fuori un altro. Il padding-left viene raddoppiato.
Ho provato con diversi hack ma non riesco a trovare la soluzione.
Una cosa strana: togliendo il padding-left viene ugualmente visualizzato :dhò:
Posto il codice.
Se trovate qualche altro errore segnalatemelo. Grazie!! 0
HTML:
CSS:
Ho un menu css a lista dentro un div float right e di conseguenza dentro un div float left. Con FF come sempre tutto bene, con IE come sempre tutto male. Mi spiego. Ho un menù diviso per categorie e sottocategorie dove a queste ho impostato un padding-left. Il menù risulta però molto più in basso del normale, come se ci fosse un margin-top. Ho provato a mettere un display:inline e effettivamente il problema viene risolto. Ecco però che ne salta fuori un altro. Il padding-left viene raddoppiato.
Ho provato con diversi hack ma non riesco a trovare la soluzione.
Una cosa strana: togliendo il padding-left viene ugualmente visualizzato :dhò:
Posto il codice.
Se trovate qualche altro errore segnalatemelo. Grazie!! 0

HTML:
Codice:
<div id="wrap">
<div id="content">
<div id="l_sidebar">
blablabla
</div>
<div id="contentmiddle">
blablabla
</div>
<div id="r_sidebar">
<ul>
<div style="width:100%;">
<div style="float:left; width:50%;" class="leftpad">
<ul>
<li>
<ul>
<h2>Channels</h2>
<div class="mainmenu">
<div class="maincat">Tecnology</div>
<li><a href="#">Software</a></li>
<li><a href="#">Hack</a></li>
<li><a href="#">Webmaster</a></li>
<div style="clear:both"></div>
<br />
<div class="maincat">Eros</div>
<li><a href="#">Eden</a></li>
<li><a href="#">Celebrity</a></li>
<li><a href="#">Calendari</a></li>
<div style="clear:both"></div>
<br />
</div>
</ul>
</li>
</ul>
</div>
<div style="float:right; width:30%;">
<ul>
<li>
<h2>Blogroll</h2>
<ul>
<li><a href="#">Alex</a></li>
<li><a href="#">Donncha</a></li>
<li><a href="#">Ryan</a></li>
</ul>
</li>
</ul>
</div>
</div>
</ul>
<div style="height:20px; width:100%; clear:both"></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">
<div style="clear:both;"></div>
blabla
</div>
CSS:
Codice:
#wrap { color: #fff;
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;padding: 0;
margin-top:20px;}
#content {width: 960px;
margin: 0 auto;
padding: 0;
}
#contentmiddle {
float: left;
width: 52%;
margin: 20px 0 0 0;
padding: 0px 16px 10px 20px;
border-right:#CCCCCC 1px solid;}
#l_sidebar {float: left;width: 16%;margin: 0 20px 0 0;padding: 20px 0 20px 0;}
#l_sidebar ecc ecc...
#r_sidebar {float: right;width: 22%;margin:0;padding: 20px 0 0 0; }
#r_sidebar p{padding: 0px 0 16px 0;margin: 0;}
#r_sidebar ul {list-style: none;margin: 0;padding: 0 0 20px 0; display:inline;}
#r_sidebar ul li {margin: 0;padding: 5px 0 0 0; }
#r_sidebar ul li a {color: #fff;text-decoration: none;}
#r_sidebar ul li a:hover {color: #9198BF;text-decoration: none;}
.mainmenu {font-weight:bold; line-height:12px;}
.mainmenu a { padding-left:8px;}
.maincat {font-size:13px; color:#0099FF; }
.leftpad a {padding-left:6px;}