[CSS HTML] Lista spostata senza margin in firefox e opera, ie si vede bene
Ragazzi, non sapevo che scrivere nel titolo perchè non so a da cosa dipenda il mio problema che mi assilla tutta la sera :crycry:
Allora, sto creando un menu a discesa senza l'utilizzo di Javascript ma solamente di CSS e liste.
Ora. ecco come si vede su FF e Opera:
http://www.postimage.org/Pq1W1tar.jpg
Mentre su IE:
http://www.postimage.org/Pq1W1vFA.jpg
Questo è il CSS che uso:
Codice:
.menu_loggedin li.top {
float: left;
list-style: none;
}
.menu_loggedin li a.top_link {
font-weight: bold;
padding: 5px 10px 5px 10px;
border-right: 1px solid #ccc;
float: left;
}
.menu_loggedin li:hover > a.top_link {
color: #3399FF;
text-decoration: none;
cursor: pointer;
}
.menu_loggedin table {
border-collapse:collapse;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.menu_loggedin a:hover {
visibility:visible;
position:relative;
z-index:200;
}
.menu_loggedin li:hover {
position:relative;
z-index:200;
}
/* keep the 'next' level invisible by placing it off screen. */
.menu_loggedin ul, .menu_loggedin:hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
.menu_loggedin:hover ul.sub {
left: -1px;
top: 0;
margin-top: 25px;
background: #fff;
padding: 3px;
border: 1px solid #CCCCCC;
border-top: none;
white-space: nowrap;
min-width: 99px;
width: auto;
height: auto;
z-index: 300;
}
.menu_loggedin:hover ul.sub li a {
display: block;
font-size: 11px;
height: 20px;
line-height: 20px;
color: #000;
text-decoration: none;
border-left: 3px solid #ccc;
margin-top: 2px;
padding: 0 3px 0 3px;
}
.menu_loggedin:hover ul.sub li a:hover {
display: block;
border-left: 3px solid #999;
}
.menu_loggedin:hover ul:hover ul,
.menu_loggedin:hover ul:hover ul:hover ul,
.menu_loggedin:hover ul:hover ul:hover ul:hover ul,
.menu_loggedin:hover ul:hover ul:hover ul:hover ul:hover ul {
left:90px;
top:-4px;
background: #fff;
padding:3px;
border:1px solid #3a93d2;
white-space:nowrap;
z-index:400;
height:auto;
}
Mentere questo è sorgente HTML:
Codice HTML:
<ul class="menu_loggedin">
<li class="top"><a href="user_home.php" class="top_link">
<img src="./images/icons/menu_home.gif" class="menu_icon"><span class="down">What's New</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="network.php" class="menu_item">My Network</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="menu_loggedin">
<li class="top"><a href="http://localhost/sn3/FB/" class="top_link">
<img src="./images/icons/profile16.gif" class="menu_icon"><span class="down">Profile</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="user_editprofile.php">Edit Profile Information</a></li>
<li><a href="user_editprofile_photo.php">Change Profile Photo</a></li>
<li><a href="user_editprofile_style.php">Edit Profile Layout</a></li> </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="menu_loggedin">
<li class="top"><a href="#" class="top_link">
<img src="./images/icons/menu_apps.gif" class="menu_icon"><span class="down">My Apps</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="user_blog.php">Blog</a></li>
<li><a href="user_poll.php">Polls</a></li>
<li><a href="user_group.php">Groups</a></li>
<li><a href="user_album.php">Photos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="menu_loggedin">
<li class="top"><a href="user_messages.php" class="top_link">
<img src="./images/icons/message_inbox16.gif" class="menu_icon"><span class="down">Messages</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="javascript:TB_show('Compose New Message', 'user_messages_new.php?TB_iframe=true&height=400&width=450', '', './images/trans.gif');">Compose New Message</a></li>
<li><a href="user_messages.php">Message Inbox</a></li>
<li><a href="user_messages_outbox.php">Message Outbox</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="menu_loggedin">
<li class="top"><a href="user_friends.php" class="top_link">
<img src="./images/icons/friends16.gif" class="menu_icon"><span class="down">Friends</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="user_friends.php">View My Friends</a></li>
<li><a href="user_friends_requests.php">Incoming Friend Requests</a></li>
<li><a href="user_friends_requests_outgoing.php">Outgoing Friend Requests</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="menu_loggedin">
<li class="top"><a href="user_account.php" class="top_link">
<img src="./images/icons/settings16.gif" class="menu_icon"><span class="down">Settings</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="user_account.php">Account Settings</a></li>
<li><a href="user_account_privacy.php">Privacy Options</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
Potreste dirmi come posso risolvere? Sto modificando una skin ad un amico che mi ha chiesto il favore, facendo il tutto table-less, però mi sono bloccato a questo menu :crycry:
