Alignment issue in IE7

HTML & CSS
1

Hi,

I’m sure there is an easy fix for this but I’m just not sure where to apply it!

I have an image gallery that has an overlay to display some text but in IE 7 it is aligning over to the right. You can view the page here

Here is the css…


#galleryslides{
    position: relative; height: 450px; margin-left: 63px;
  }
    .galleryslide{
      position: absolute; top: 0px; left: 0px; display: none;
    }
      .galleryslide .overlay{
        position: absolute; bottom: 0px; width: 100%;
    	/* Fallback for web browsers that doesn't support RGBa */
    	background: rgb(255, 255, 255);
    	/* RGBa with 0.6 opacity */
    	background: rgba(255, 255, 255, 0.8);
    	/* For IE 5.5 - 7*/
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff);
    	/* For IE 8*/
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff)";
      }
        .galleryslide .overlay .overlaytext{

          padding: 10px;
	  text-align: center;
        }
  
  .overflowhidden{
    overflow: hidden; min-width: 640px; height: 274px; position: relative;
  }

Thanks,
Rachel

2

Try giving .overlay left:0;

.galleryslide .overlay {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
  left:0;
  bottom: 0;
  position: absolute;
  width: 100%;
}
3

Thank you, that was exactly what was missing!

:slight_smile: