Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Image Gallery Problems
Old 06-05-2009, 11:41 AM Image Gallery Problems
ncriptide's Avatar
Skilled Talker

Posts: 72
Name: Reggie Byrum
Location: Charlotte, NC
Trades: 0
Can someone take a look at: http://www.beaverfamilyministries.or...ly_photos.html

The Photo Page looks great on Firefox and Safari on a Mac, but on IE on Windows, the web page is shoved over to the right and everything is off-centered.

Here's the HTML Code:
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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Beaver Family Ministries, Kannapolis, North Carolina</title>
	<meta name="generator" content="BBEdit 9.0" />
    <link href="../css/internal.css" rel="stylesheet" type="text/css" />
    <link href="ajax-slideshow.css" rel="stylesheet" type="text/css" />
<script src="ajax-slideshow.js" type="text/JavaScript" charset="utf-8"></script>

	<script type="text/JavaScript" charset="utf-8">
	// <![CDATA[
	
	// -----------------------------------------------------------------------------------
	// 
	// This page coded by Scott Upton
	// http://www.uptonic.com | http://www.couloir.org
	//
	// This work is licensed under a Creative Commons License
	// Attribution-ShareAlike 2.0
	// http://creativecommons.org/licenses/by-sa/2.0/
	//
	// Associated API copyright 2002, Travis Beckham (www.squidfingers.com)
	//
	// -----------------------------------------------------------------------------------
	// --- version date: 04/30/05 ------------------------------------------------------
	
	var photoDir = "images/"; // Location of photos for gallery
	var borderSize = 6;	 // = 2x CSS border size
	
	// get current photo id from URL
	var thisURL = document.location.href;
	var splitURL = thisURL.split("#");
	var photoId = splitURL[1] - 1;
	
	// if no id in query string then set to 0
	photoId = (!photoId)? 0:photoId;
		
	// Define each photo's name, height, width, and caption
	var photoArray = new Array(
		// Source, Width, Height, Caption

new Array("1.jpg", "500", "500", "Door 1 - Click on the image to view previous or next image"),
new Array("2.jpg", "500", "500", "Door 2 - Click on the image to view previous or next image"),             
new Array("3.jpg", "500", "500", "Door 3 - Click on the image to view previous or next image"),
new Array("4.jpg", "500", "500", "Door 4 - Click on the image to view previous or next image"),
new Array("5.jpg", "500", "500", "Door 5 - Click on the image to view previous or next image"),
new Array("40.jpg", "500", "597", "Barry and Cathy - Click to view previous or next image"),
new Array("41.jpg", "600", "833", "Beaver Family - Click to view previous or next image"),
new Array("42.jpg", "479", "391", "Natalie and Family - Click to view previous or next image"),
new Array("43.jpg", "600", "848", "Leslie Beaver - Click to view previous or next image"),
new Array("8.jpg", "500", "500", "Door 8 - Click on the image to view previous or next image"),
new Array("19.jpg", "800", "509", "Cathy Leslie Natalie - Click to view previous or next image"),
new Array("26.jpg", "550", "744", "Leslie and Natalie - Click to view previous or next image"),
new Array("27.jpg", "500", "722", "Leslie Beaver - Click to view previous or next image"),
new Array("45.jpg", "550", "797", "Leslie - Click on the image to view previous or next image"),
new Array("46.jpg", "600", "399", "Leslie and Natalie - Click to view previous or next image"),
new Array("30.jpg", "600", "479", "Barry and The Girls - Click to view previous or next image"),
new Array("44.jpg", "500", "720", "Leslie Beaver - Click on the image to view previous or next image"),
new Array("32.jpg", "600", "394", "Queens For Soldiers - Click to view previous or next image"),
new Array("33.jpg", "550", "765", "Leslie and Natalie - Click to view previous or next image"),
new Array("34.jpg", "550", "764", "Natalie - Click on the image to view previous or next image"),
new Array("35.jpg", "550", "755", "Natalie - Click on the image to view previous or next image"),
new Array("38.jpg", "550", "759", "Natalie at PTL - Click on the image to view previous or next image"),
new Array("6.jpg", "500", "500", "Door 6 - Click on the image to view previous or next image"),
new Array("7.jpg", "500", "500", "Door 7 - Click on the image to view previous or next image"),
new Array("9.jpg", "500", "500", "Door 9 - Click on the image to view previous or next image"),
new Array("10.jpg", "500", "500", "Door 10 - Click on the image to view previous or next image"),
new Array("11.jpg", "500", "500", "Door 11 - Click on the image to view previous or next image"),
new Array("12.jpg", "500", "500", "Door 12 - Click on the image to view previous or next image"),
new Array("13.jpg", "500", "500", "Door 13 - Click on the image to view previous or next image"),
new Array("14.jpg", "500", "500", "Door 14 - Click on the image to view previous or next image"),
new Array("15.jpg", "500", "500", "Door 15 - Click on the image to view previous or next image"),
new Array("22.jpg", "500", "326", "Door 22 - Click on the image to view previous or next image"),
new Array("23.jpg", "400", "262", "Door 23 - Click on the image to view previous or next image"),
new Array("24.jpg", "400", "239", "Door 24 - Click on the image to view previous or next image")
);
	
	// Number of photos in this gallery
	var photoNum = photoArray.length;
	
	// Create access to 'Detect' object and a place to put instances of 'HTMLobj'
	API = new Detect();
	
	// CREATE INSTANCES & LOAD
	loadAPI = function(){
		// Instantiate HTMLobj
		API.Container		= new HTMLobj('Container');
		API.Photo			= new HTMLobj('Photo');
		API.PhotoContainer	= new HTMLobj('PhotoContainer');
		API.LinkContainer	= new HTMLobj('LinkContainer');
		API.PrevLink		= new HTMLobj('PrevLink');
		API.NextLink		= new HTMLobj('NextLink');
		API.CaptionBlock	= new HTMLobj('CaptionBlock');
		API.Counter			= new HTMLobj('Counter');
		API.Caption			= new HTMLobj('Caption');
		API.LoadImg			= new HTMLobj('LoadImg');
		
		// Show initial photo
		cyclePhoto(photoId);
	}
	onload = loadAPI;
	
	// Fade in photo when it is loaded from the server
	initFade = function(){
		// Show PhotoContainer again
		API.PhotoContainer.show();
		
		// Be certain the tween is complete before fading, too
		var fade_timer = setInterval('startFade()', 1000);
						
		// Fade photo in when ready and clear listener
		startFade = function(){
			if(API.Container._tweenRunning == false){
				clearInterval(fade_timer);
				
				// Be certain fade is done running before allowing next/previous links to work
				// This avoids rapid fade-in when users click next/previous links in quick succession
				var adv_timer = setInterval('permitNextPrev()', 500);
				
				// Permit next/previous links to function normally when fade is completed
				permitNextPrev = function(){
					if(API.Photo._fadeRunning == false){
						clearInterval(adv_timer);
						
						// Only show links if there is more than one photo in array
						if(photoNum > 1){
							API.LinkContainer.displayShow();
							document.getElementById('NextLink').onclick = nextPhoto;
							document.getElementById('PrevLink').onclick = prevPhoto;
						}
					} else {
						return;
					}
				}
				// Swap out loading animation to spare CPU cycles when hidden anyway
				API.LoadImg.setSrc("images/slideshow/start.gif");
				
				// Show caption again
				API.CaptionBlock.show();
				
				// Fade photo in
				API.Photo.fadeIn(0,15,33);
			} else {
				return;
			}
		}
	}
	
	// Prevent next/previous
	falsify = function(){
		return false;
	}
	
	// Go to next photo
	nextPhoto = function(){
		// Go to next photo
		if(photoId == (photoArray.length - 1)){
			photoId = 0;
		} else {
			photoId++;
		}
		cyclePhoto(photoId);
	}
	
	// Go to previous photo
	prevPhoto = function(){
		// If at start, go back to end
		if(photoId == 0){
			photoId = photoArray.length - 1;
		} else {
			photoId--;
		}
		cyclePhoto(photoId);
	}
	
	// Alter class of elements
	changeElementClass = function(objId,setClass) {
		document.getElementById(objId).className = setClass;
	}
	
	// Function to load subsequent photos in gallery
	cyclePhoto = function(photoId){
				
		// Swap in loading animation
		API.LoadImg.setSrc("images/slideshow/loading_ani2.gif");
		
		// Hide link container if it is not already hidden
		API.LinkContainer.displayHide();
		
		// Hide photo container and caption temporarily
		API.Photo.hide();
		API.Photo.setOpacity(0);
		API.CaptionBlock.hide();
		
		// Get dimensions of photo
		var wNew = photoArray[photoId][1];
		var hNew = photoArray[photoId][2];
		
		// Start tween on a delay
		var wCur = API.Container.getWidth() - borderSize;
		var hCur = API.Container.getHeight() - borderSize;
		
		// Begin tweening on a short timer
		setTimeout('API.Container.tweenTo(easeInQuad, ['+wCur+', '+hCur+'], ['+wNew+','+hNew+'], 7)',500);
		setTimeout('API.LinkContainer.sizeTo('+wNew+','+hNew+')',500);
		setTimeout('API.PrevLink.sizeTo('+wNew/2+','+hNew+')',500);
		setTimeout('API.NextLink.sizeTo('+wNew/2+','+hNew+')',500);
		setTimeout('API.CaptionBlock.sizeTo('+wNew+',18)',500);
		
		// Get new photo source
		var newPhoto = photoDir + photoArray[photoId][0];
		
		// Set source, width, and height of new photo
		API.Photo.setSrc(newPhoto);		
		API.Photo.sizeTo(wNew,hNew);
		
		// Set links to new targets based on photoId
		API.NextLink.setHref("#" + (photoId+1));
		API.PrevLink.setHref("#" + (photoId+1));
		API.Counter.setInnerHtml((photoId+1)+" of "+photoNum+" |");
		API.Caption.setInnerHtml(photoArray[photoId][3]);
		
		// Event listeners for onload and onclick events
		document.getElementById('Photo').onload = initFade;
		
		// Block next/previous links until permitNextPrev() has fired
		document.getElementById('NextLink').onclick = falsify;
		document.getElementById('PrevLink').onclick = falsify;
	}
	// ]]>
	</script>
</head>
<body>

<!-- Begin Container Div-->
<div id="container"> 

<!-- Begin Header Div --->
<div id="header"> <a href="../index.html"><img src="../images/header_pic.jpg" title="Beaver Family Ministries" alt="Beaver Family Ministries" /></a>
	<ul id="topNav">
    	<li><a href="../index.html">Home</a></li>
        <li><a href="about_beaver_family.html">About Us</a></li>
        <li><a href="beaver_family_testimony.html">Testimony</a></li>
        <li><a href="beaver_family_photos.html">Photos</a></li>
        <li><a href="beaver_family_music.html">Music</a></li>
        <li><a href="beaver_family_bookstore.html">Bookstore</a></li>
        <li><a href="contact_beaver_family_ministries.html">Contact Us</a></li>
    </ul>
</div> 
<!-- End headeer div-->
<!-- Begin Main Content -->
<div id="photoMainContent">

<!-- resizable container -->
<div id="Container">
<div id="LinkContainer">
<a href="#" id="PrevLink" onfocus="this.blur();" accesskey="[" title="&laquo; Previous Photo" class="plainlink"><span>Previous</span></a><a href="#" id="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo &raquo;" class="plainlink"><span>Next</span></a>
</div>
<div id="PhotoContainer"><img id="Photo" src="images/1.gif" alt="" width="300" height="150" /></div>
<div id="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</div>

<!-- counter and caption -->
<p id="CaptionBlock"><span id="Counter"></span> <span id="Caption"></span></p>
</div>
</div> 
<!-- End mainContent-->
<div id="footer">
<p class="copyright">&copy;2009 Beaver Family Ministries. All Rights Reserved.</p>
<p class="credit"><a href="http://www.ncwebpros.com" title="NC Web Pros, Web Design and Development, Mint Hill, NC">Site Design by NC Web Pros</a></p>
</div>	

</div> <!-- End Container Div-->

</body>
</html>
Here is the CSS from my "internal.css" style sheet:
Code:
@charset "UTF-8";
/* CSS Document */

body {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#container {
	width:943px;
	padding:0;
	margin:0 auto;
	height:100%;
}
#header {
	width:900px;
	margin-top:0;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 0;
	padding:0;
}
#header img {
	margin:0, auto;
	border:none;
}

.module_title {
	text-transform:capitalize;
	color:#333;
}

/******   Top Navigation    */
ul#topNav{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:70%;
	font-weight:bold;
	background:transparent url("../images/OFF.gif") repeat-x top left;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
ul#topNav li{
	display:block;
	float:left;
	margin:0;
	pading:0;}
ul#topNav li a{
	display:block;
	float:left;
	color:#4a4a4a;
	text-decoration:none;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url("../images/DIVIDER.gif") no-repeat top right;
	}
ul#topNav li a:hover {
	background:transparent url("../images/HOVER.gif") no-repeat top right;	
	}
/*******   End Top Navigation    */

#mainContent {
	margin:0;
	padding:0;
}
#photoMainContent {
	background-color:#000;
	width:900px;
	margin:0 auto;
	padding:0;
	height:100%;
}

#internalMain {
	float:left;
	display:inline;
	width: 680px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px 10px 20px;
	padding:10px;
	text-align:left;
	font-size:72%;
	min-height:575px;
}
#internalMain img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#internalMain h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}

#devotional {
	float: right;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 15px 10px 5px;
	padding:0;
	text-align:center;
	font-style:italic;
	min-height:275px;
}
#devotional img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#devotional h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}

#lifesavers {
	float: right;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 15px 10px 5px;
	padding:0;
	text-align:center;
	font-style:italic;
	min-height:275px;
}
#lifesavers img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#lifesavers h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}

#familyHistory {
	float: right;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 15px 10px 5px;
	padding:0;
	text-align:center;
	font-style:italic;
	min-height:275px;
}
#familyHistory img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#familyHistory h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}
.title {
	text-transform:uppercase;
	font-size:70%;
	font-style: italic;
	padding:5px 0 5px 5px;
	margin:0;
	border-bottom:thin solid #FFF;
}
.caption {
	font-size:70%;
	line-height: 120%;
	padding:5px;
	margin-top:0;
}
#footer {
	clear:both;
	background: transparent url(../images/footer_bkgnd.gif) top left repeat-x;
	font-size:70%;
	width: 900px;
	padding:0;
	margin:0 auto;
	min-height: 50px;
}
.copyright {
	float:left;
	clear:both;
	display:inline;
	width:450px;
	padding:0;
	margin:0;
}
.credit {
	text-align:right;
	display:inline;
	float:right;
	width:250px;
	padding:0;
	margin:0 200px 0px 0px;
}
.credit a:link {
	color:#333;
	text-decoration: none;
}
.credit a:hover {
	text-decoration:underline;
}
#bottomSection {
	padding:0;
	margin:0;
}
.book {
	font-style: italic;
	text-decoration: underline;
}
.displayed {
	display: block;
    margin-left: auto;
    margin-right: auto
}
.quote {
	font-style: italic;
	padding:20px;
	text-align:justify;
}
#pic {
	float:right;
	display:inline;
	clear:both;
	display:block;
	padding:5px;
}
.picLeft {
	width:250px;
	padding:5px;
	margin:0;
	text-align:left;
}
.picRight {
	float:right;
	padding:5px;
	margin:0;
}
quotation {
	display:block;
	line-height:2em;
	font-style:italic;
}
quote {
	quotes: '"' '"';	
}
quote:before {
	content: open-quote;	
}
quote:after {
	content:close-quote;	
}
quotee:before {
	content: " (";	
}
quotee:after {
	content: ")";	
}
/* Begin Photo Container */
.a, .a:visited {
	color:#000;
	}
#photoContainer {
	position:relative; 
	width:600px; 
	height:700px; 
	background:#888; 
	border:1px solid #000; 
	margin:10px auto;
	}
#photoContainer b {
	font-weight:normal; 
	width:600px; 
	text-align:center; 
	position:absolute; 
	bottom:250px; 
	left:0; 
	color:#eee; 
	font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; 
	letter-spacing:1px; 
	line-height:1.7em; 
	z-index:1;
	}

a.gallery, a.gallery:visited {
	display:inline; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #000; 
	width:75px; height:75px; 
	float:left; margin:7px 21px; 
	position:relative; 
	cursor:default;
	}

a.slidea {background:url(../images/Photo%20Page/thumbs/bpp01.jpg);}
a.slideb {background:url(../images/Photo%20Page/thumbs/bpp02.jpg);}
a.slidec {background:url(../images/Photo%20Page/thumbs/bpp03.jpg);}
a.slided {background:url(../images/Photo%20Page/thumbs/bpp04.jpg);}
a.slidee {background:url(../images/Photo%20Page/thumbs/bpp05.jpg);}
a.slidef {background:url(../images/Photo%20Page/thumbs/bpp06.jpg);}
a.slideg {background:url(../images/Photo%20Page/thumbs/bpp07.jpg);}
a.slideh {background:url(../images/Photo%20Page/thumbs/bpp08.jpg);}
a.slidei {background:url(../images/Photo%20Page/thumbs/bpp09.jpg);}
a.slidej {background:url(../images/Photo%20Page/thumbs/bpp10.jpg);}

a.gallery span {
	visibility:hidden; 
	display:block; 
	position:absolute; 
	width:580px; 
	height:500px; 
	top:189px; 
	left:9px; 
	color:#000; 
	background:#ccc; 
	text-align:center; 
	border:1px solid #fff; 
	font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; 
	letter-spacing:1px; 
	cursor:default;
	}

a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}

a.gallery:hover {
	white-space:normal; 
	border:1px solid #fff; 
	z-index:100;
	}

a.gallery:hover span {
	visibility:visible; 
	z-index:100;
	}

a.gallery:hover span img {
	margin:10px; 
	border:1px solid #000; 
	position:relative; 
	z-index:100;
	}

a.gallery:active, a.gallery:focus {
	border:1px solid #c00; 
	z-index:10;
	}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {
	border:1px solid #000; 
	position:relative; 
	margin:10px; 
	z-index:10;
	}
/* End Photo Container */
And here is the CSS from the "ajax-slideshow.css" file:
Code:
*{
margin:0;
padding:0}

a:link,a:visited{
color:#333;
text-decoration:none
}

a:hover,a:visited:hover{
color:#000;
text-decoration:underline
}

a.inactive:link,a.inactive:visited{
color:#CECEB5
}

#Container{
	margin:0 auto;
	padding: 0;
	position:relative;
	width:894px;
	height:100%;
	background-color:#000;
	border:3px solid #CECEB5;
	overflow:hidden
}

#LoadContainer{
height:25%;
width:50%;
position:absolute;
top:40%;
left:25%;
text-align:center;
z-index:1
}

#PhotoContainer{
visibility:hidden
}

#CaptionBlock{
height:18px;
width:582px;
text-align:left;
margin:0 auto
}
#Caption{
color:#fff;
}

#License{
margin:0 auto;
padding-top:10px;
font-size:10px;
color:#666;
border-top:1px solid #CECEB5;
width:740px;
text-align:left;
line-height:1.4em;
}

#LinkContainer{
display:none;
position:absolute;
top:0;left:0;
height:200px;
width:200px;
z-index:100;
background:url(images/slideshow/start.gif) 50% 50% no-repeat
}

#PrevLink{
z-index:100;
position:absolute;
top:0%;
left:0%;
height:200px;
width:50%;
display:block
}

