Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS gallery not working in IE

    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
    Code:
    <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
    Code:
    .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
    Code:
    #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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 at the top of your page? Can we have a link to your page?
    Last edited by abduraooft; 11-16-2010 at 07:19 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi yea i do have it just forgot to copy it before:

    Code:
    <!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">

  • #4
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by halfalime View Post
    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
    Code:
    <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
    Code:
    .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
    Code:
    #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

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd just do
    Code:
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    I'd just do
    Code:
    <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

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Did you set float:left; to the list items? Please update the online version.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's due to the unwanted properties in your original CSS. If you remove everything except what I've said to add and a
    Code:
    *{margin:0;padding:0}
    , you'll get the result!

    eg: the highlighted properties should be removed.
    Code:
    * {
    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?
    Last edited by abduraooft; 11-23-2010 at 07:53 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •