Witam!
Jakiś czas temu zrobiłem sobie menu wszystko było w porządku na każdej przeglądarce do dziś. Podejrzewam, że była jakaś aktualizacja tej przeglądarki i teraz wyświetla się nie poprawnie.
Mój CSS:
#menu {
margin-left: 360px;
}
#menu ul {
position: absolute;
float: left;
list-style-type:none;
}
#menu li {
display: inline;
}
#menu a {
background: url(../images/button_background.png);
width: 128px;
height: 85px;
display: inline-block;
text-align: center;
float: left;
color: #fff;
font: 16px "Noto Sans";
text-decoration: none;
padding-top: 48px;
margin-right: -20px;
}
#menu li:nth-child(1) a {
background: url(../images/home_icon.png) 51px 22px no-repeat, url(../images/button_background.png) right bottom no-repeat;
padding-right: 10px;
}
#menu li:nth-child(1) a:hover {
background: url(../images/home_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png) no-repeat;
}
#menu li:nth-child(2) a {
background: url(../images/sites_icon.png) 51px 22px no-repeat, url(../images/button_background.png)no-repeat;
padding-right: 10px;
}
#menu li:nth-child(2) a:hover {
background: url(../images/sites_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
}
#menu li:nth-child(3) a {
background: url(../images/register_icon.png) 56px 22px no-repeat, url(../images/button_background.png)no-repeat;
padding-right: 10px;
}
#menu li:nth-child(3) a:hover {
background: url(../images/register_icon.png) 56px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
}
#menu li:nth-child(4) a {
background: url(../images/login_icon.png) 55px 22px no-repeat, url(../images/button_background.png)no-repeat;
padding-right: 10px;
}
#menu li:nth-child(4) a:hover {
background: url(../images/login_icon.png) 55px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
}
#menu li:nth-child(5) a {
background: url(../images/helpdesk_icon.png) 55px 22px no-repeat, url(../images/button_background.png)no-repeat;
padding-right: 10px;
}
#menu li:nth-child(5) a:hover {
background: url(../images/helpdesk_icon.png) 55px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
}
#menu li:nth-child(6) a {
background: url(../images/forum_icon.png) 51px 22px no-repeat, url(../images/button_background.png)no-repeat;
padding-right: 10px;
}
#menu li:nth-child(6) a:hover {
background: url(../images/forum_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png)no-repeat;
}
HTML:
<a href="#"><i></i>General
</a> <li><a href="<?=$url?>account/" title='Account'>Account
</a></li> <li><a href="<?=$url?>banner/" title='Banners'>Referrals Tools
</a></li> <li><a href="<?=$url?>request/" title='Cashout'>Cashout
</a></li> <li><a href="<?=$url?>upload/" title='Upload'>Upload Proof
</a></li>
<a href="#"><i></i>Message
</a> <li><a href="<?=$url?>pmw/" title='New Message'>New Message
</a></li> <li><a href="<?=$url?>pm/" title='Inbox'>Inbox (
<?=$rows['ile']?>) new
</a></li> <li><a href="<?=$url?>pmo/" title='Outbox'>Outbox
</a></li>
<a href="#"><i></i>Other
</a> <li><a href="<?=$url?>upgrade/" title='Upgrade Packs'>Upgrade!
</a></li> <li><a href="<?=$url?>checker/" title='Sites Checker'>Sites Checker
</a></li>
<a href="#"><i></i>Referrals
</a> <li><a href="<?=$url?>referrals/" title='Direct'>Direct
</a></li>
<a href="#"><i></i>Settings
</a> <li><a href="<?=$url?>personal/" title='Personal'>Personal Settings
</a></li>
<a href="#"><i></i>History
</a> <li><a href="<?=$url?>history/" title='Payment'>Payment
</li> <li><a href="<?=$url?>earnings/" title='Earnings'>Earnings
</a></li>
Problemem jest to, że od drugiego elemntu cała reszta jest lekko w dół:
(IMG:http://clip2net.com/clip/m106573/thumb640/1389891662-clip-20kb.jpg)
Powinno być tak:
(IMG:http://clip2net.com/clip/m106573/thumb640/1389891683-clip-20kb.jpg)
Kombinowałem trochę w CSS, ale nie mam pojęcia co mogło to spowodować.