CSS gallery not working in IE

halfalime

11-16-2010, 06:49 AM

Hi all,

Been working on a real simple crappy website with a gallery to sell photos.

Works in all browsers except IE where is shows the first photo in the right place then the rest below it down the page with a large gap between them.

Could someone have a look at the code below and see if they can work out why it screws out in IE.

HTML

<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>South Pacific Youth Leadership Convention - Photographs - Choir</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/stylechoir.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body >
<div id="album" style="height: 430px;">

<a href="gallery/choir/communitychoir.jpg" rel="lightbox" title="C01"><img src="gallery/choir/communitychoirthumb.jpg" class="img1" alt="Community Choir" /></a>
<p class="label1">C01</p>
<a href="gallery/choir/fullchoir1.jpg" rel="lightbox" title="C02"><img src="gallery/choir/fullchoir1thumb.jpg" class="img2" alt="Full Choir" /></a>
<p class="label2">C02</p>
<a href="gallery/choir/jamesandstudents.jpg" rel="lightbox" title="C03"><img src="gallery/choir/jamesandstudentsthumb.jpg" class="img3" alt="James and Students" /></a>
<p class="label3">C03</p>
<a href="gallery/choir/jamesdirecting.jpg" rel="lightbox" title="C04"><img src="gallery/choir/jamesdirecting.jpg" class="img4" alt="James directing" /></a>
<p class="label4">C04</p>
<a href="gallery/choir/studentchoir1.jpg" rel="lightbox" title="C05"><img src="gallery/choir/studentchoir1thumb.jpg" class="img5" alt="Student Choir" /></a>
<p class="label5">C05</p>

</div>
<div class="footer">
<p class="pgbuttons">1</p>
<p class="bttns"><a href="index.html">HOME</a></p>
</div>

</body>
</html>

CSS

.pgbuttons{
position: absolute;
top: 10px;
left: 410px;
font: 15px Verdana, sans-serif;
}

.bttns{
position: absolute;
top: 10px;
font: 15px Verdana, sans-serif;
}

#album a{
display:block;
float:left;
width:160px;
height:180px;
line-height:180px;
overflow:hidden;
position:relative;
z-index:1;
margin: 5px 5px 20px 5px;
}

#album a img.img1{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img2{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img3{
float:left;
position:absolute;
top:-10px;
left:-10px;
}

#album a img.img4{
float:left;
position:absolute;
top:-60px;
left:-250px;
}

#album a img.img5{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img6{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img7{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img8{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img9{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img10{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img11{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img12{
float:left;
position:absolute;
top:-10px;
left:-70px;
}

#album a img.img13{
float:left;
position:absolute;
top:-10px;
left:-80px;
}

#album a img.img14{
float:left;
position:absolute;
top:-50px;
left:-500px;
}

LIGHTBOX
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Many thanks in advance,
Josh

abduraooft

11-16-2010, 07:00 AM

Could someone have a look at the code below and see if they can work out why it screws out in IE.
Do you have a correct DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top of your page? Can we have a link to your page?

halfalime

11-16-2010, 07:15 AM

Hi yea i do have it just forgot to copy it before:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

santhoshj400

11-16-2010, 09:04 AM

halfalime

11-16-2010, 09:34 AM

http://lfmonline.org/wypf/index.html

Thanks

abduraooft

11-16-2010, 10:01 AM

I'd just do <ul id="album">
<li><a href="gallery/choir/communitychoir.jpg" rel="lightbox" title="C01"><img src="gallery/choir/communitychoirthumb.jpg" alt="Community Choir"></a>
<span>C01</span>
</li>
<li><a href="gallery/choir/fullchoir1.jpg" rel="lightbox" title="C02"><img src="gallery/choir/fullchoir1thumb.jpg" alt="Full Choir"></a>
<span>C02</span></li>
<li><a href="gallery/choir/jamesandstudents.jpg" rel="lightbox" title="C03"><img src="gallery/choir/jamesandstudentsthumb.jpg" alt="James and Students"></a>
<span>C03</span></li>
<li><a href="gallery/choir/jamesdirecting.jpg" rel="lightbox" title="C04"><img src="gallery/choir/jamesdirecting.jpg" alt="James directing"></a>
<span >C04</span></li>
<li><a href="gallery/choir/studentchoir1.jpg" rel="lightbox" title="C05"><img src="gallery/choir/studentchoir1thumb.jpg" alt="Student Choir"></a>
<span>C05</span>
</li>
</ul> and set float:left;list-style:none; to #album li
Have a try with that.

halfalime

11-22-2010, 08:45 AM

abduraooft

11-22-2010, 10:08 AM

Did you set float:left; to the list items? Please update the online version.

halfalime

11-23-2010, 06:52 AM

Did you set float:left; to the list items? Please update the online version.

Hey I have updated it but have only had time to do it to the Choir photos page.

The rest are all the same as before.

Thanks for your help.

abduraooft

11-23-2010, 07:49 AM

It's due to the unwanted properties in your original CSS. If you remove everything except what I've said to add and a *{margin:0;padding:0}, you'll get the result!

eg: the highlighted properties should be removed.
* {
clear:both;
}
#album {
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
position:relative;
width:510px;
}

PS: Don't you have firebug (http://getfirebug.com)?

halfalime

11-27-2010, 11:01 PM

Hi,

Im stil having trouble getting this to display right in IE. Never been very good getting things to work with IE. If someone could suggest what my problem in IE is that would be great.

Can I use firebug to figure out the problems in IE?