Having problems with getting my margin-top to be cross browser compatible/

Question

so for the HTML I have

<section id="slider">
    <div class="rslides_container">
  <ul class="rslides" id="slider1">
    <li><img src="images/IMG_5858.jpg" alt="The Process"></li>
    <li><img src="images/IMG_5642.jpg" alt="Pieces of a Quilt"></li>
    <li><img src="images/IMG_5764.jpg" alt="Here's Looking at You"></li>
    <li><img src="images/IMG_5847.jpg" alt="Which Way Do I Go"></li>
    <li><img src="images/IMG_5851.jpg" alt="Which Way Do I Go"></li>        
    <li><img src="images/IMG_5659.jpg" alt="Which Way Do I Go"></li>                
    <li><img src="images/IMG_5664.jpg" alt="Which Way Do I Go"></li>                        
  </ul>
</div>

</section>

and for the css I have

#slider
{
    width:585px;
    background-color:#e0e0e0;   
    padding:11px;
    display:block;
    float:left;
    margin-left:27px;
    margin-top:-621px;
}

any idea why in Chrome it is looking fine but in FF the margin-top is slightly higher and in IE it is even higher than FF and Chrome. Any idea how to fix this?

Answer 1

you need to wrap aside element in a div and then give a float:left; and remove positoin:absolute and margin:left from #slider and use same margin properties you have used for aside element.

Check the DEMO.

#slider
{
background-color:#e0e0e0;   
float:left;
margin:25px 0 0 40px;
padding:0 12px;
width:30%;
/*margin-left:370px;
margin-top:80px;
position:absolute;*/
}

.wrap{float:left;}/*contain all aside element*/