CODEWITHSUNDEEP
css
patel.milanb
patel.milanb

Reputation: 5992

When hover over links, DIV moves in IE7

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; }

Upvotes: 0

Views: 2308

Answers (3)

ojhasaurav
ojhasaurav

Reputation: 11

I resolved similar issue with display:inline-block on main css container's stylesheet where the div was located.

Upvotes: 0

patel.milanb
patel.milanb

Reputation: 5992

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.

Upvotes: 1

Mark Seah
Mark Seah

Reputation: 542

I have used developer tools in I.E. to help you trouble shoot your problem.

It appears the problem lies with the margin which you have set for #header and .logo 

   #header .logo{
    padding-bottom:0px;
    margin-top:15px;
    ....
    }

A quick fix for this problem in I.E. and still expects the same result in other browser is to replace margin-top with padding-top for #header and .logo .

Hope this help.

Upvotes: 1

Related Questions