Винаги ховър снимката е с 1px надоло и настрани

D

deadlycreeperbg

Registered
[css]ul.menu { width: 960px; height: 42px; line-height: 42px; background: url(../images/menubg.png) top left no-repeat; list-style-type: none; }
ul.menu li { float: left; background: url(../images/sepa.png) top right no-repeat;}
ul.menu li a:link, a:visited { font-family: "Tahoma"; font-size: 12px; color: #107065; padding-left: 25px; padding-right: 25px; display: inline-table;}
ul.menu li a:hover, a:active { background: url(../images/lh.png) top left repeat-x; color: #f3f3f3; }
ul.menu li:first-child a:hover, a:active { background: url(../images/flh.png) top left repeat-x; }[/css]

Това е css. И HTML :

HTML: 
<ul class="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Community Forums</a></li>
				<li><a href="#">Videos and pictures</a></li>
				<li><a href="#">Top Builders</a></li>
				<li><a href="#">Contact us</a></li>
			</ul>
Винаги ховър ефекта е с 1пиксел надоло и 1пиксел надясно разместен, не мога да разбера от какво се получава. При maxthon е супер, при мозила е проблема. Снимка: http://i.imgur.com/jls4g.png

Както виждате отгоре ховъра все едно има margin-top:1px; и margin-left: 1px;. Доктайп:
HTML: 
<!DOCTYPE html>
 
Vladkata каза:
Виж дали самите изборажения са с еднакъв размер. Провери margin и padding :).
Увеличете...

Еднакъв размер са, забележи, че отгоре снимката е с 1пиксел надоло, т.е. точно еднакво са, но ховъра е 1 пиксел надоло. Дал съм в .css * { margin: 0; padding: 0; } което ми оправя проблемите за целият сайт. Други предложения ?
 
Единственото решение, е да сложа на line-height: 41px; но пък тогава в менюто от дясната страна на ховъра пак си е разместен 1 пиксел. Тоест това не ми е решение. Опитвах какво ли не. Явно грешката е в мен някъде, но не мога да разбера къде. От 4 часа опитвам и го мъча, пренаписах менюто от обикновенни линкове в div до списъци, но ефект нулев. :(
 
syneidesys каза:
Пробвай да сложиш -дисплей инлайн без тейбъл!
Увеличете...

И това пробвах, пак в мозилата е така. Само че ховъра става бекграунд САМО в рамките на текста, не на целия бутон, и от дясно все още си е 1 пиксел повече.
 
Сложи дисплей инлайн на 2 ред а не на 3 ред!
Ако искаш постни и изображенията за да пробваме както трябва !
Другия вариант е някакъв страничен елемент да го избутва!
 
Ето линк към проблема :
http://demonstartion.partyne.rango.icnhost.net/ Съжелявам, че е малко дълъг линка ама какво да се прави :D

Ето и CSS: http://demonstartion.partyne.rango.icnhost.net/css/

@vladkata - без него няма как да центрирам вертикално текста, тоест да го сваля до средата. :/
 
В подобни случай,аз правя така:
[css]margin-top:-1px;
margin-left:-1px;[/css]
и се приключва проблема.
 
[css]
ul.menu li a:link, a:visited { font-family: "Tahoma"; font-size: 12px; color: #107065; padding-left: 25px;padding-right:25px; }
ul.menu li a:hover, a:active { background: url(../images/lh.png) repeat-x; color: #f3f3f3;padding-left:25px;}
[/css]
при мен така се оправиха нещата... ? :lol:

тествах го директно в сайта ти.
 
Hous с това решение ми го няма ховъра в менюто, само в рамките на текста е. А предишното с маргин-а там пък в нормалниите браузъри се размества нагоре и наляво, или пък в мозила няма ефект пробвах го. А относно само INLINE на 1 ред - маха ми се фона на менюто. Ето КАК трябва да изглежда менюто нормално:
https://cs-s.maxthon.com/filesync/dl/share/n1vZNoQRg5yc1qx?v=1

ЕДИТ: Сега видях, че пича е писал да сложа на 2 ред инлайн. Тогава ефекта е като на хоус кода. След малко ще постна снимка и на него. Ето и снимката: https://cs-s.maxthon.com/filesync/dl/share/GkQJJxwEcqgCJWh?v=1
 
Ами ти така си го дал...
дай му padding-top:някакви px;
и paddin-bottom: ;
и ще се оправи.

[css]
ul.menu li a:link, a:visited { font-family: "Tahoma"; font-size: 12px; color: #107065; padding-left: 25px; padding-right: 25px; }
ul.menu li a:hover, a:active { height:42px;background: url(../images/lh.png) repeat-x; color: #f3f3f3; padding-top:14px;padding-bottom:13px;}
[/css]
 
Hous каза:
Ами ти така си го дал...
дай му padding-top:някакви px;
и paddin-bottom: ;
и ще се оправи.

[css]
ul.menu li a:link, a:visited { font-family: "Tahoma"; font-size: 12px; color: #107065; padding-left: 25px; padding-right: 25px; }
ul.menu li a:hover, a:active { height:42px;background: url(../images/lh.png) repeat-x; color: #f3f3f3; padding-top:14px;padding-bottom:13px;}
[/css]
Увеличете...

Това излиза супер при мен. Благодаря. +1 :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе