[Solved] Links on CSS rollover menu jumping

[mr.beck]

i have this CSS rollover menu and everything look fine and working. But when you move he mouse over the link it´s seems to have hard to find the link because the the rollover images just come and go. Do any one know what i have done wrong and how to fix it?

here is the link to my webside

http://playasmile.comze.com/eng/index.html

here is the CSS:

body {
font:16px "palatino linotype"
}

div.scroll {
height:445px;
width:650px;
overflow-x:hidden;
overflow-y:auto;
overflow:-moz-scrollbars-vertical
}

.trampoline {
background:url(images/z1.gif) no-repeat
}

.trampoline,.slide,.castle,.softplay,.pool,.offer,.eng,.thai,.home,.about,.safety,.contact,.sitemap,.event,.news,.sun,.logo,.blank,.blank1,.blank2,.blank3,.blank4,.blank5,.blank6,.blank7,.blank8,.blank9,.blank10,.blank11,.blank12 {
position:relative
}

.trampoline,.trampoline a,.slide,.slide a,.castle,.castle a,.blank10 {
width:173px
}

.trampoline,.trampoline a {
height:93px
}

.trampoline img,.slide img,.castle img,.softplay img,.pool img,.offer img,.eng img,.thai img,.home img,.about img,.safety img,.contact img,.sitemap img,.event img,.news img {
width:100%;
height:100%;
border:0
}

* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover {
visibility:visible
}

.trampoline a:hover img,.slide a:hover img,.castle a:hover img,.softplay a:hover img,.pool a:hover img,.offer a:hover img,.eng a:hover img,.thai a:hover img,.home a:hover img,.about a:hover img,.safety a:hover img,.contact a:hover img,.sitemap a:hover img,.event a:hover img,.news a:hover img {
visibility:hidden
}

.trampoline span,.slide span,.castle span,.softplay span,.pool span,.offer span,.eng span,.thai span,.home span,.about span,.safety span,.contact span,.sitemap span,.event span,.news span {
position:absolute;
left:0;
top:0;
margin:0;
cursor:pointer
}

.slide {
background:url(images/z3.gif) no-repeat
}

.slide,.slide a {
height:65px
}

.castle {
background:url(images/z5.gif) no-repeat
}

.castle,.castle a {
height:98px
}

.softplay {
background:url(images/z2.gif) no-repeat
}

.softplay,.softplay a,.pool,.pool a,.blank,.blank1 {
width:174px
}

.softplay,.softplay a {
height:72px
}

.pool {
background:url(images/z4.gif) no-repeat
}

.pool,.pool a {
height:73px
}

.offer {
background:url(images/z6.gif) no-repeat
}

.offer,.offer a,.blank5 {
width:116px
}

.offer,.offer a {
height:77px
}

.eng {
background:url(images/z7.gif) no-repeat
}

.eng,.eng a {
width:43px
}

.eng,.eng a,.thai,.thai a {
height:46px
}

.thai {
background:url(images/z8.gif) no-repeat
}

.thai,.thai a {
width:41px
}

.home {
background:url(images/z9.gif) no-repeat
}

.home,.home a {
width:68px
}

.home,.home a,.about,.about a,.blank8 {
height:35px
}

.about {
background:url(images/z10.gif) no-repeat
}

.about,.about a {
width:119px
}

.safety {
background:url(images/z11.gif) no-repeat
}

.safety,.safety a {
width:137px
}

.safety,.safety a,.contact,.contact a {
height:51px
}

.contact {
background:url(images/z12.gif) no-repeat
}

.contact,.contact a {
width:126px
}

.sitemap {
background:url(images/z13.gif) no-repeat
}

.sitemap,.sitemap a {
width:99px
}

.sitemap,.sitemap a,.blank9 {
height:50px
}

.event {
background:url(images/z14.gif) no-repeat
}

.event,.event a {
width:86px;
height:56px
}

.news {
background:url(images/z15.gif) no-repeat
}

.news,.news a {
width:87px;
height:55px
}

.sun {
background:url(images/index_01.gif) no-repeat;
width:347px;
height:185px
}

.logo {
background:url(images/index_02.gif) no-repeat;
width:653px;
height:122px
}

.blank {
background:url(images/index_05.gif) no-repeat;
height:48px
}

.blank1 {
background:url(images/index_10.gif) no-repeat;
height:63px
}

.blank2 {
background:url(images/index_11.gif) no-repeat;
width:29px;
height:259px
}

.blank3 {
background:url(images/index_12.gif) no-repeat;
width:84px;
height:213px
}

.blank4 {
background:url(images/index_14.gif) no-repeat;
width:118px;
height:141px
}

.blank5 {
background:url(images/index_15.gif) no-repeat;
height:64px
}

.blank6 {
background:url(images/index_16.gif) no-repeat;
width:887px
}

.blank6,.blank10 {
height:31px
}

.blank7 {
background:url(images/index_21.gif) no-repeat;
width:89px;
height:86px
}

.blank8 {
background:url(images/index_24.gif) no-repeat;
width:394px
}

.blank9 {
background:url(images/index_30.gif) no-repeat;
width:219px
}

.blank10 {
background:url(images/index_33.gif) no-repeat
}

.blank11 {
background:url(images/index_20.gif) no-repeat;
width:44px;
height:87px
}

.blank12 {
background:url(images/index_28.gif) no-repeat;
width:318px;
height:1px
}

here is the link on the html side:

<div class="home"><a href="#"><img src="images/a9.gif" alt=""></a></div>

[noahgelman]

Your links have a height and width, but they’re inline by nature, you have to set them to display: block. That will fix everything.

[mr.beck]

can you tell me where the display: block; have to go in?

[mr.beck]

easy… stupid me… just have to put in

a { display: block;
}

and its work… thanks so much… i have only use a day on it :)

[Author]

Posts