...

View Full Version : 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
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
Hi,
Can i have link of your page instead of looking coding let me view your page to have a better solution
another thing if you want images as gallery better to place all <a></a>tag inside a div with class having size of image and float left for more perfect solution i need link of your site

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
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.

Tried this but how do I get the photos to lay out 3 across? at the moment they are all stacked.

Cheers

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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum