Links moving when I hover

**charlesugwuh** · Feb 20, 2010 14:38

Hi all,

I'm having a slight issue with some CSS I'm working on.

Basically it's a simple list. I'm trying to do a change color on hover. However, the link moves down a pixel or so when I hover over it and I dont want that.

The list is nested under another ul li tag. But I've checked using firebug and there's no inheritance that would make any values change.

I'm using Firefox 3.6 and Safari 4 and I get the same effect on both.

Here's the code:

HTML:

Code:

<div class="submenu-content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

And here's the CSS.

Code:

#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content {padding: 10px; text-transform:none; font-size: 11px; color: #ffffff;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content h1 {margin: 0px 0px 10px 0px; font-family:Arial, Verdana, sans-serif; font-weight:bold; font-size: 12px; color: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul{list-style: none outside none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li{margin: 0px 0px 3px 0px; padding:0px; float:none; width: 160px; height: auto; min-height: 15px; border-bottom: 1px solid #333;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a{padding: 0px 0px 3px 10px; display:block; background: none; line-height: 16px; height: auto; font-size: 11px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; text-decoration: none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a:hover{color: #829a38;}

Thanks.

**Rayzur** · Feb 20, 2010 14:52

Hi,
It looks like you must have some inheritance issues going on. When I take the essential styles and run them in a stand alone test I get no movement in the hover states.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">

.submenu-content {
    padding:10px; 
    text-transform:none; 
    font-size:11px; 
    color:#fff;
}
.submenu-content ul{
    margin:0;
    padding:0;
    list-style:none;
}
.submenu-content ul li{
    margin:0 0 3px 0; 
    float:none; 
    width:160px; 
    height:auto; 
    min-height:15px; 
    border-bottom:1px solid #333;
}
.submenu-content ul li a{
    padding:0 0 3px 10px; 
    display:block; 
    background:none; 
    line-height:16px; 
    height:auto; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; 
    text-decoration:none;
}

.submenu-content ul li a:hover{color: #829a38;}
</style>

</head>
<body>

<div class="submenu-content">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>

</body>
</html>

**RyanReese** · Feb 20, 2010 14:56

As Ray has covered there is no reason for a hover change with the current code you gave, can you either post a link to the site in question or provide full code?

**charlesugwuh** · Feb 20, 2010 15:03

Thanks.

@Rayzur: Could you kindly point me in the direction regarding what I should be looking for i.e. concerning inheritance? I've been trawling through firebug but I cant seem to find anything, but maybe I'm not sure what to look for.

@RyanReese: The site is not live yet, i'm testing it on a local server and everything's in my dreamweaver. I could post the code from when the menu starts if that would make sense i.e. show all the nestings.

**charlesugwuh** · Feb 20, 2010 15:08

I'm sorry, it's a little lengthy. This is just the relevant code.

Full CSS:

Code:

#sh-zone-menu-content{margin:0; padding:0px 8px 0px 8px; list-style-type:none; width:auto; position: relative; display: block; font-family: Arial, Verdana, sans-serif; font-size:12px; font-weight:bold; text-transform: uppercase; background:transparent url(/assets/web/img/img_user_menu_bg_off.png) repeat-x top left; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px;}
#sh-zone-menu-content ul{margin:0px; padding:0px; list-style-type: none; height: 30px; width:auto;}
#sh-zone-menu-content ul li{float:left; margin: 0px; padding: 0px;}
#sh-zone-menu-content ul li a{display:block; color:#ffffff; text-decoration:none; padding:8px 20px 0 20px; line-height: 22px; height:27px; background:transparent url(/assets/web/img/img_user_menu_bg_divider.png) no-repeat top right;}
#sh-zone-menu-content ul li.submenu{}
/**#sh-zone-menu-content ul li a:hover{background:transparent url(/assets/web/img/img_user_menu_bg_hover.png) no-repeat top right;}**/
#sh-zone-menu-content ul li a.current{}
#sh-zone-menu-content ul li a.current:hover, #sh-zone-menu-content ul li a:hover{color:#fff; background: url(/assets/web/img/img_user_button_overlay.png) repeat-x scroll 0 0 #759023; padding:4px 20px 0 20px; margin: 4px 0px 0px 0px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px;}

#sh-zone-menu-content .sh-zone-menu-content-sub{position: absolute; left: 0px; top: 35px; width: 960px; border-top: 5px solid #829a38; padding: 0px 0px 4px 0px; 
z-index: 2; display:none; background:url(/assets/web/img/img_user_menu_background_bottom.png) no-repeat scroll left bottom;}
#sh-zone-menu-content ul li.showsubmenu .sh-zone-menu-content-sub{display:block;}

