View Full Version : Hovering over the nav buttons moves other elements

05-16-2011, 04:06 AM
Hey all,

got a problem, I put in some hover buttons for my top nav, the only change is a simple shadow in the bottom of the button. when you hover over a button it moves everything inside my container.

Why is this happening? You can check it out here, pvdemos.com
Any advice would be appreciated.


05-16-2011, 04:17 AM
set a width for the "page" at 960px


set a width for the li
then set a width for the ul

I'm assuming your using li inline? you should also:

nav ul {
width: 400px; /* for 5 li, 5x80=400 */

nav li {
width: 80px; /* sets a defined width */
float: left; /* pushes the li completely to the left */
display: inline; /* inline */

you also have to either wrap the li's in a div class="clearfix" or just stick a <br clear="all"/> to fix the float problem

edit: i just took a look at your site

05-16-2011, 04:27 AM
try defining a height for your nav li. right now, your nav li's are at 50px. when it hovers, the li becomes 72px.

05-16-2011, 06:19 AM
try defining a height for your nav li. right now, your nav li's are at 50px. when it hovers, the li becomes 72px.

Aurora, you are amazing lol.
Thanks so much, gave it a height and width and works fine now. Check it out, pvdemos.com

Also, if you would, please critique. It's the only way I'm going to get better. What would you change? Am I added things not necessary, or is there stuff I could have done in a more simple way?

Thanks again,

Edit: just noticed, the social network images are links, but if you hover over the middle of them it doesn't display that it's clickable unless you hover your mouse over the bottom or top of the image. :/

05-16-2011, 10:28 PM
ul#hover-tab {
position: relative;
padding: 0;
width: 500px;
height: 498px;

#hover-tab li {
float: left;
list-style: none;

#hover-tab li a {
float: left;
padding: 9px 21px;
background-color: #eee;
color: #999;
font-size: 9px;
text-align: center;
text-transform: uppercase;
border-right: 1px solid #fff;

#hover-tab li a:hover {
background-color: #f60;
color: #fff;

li#one a, li#one a:hover {
background-color: #e5e5e5;
color: #555;

#hover-tab li a img {
position: absolute;
left: 0;
top: 30px;
width: 500px;
height: 460px;
clear: left;
margin-left: -9999px;
padding: 1px;
border: 3px solid #e5e5e5;

li#one a img, #hover-tab li a:hover img {
margin-left: 0;

li#two a:hover img, li#three a:hover img {
border-color: #f60;

05-16-2011, 10:31 PM
you can also set a z-index: 100, if its a float or of that related problem