[CSS][HTML] Obniżenie kolejnych elementów, Zmiana po update chrome Opcje

[boro11]

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:

[HTML] pobierz, plaintext 
#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] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id="account_menu">
 
		<ul>
			<li>
				<a href="#"><i></i>General</a>
				<ul class="closed">
					<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>
				</ul>
			</li>
 
			<li>
				<a href="#"><i></i>Message</a>
				<ul class="closed">
					<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>
				</ul>
			</li>
 
			<li>
				<a href="#"><i></i>Other</a>
				<ul class="closed">
					<li><a href="<?=$url?>upgrade/" title='Upgrade Packs'>Upgrade!</a></li>
					<li><a href="<?=$url?>checker/" title='Sites Checker'>Sites Checker</a></li>		
				</ul>
			</li>
 
			<li>
				<a href="#"><i></i>Referrals</a>
				<ul class="closed">
					<li><a href="<?=$url?>referrals/" title='Direct'>Direct</a></li>
				</ul>
			</li>
 
			<li>
				<a href="#"><i></i>Settings</a> 
				<ul class="closed">
					<li><a href="<?=$url?>personal/" title='Personal'>Personal Settings</a></li>
				</ul>
			</li>
 
			<li>
				<a href="#"><i></i>History</a> 
				<ul class="closed">
					<li><a href="<?=$url?>history/" title='Payment'>Payment</li>
					<li><a href="<?=$url?>earnings/" title='Earnings'>Earnings</a></li>	
				</ul>
			</li>
		</ul>
 
    </div>
[HTML] pobierz, plaintext 

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ć.

[modern-web]

Wygląda na to, że specyfikacja "background" się zmieniła, masz tam za dużo parametrów.

Pokażę Ci poprawiony skrawek, a Ty sobie przerób resztę.

[HTML] pobierz, plaintext 
#menu li:nth-child(1) a {
	background: url(../images/home_icon.png) 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) no-repeat, url(../images/button_background_hover.png) no-repeat;
}
 
#menu li:nth-child(2) a {
	background: url(../images/sites_icon.png) 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) no-repeat, url(../images/button_background_hover.png)no-repeat;
}
 
...
[HTML] pobierz, plaintext 

p.s. obstawiam, że sypną Ci się ikonki, które masz w tym menu, ale możesz je tam umieścić w znacznie lepszy sposób niż ten przedstawiony wyżej. rozbij je na warstwy najlepiej i odpowiednio ustaw pozycję.

Ten post edytował modern-web 16.01.2014, 18:23:55

[com]

Wygląda na to, że specyfikacja "background" się zmieniła, masz tam za dużo parametrów.

hmm?

może tak mieć, ale to faktycznie tam chyba jest nie potrzebne (IMG:style_emoticons/default/wink.gif)

[modern-web]

Włącz Chrome-a, wejdź na jego stronę (RefBackBank), włącz narzędzia developerskie, usuń te 2 wartości i zobaczysz jak tło trafia w swoje miejsce (IMG:style_emoticons/default/smile.gif)
Skoro działało wcześniej, a nie działa po aktualizacji, znaczy że coś się zmieniło, w ilości parametrów może, nie wiem (IMG:style_emoticons/default/biggrin.gif)
Ale jego zapis jest nieco specyficzny, rzadko widuje się taki kod (IMG:style_emoticons/default/wink.gif)

btw. com, mogę Cię prosić o rzucenie okiem na mój problem (wątek z pozycjonowaniem div (IMG:style_emoticons/default/smile.gif) )?

[boro11]

Witam,
Dziękuję za odpowiedzi, ale podane rozwiązanie niestety nie rozwiązało mojego problemu.
Ikony są oddzielnie od tła (są rozbite na warstwy jak to ująłeś) i pozycjonowane własnie tam w background. Skorzystałem z nowej opcji w CSS3 która umożliwia podanie dwóch linków tła i działało całkiem w porządk, do dziś. Jakieś inne pomysły? (IMG:style_emoticons/default/smile.gif)

[com]

a reset masz dodany? może wartości domyślne bloków?

modern-web tutaj masz dokumentacje do tego rozwiązania http://www.css3.info/preview/multiple-backgrounds/ zapis coraz częściej spotykany, pozwala np 1 blokiem, oblecieć cale tło a kiedyś trzeba było je składać z kilu bardzo przydatne jak się wie jak użyć (IMG:style_emoticons/default/wink.gif)

[boro11]

Witam,
mam reset:

[PHP] pobierz, plaintext 
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, 
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
}
 
article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
  display: block;
}
 
mark {
  background-color: transparent;
}
 
a, ins, del {
  text-decoration: none;
}
 
ul, ol {
  list-style: none;
}
 
table {
  border-spacing: 0;
  border-collapse: collapse;
}
 
caption, th {
  text-align: left;
}
 
q:after, q:before {
  content: "";
}
[PHP] pobierz, plaintext 

[com]

[CSS] pobierz, plaintext 
#menu li:nth-child(2) a:{
	background: url(../images/home_icon.png) 51px 22px no-repeat, url(../images/button_background_hover.png) 0px 0px no-repeat;
}
[CSS] pobierz, plaintext 

itd (IMG:style_emoticons/default/wink.gif)

a url wrzucaj raczej w ' ' (IMG:style_emoticons/default/wink.gif)

Ten post edytował com 16.01.2014, 19:26:54

[boro11]

Dziękuję serdecznie działa (IMG:style_emoticons/default/smile.gif)
Wyszło moje niechlujstwo, wcześniej chrome to "łykało" ale widać poprawili i już nie chciało, a ciapki pododawałem (IMG:style_emoticons/default/smile.gif)

[com]

widocznie to jego błąd... bo generalnie chodzi o to że musisz ustalić od jakiej pozycji ma to rysować a jak mu nie podałeś to brał względem pierwszego (IMG:style_emoticons/default/wink.gif)