#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner{background: none repeat scroll 0 0 #2c2c2c; border-left: 1px solid #829a38; border-right: 1px solid #829a38;
padding: 0px; font-weight:normal; line-height:normal;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul{list-style:none outside none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner li{float: left; height: 310px; min-height: 310px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul.col-3 li{width: 240px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul.col-4 li{width: 180px}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul.col-3 li.divider, #sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul.col-4 li.divider{border-right: 1px dotted #444;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul li.highlight{width: 238px; background: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul.col-3 li.highlight-divider{width: 235px; background: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner ul.col-4 li.highlight-divider{width: 234px; background: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content {padding: 10px; text-transform:none; font-size: 11px; color: #ffffff;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content h1 {margin: 0px 0px 10px 0px; font-family:Arial, Verdana, sans-serif; font-weight:bold; font-size: 12px; color: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul{list-style: none outside none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li{margin: 0px 0px 3px 0px; padding:0px; float:none; width: 160px; height: auto; min-height: 15px; border-bottom: 1px solid #333;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a{padding: 0px 0px 3px 10px; display:block; background: none; line-height: 16px; height: auto; font-size: 11px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; text-decoration: none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a:hover{color: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container{background: #444; margin: 0px 0px 10px 0px; padding: 2px; width: 160px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container h1{margin: 0px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container .submenu-icon-services div{text-align: center; width: 156px; height: 73px; margin: 4px 0px 3px 2px; background: url(/assets/web/img/img_user_icon_sprite_menu_sub_services.jpg) no-repeat; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container .submenu-icon-services div.design{background-position: 0px 0px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container .submenu-icon-services div.web{background-position: 0px -90px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container .submenu-icon-services div.multimedia{background-position: 0px -180px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .submenu-icon-container .submenu-icon-services div.mobile{background-position: 0px -270px;}

#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .note{width: 216px; margin: 0px auto; }
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .note .note-top{background: url(/assets/web/img/img_icon_user_menu_postit.png) no-repeat 0px 0px; max-height: 15px; height: 15px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .note .note-body{background: url(/assets/web/img/img_icon_user_menu_postit_background.png) repeat-y; font-size: 14px; color: #527329; padding: 0px 10px; margin: 0px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .note .note-body h1{font-size: 14px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;color: #527329; padding: 0px 0px 3px 0px; margin: 0px 0px 5px 0px; border-bottom: 1px dotted #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .note .note-body p{font-size: 12px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;  font-weight: bold; color: #555; margin: 0px; padding: 0px 0px 5px 0px;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content .note .note-bottom{background: url(/assets/web/img/img_icon_user_menu_postit.png) no-repeat 0px -201px; max-height: 15px; height: 15px;}

Full HTML:

Code:

<div id="sh-zone-menu-container">
                      <div id="sh-zone-menu-content">
                        <ul>
                                <li><a href="#" class="current">Home</a></li>
                                <li class="submenu"><a href="#">Services</a>
                                <div class="sh-zone-menu-content-sub">
                                	<div class="sh-zone-menu-content-sub-inner clearfix">
                                    	<ul class="col-4">
                                        	<li class="divider">
                                            	<div class="submenu-content">
                                                	<div class="submenu-icon-container">
                                                        <div class="submenu-icon-services">
                                                        	<div class="design"></div>
                                                        </div>
                                                        <h1>Design</h1>
                                                    </div>
                                       	    		<ul>
                                                    	<li><a href="#">Link 1</a></li>
                                                        <li><a href="#">Link 2</a></li>
                                                        <li><a href="#">Link 3</a></li>
                                                        
                                                    </ul>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="divider">
                                            	<div class="submenu-content">
                                                	<div class="submenu-icon-container">
                                                        <div class="submenu-icon-services">
                                                        	<div class="web"></div>
                                                        </div>
                                                        <h1>Web</h1>
                                                    </div>
                                                    <ul>
                                                    	<li><a href="#">Link 1</a></li>
                                                        <li><a href="#">Link 2</a></li>
                                                        <li><a href="#">Link 3</a></li>
                                                        
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="divider">
                                            	<div class="submenu-content">
                                                	<div class="submenu-icon-container">
                                                        <div class="submenu-icon-services">
                                                        	<div class="multimedia"></div>
                                                        </div>
                                                        <h1>Multimedia</h1>
                                                    </div>
                                                    <ul>
                                                    	<li><a href="#">Link 1</a></li>
                                                        <li><a href="#">Link 2</a></li>
                                                        <li><a href="#">Link 3</a></li>
                                                        
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="divider">
                                            	<div class="submenu-content">
                                                	<div class="submenu-icon-container">
                                                        <div class="submenu-icon-services">
                                                        	<div class="mobile"></div>
                                                        </div>
                                                        <h1>Mobile</h1>
                                                    </div>
                                                    <ul>
                                                    	<li><a href="#">Link 1</a></li>
                                                        <li><a href="#">Link 2</a></li>
                                                        <li><a href="#">Link 3</a></li>
                                                        
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="highlight-divider">
                                            	<div class="submenu-content">
                                                	<div class="note">
                                                    	<div class="note-top"></div>
                                                        <div class="note-body">
                                                        	<h1>Heading 1</h1>
                                                            <p>Paragraph</p>
                                                        </div>
                                                        <div class="note-bottom"></div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                </li>
                                <li><a href="#">Support</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">About ContentOmni</a></li>
                          </ul>
                          <div class="sh-zone-menu-searchbox">
                           	  <script type="text/javascript">
                                function clearTextHeaderForm(field){
									if (field.defaultValue == field.value) field.value = '';
									else if (field.value == '') field.value = field.defaultValue;
								}
                                </script>                            	
                           	  <form action="" method="post" enctype="multipart/form-data">
                               	  <input type="text" name="search" value="Enter Keyword" onfocus="clearTextHeaderForm(this);" onblur="clearTextHeaderForm(this);" class="text" />
                                  <input type="submit" class="submit" value="SEARCH" />
                              </form>
                          </div>
                        </div>
                    </div>

**RyanReese** · Feb 20, 2010 15:33

Hi, I'm unable to test right now due to me having to leave, but I notice this

Code:

#sh-zone-menu-content ul li a{display:block; color:#ffffff; text-decoration:none; padding:8px 20px 0 20px; line-height: 22px; height:27px; background:transparent url(/assets/web/img/img_user_menu_bg_divider.png) no-repeat top right;}

#sh-zone-menu-content ul li a.current:hover, #sh-zone-menu-content ul li a:hover{color:#fff; background: url(/assets/web/img/img_user_button_overlay.png) repeat-x scroll 0 0 #759023; padding:4px 20px 0 20px; margin: 4px 0px 0px 0px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px;}

I notice you set a topmargin of 4px on hover, and you also lower the top padding from 8px to 4px.

I have to run now, hopefully that helps

**Rayzur** · Feb 20, 2010 15:42

Even after you compensated for the margin/padding offsets on hover that Ryan pointed out I still see no text jumping on hover with the code you posted.

There may be something lower down in the cascade that is overriding it.

Try adding the important declaration to your hover rules and see if that kills any inheritance/override issues on your end.

Code:

#sh-zone-menu-content ul li a.current:hover, #sh-zone-menu-content ul li a:hover{
color:#000; 
background:url(/assets/web/img/img_user_button_overlay.png) repeat-x scroll 0 0 #759023; 
padding:4px 20px 0 20px !important;
margin: 4px 0px 0px 0px !important; 
-moz-border-radius-topleft: 4px; 
-moz-border-radius-topright: 4px; 
-webkit-border-top-left-radius: 4px; 
-webkit-border-top-right-radius: 4px;
}

**charlesugwuh** · Feb 20, 2010 18:39

Thanks you guys. I solved the problem. It really was an inheritance issue.

@RyanReese: Yes, the top margin I set for the main menu was the issue. The third (ul li a) declaration inherited the margin from the first. I simply added another zero margin to the css code [that defined the link where I was having the issue] to override it (See below):

Code:

#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a{padding: 0px 0px 3px 10px; margin: 0px; display:block; background: none; line-height: 16px; height: auto; font-size: 11px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; text-decoration: none;}

Once I did that everything worked as it should.

@Rayzur: I'll also try this and see what happens. I think one just has to be really careful with the inheritance/override. I guess I need to pay more attention to the 'C' in 'CSS' next time.

Thanks again, 'ppreciate it.

**RyanReese** · Feb 20, 2010 22:37

Glad you figured it out

. Inheritance issues can be tricky but firebug can show you the specificity of each element (I mean which has more weight)

**Paul O'B** · Feb 21, 2010 08:21

Just to clarify some terms (without being too pedantic)

I hear "inheritance" bandied about a lot but most times it is quoted out of context. Not all properties are inherited and margins and padding are not inherited otherwise there would be utter confusion

The rules set earlier in the document will cascade through to the elements concerned and where there are conflicts those which are applied will be determined by "specificity". (The full rules can be found here.)

From the sitepoint reference:

Inheritance is a mechanism that’s separate from the cascade: inheritance applies to the DOM (Document Object Model) tree, while the cascade deals with the style sheet rules. However, CSS properties set on an element via the cascade can be inherited by that element’s child elements.

In most cases where conflicts are concerned the reason will be that rules have been set earlier in the document and are still in force on the element concerned and has nothing to do with inheritance (in most cases).

For example:

Code:

a{background:red}
#test a {color:red}

The anchor within the id of test will be red on a red background not because it has inherited anything but because you have told it earlier what it should be. (In CSS backgrounds are not inherited but are transparent by default.)

Just wanted to clarify that point

User Tag List

Thread: Links moving when I hover

Thread Tools

Display

Links moving when I hover

Bookmarks

Bookmarks

Posting Permissions