#NextLink{
z-index:100;
position:absolute;
top:0%;
left:50%;
height:200px;
width:50%;
display:block
}

#PrevLink:hover,#NextLink:hover{
text-decoration:none
}

#PrevLink:hover{
background:transparent url(images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
}

#NextLink:hover{
background:transparent url(images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
}

#PrevLink span,#NextLink span{
display:none
}

img{
border:none
}

p{
font-size:11px;
padding:1em 0
}

#Wrapper{
margin:0 auto;
height:500px;
width:100%;
overflow:hidden;
position:relative
}

#Wrapper[id]{
display:table;
position:static
}

#InnerWrapper{
position:absolute;
top:50%;
left:0;
}

#InnerWrapper[id]{
display:table-cell;
vertical-align:middle;
position:static
}

#OuterContainer{
position:relative;
top:-50%
}
ncriptide is offline
Reply With Quote
View Public Profile Visit ncriptide's homepage!
 
 
Register now for full access!
Old 06-06-2009, 01:39 AM Re: Image Gallery Problems
GeekSpecialties's Avatar
Super Talker

Posts: 132
Name: Leonard
Location: Minnesota, USA
Trades: 0
The width on your container is 500px ( as shown in IE developer toolbar), the width of your header is set to 900px,
Change your container width to 900px.

Also you can't have id's with the same name (you have container twice). If you want to apply the same css use classes fro repeated styles.

Try naming the first one to wrapper or something.

Last edited by GeekSpecialties; 06-06-2009 at 01:52 AM..
GeekSpecialties is offline
Reply With Quote
View Public Profile Visit GeekSpecialties's homepage!
 
Old 06-06-2009, 02:00 PM Re: Image Gallery Problems
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
Also you can't have id's with the same name (you have container twice).
True enough. However, the 2 "containers" are not the same - he has one named #container and the other is #Container - not the same since CSS IS case-sensitive. Not a wise way to name things, but they are not treated as duplicate ID's in this case.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-07-2009, 12:22 AM Re: Image Gallery Problems
GeekSpecialties's Avatar
Super Talker

Posts: 132
Name: Leonard
Location: Minnesota, USA
Trades: 0
LadynRed, Thanks for clarifying my statement. I looked at it quickly, I could have been a little more thorough before replying.
GeekSpecialties is offline
Reply With Quote
View Public Profile Visit GeekSpecialties's homepage!
 
Old 06-07-2009, 01:09 PM Re: Image Gallery Problems
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
If it weren't for case sensitivity, you'd be dead on . I still would never recommend doing it that way though, too confusing and prone to errors.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-10-2009, 11:25 AM Re: Image Gallery Problems
ncriptide's Avatar
Skilled Talker

Posts: 72
Name: Reggie Byrum
Location: Charlotte, NC
Trades: 0
Thanks everyone! Didn't really notice the two "containers". . . I had set one up in my style sheet, then when I found the photo gallery on the internet and incorporated, I didn't notice he had name an ID container as well. . . yes, different because of case, but still something I would not normally do. . . anyway - site is fixed! Thanks so much for the advice - I really appreciate it.
ncriptide is offline
Reply With Quote
View Public Profile Visit ncriptide's homepage!
 
Old 06-10-2009, 05:39 PM Re: Image Gallery Problems
Junior Talker

Posts: 1
Trades: 0
look like problem solved
__________________
please visit
Please login or register to view this content. Registration is FREE
yufengyesup is offline
Reply With Quote
View Public Profile
 
Old 06-10-2009, 05:43 PM Re: Image Gallery Problems
ncriptide's Avatar
Skilled Talker

Posts: 72
Name: Reggie Byrum
Location: Charlotte, NC
Trades: 0
Quote:
Originally Posted by yufengyesup View Post
look like problem solved
Yes, problem solved. Thanks.
ncriptide is offline
Reply With Quote
View Public Profile Visit ncriptide's homepage!
 
Reply     « Reply to Image Gallery Problems
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.44882 seconds with 12 queries