Question

When hovering over the menu links, the entire DIV moves upwards in IE 7. Everything is fine in Chrome, IE 8,9.

when you hover over the Stores link. the DIV’s LOGO, Search, Basket moves upwards.

here is the CSS i have..

.storefinderdropdown { position:absolute; top:8px; float:none; width:270px; height:43px; border:5px solid #F1F1EF; background:#F1F1EF; z-index:10; margin:20px 0 0 335px;  font-size:10px; font-weight:bold; text-indent:3px; padding:0; display:block; }
.storefinderdropdown .SLErrorMsg { display:none; color:#f00; line-height:20px;}
.storefinderdropdown .SLbutton { position:relative;  display:inline; float:left; }
.storefinderdropdown .SLbutton input{ float:left; vertical-align:middle; }
.storefinderdropdown .SLbutton a{ float:left; margin:1px 0 0 3px; line-height:10px;  color: #fff !important; border: none; cursor:pointer; font-weight:bold; width:42px; height:14px;  background-image: linear-gradient(bottom, #335649 13%, #335649 57%, #335649 79%); background-image: -o-linear-gradient(bottom, #335649 13%, #335649 57%, #335649 79%); background-image: -moz-linear-gradient(bottom, #335649 13%, #335649 57%, #335649 79%); background-image: -webkit-linear-gradient(bottom, #335649 13%, #335649 57%, #335649 79%); background-image: -ms-linear-gradient(bottom, #335649 13%, #335649 57%, #335649 79%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, #335649), color-stop(0.57, #335649), color-stop(0.79, #335649)); background-color:#335649; border-radius:3px; padding: 5px; }

Answer 1

Well, i tried all of your suggestion… none of them worked out for me. the problem
was causing because the #menubar DIV was outside of the #logo, #searchbar, #basket DIV’s and it was before all of the DIV.

what i did was, just place the div after all those DIV’s and adding one more DIV wrapper around it so it does not move.

Anyway, Thank you guys for your suggestions. Really appreciate it.