fudgematico fudgematico - 5 years ago 163
HTML Question

CSS Hovering over box makes text jitter

I have a bit of problem with my text working with the boxes in my code.
Here is the demo: http://jsfiddle.net/K6wy3/1/

That is the slice of code that I am having a problem with. I have got the hovering over box working correctly but the text keeps flashing and jittering when you hover over it. Any solutions?

Thanks in advance.
CSS:

ul {list-style: none; font-family: Arial,Helvetica,sans-serif,serif; font-size: 12px color: #000;}
a.exp {width: 145px; height: 34px; position: absolute; top: 0px; left: 0px;
opacity:0.0; filter:alpha(opacity=0); z-index: 100;}
div.exp {display: none; position: absolute; top: 100px; left: 0px;}
a.exp:hover + div.exp {display: inline; z-index: 300;}
#wrap:hover > a.exp {display: inline; position: absolute; top: 0px; left: 0px; width: 787px; height: 450px;
opacity:100.0; filter:alpha(opacity=100); z-index: 200;}
#wrap:hover > .exp {display: inline;}
img.allcategoriesBTN:hover {z-index: 0;}
.topHalf {
background-color: #222;
opacity:0.0;
filter:alpha(opacity=00);
}
.botHalf {
background-color: #555555;
}
.background {
position: absolute;
top: -2px;
left: -3px;
}
.backbox {
padding: 0;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
width: 787px;
height: 34px;
color: #000;
float:left;
background-color: #999;
}


HTML:

<div id="wrap">
<a class="exp" href="#url" tabindex="1">
<TABLE class="background" width=100.5% height=100% cellpadding=0 cellspacing=0 border=0>
<TR>
<TD width=100.5% height=8% class="topHalf">&nbsp;</TD>
</TR>
<TR>
<TD width=100.5% height=92% class="botHalf">&nbsp;</TD>
</TR>
</TABLE>
</a>
<div class="exp">
<ul id="list">
<li><a href="http://www.google.co.uk/">Google</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<img class="allcategoriesBTN" src="http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2">
</div>
</div>

Answer Source

Problem Solved: It appears that the tags I was using weren't selecting the #list properly. I have simply formatted the HTML properly and used a :hover css function on the #list to stop the Jittering.

html {-webkit-animation: safariSelectorFix infinite 1s;}
        @-webkit-keyframes safariSelectorFix {
        0% {zoom:1;} 
        100% {zoom:1;}
        }

        /* Line Brake (All Catergories) */
        ul {list-style: none; font-family: Arial,Helvetica,sans-serif,serif; font-size: 12px color: #000;}
        a.exp {width: 145px; height: 34px; position: absolute; top: 0px; left: 0px; 
               opacity:0.0; filter:alpha(opacity=00); z-index: 100;}
        #list {visibility: hidden; position: absolute; top: 100px; left: 0px;  z-index: 200;}
        a.exp:hover + #list {visibility: visible;}
        #wrap:hover > a.exp {position: absolute; top: 0px; left: 0px; width: 787px; height: 450px; 
                             opacity:1.0; filter:alpha(opacity=01);}
        #wrap:hover > #list {visibility: visible;}
        img.allcategoriesBTN:hover {z-index: 0;}

        .topHalf {
            background-color: #222;
            opacity:0.0;
            filter:alpha(opacity=00);
        }
        .botHalf {
            background-color: #555555;
        }
        .background {
            position: absolute;
            top: -2px;
            left: -3px;
        }

        .backbox { 
            padding: 0;
            margin: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0px;
            width: 787px;   
            height: 34px;
            color: #000;
            float:left;
            background-color: #111;
        }

    img.allcategoriesBTN {
        width:140px;
        height:34px;
        background: url(http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2) 0 0;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0px;
        left: 0px;
    }

HTML:

<div id="wrap">
<img class="allcategoriesBTN" src="http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2">
<a class="exp" href="#url" tabindex="1">
<TABLE class="background" width=100.5% height=100% cellpadding=0 cellspacing=0 border=0>
 <TR>
    <TD width=100.5% height=8% class="topHalf">&nbsp;</TD>
 </TR>
 <TR>
    <TD width=100.5% height=92% class="botHalf">&nbsp;</TD>
 </TR>
</TABLE>
</a>
<ul id="list">             
    <li><a href="http://www.google.co.uk/">Google</a>
    <li><a href="musings.html">Musings</a>
    <li><a href="town.html">My town</a>
    <li><a href="links.html">Links</a>
</ul>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download