Question

I have an issue with two different browsers. I have attached snapshots of issues:
When I use the following css I get image1:

.support-data-text img, .support-data-text select {
float:left
}
/* this is for dropdown list */
form#saveSupport select {
    height: 29px;
    width: 234px;
    position: absolute;
}

form#saveSupport input{float: left; width: 243px;}

/* this is for the img we are using for dropdown list */
form#saveSupport .select_game { background: url(../images/select-status.png) no-repeat;
   width: 223px; position: absolute; height: 29px; line-height:29px;
   padding: 0 0 0 10px; color: #333; font-size:12px; overflow: hidden; 
} 

and when i add margin-left: 18% to form#saveSupport .select_game Chrome shows proper alignment of dropdown list image but not the actual dropdown list whereas Firefox displace the drodown list to right side. (Image2)

Kindly help me with the solution. I would be thankful!

Thanks,
Vikram

Answer 1

Hi I think you set position:relative to parent element and for child element set position:relative

I think your Parent Div is this

.support-data-text{
position:relative;
}

and now set to child div absolute position and set to left right top bottom according to your design .