IE isn't aligning this div/ image slideshow properly :(

**skylight1** · 07-19-2011, 04:51 PM

I implemented a DD slideshow into my website here:

www.sebradesigns.com/line/index.html

I wasn't sure to post this under HTML or CSS, I figured it's a styling issue so I came here.

The image slideshow of the woman on the bottom left is aligned properly in FX, Chrome and Safari. IE however is less fortunate. I realize I may need to add conditional statements or a separate css sheet for IE, that's fine except I've never done either before. I'm not new persay at coding, just never gotten into these kind of specifics before. Also, why is it that the text takes up more room in IE? It seems more cut and contained like it should in the other three browsers...but in IE the text in my content window actually reaches the footer comment about gift certificates, why is my styling being rendered differently in IE?

I styled it to the best of my knowledge, I realize I may not have done everything by the books or the best way possible, but hey, I'm learning.

Here's cut and paste of my HTML and CSS:

HTML Code:

<html>
<head>
<title>Line Cousineau - Hair Services for North Plano</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [194, 293], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/home_image.jpg", "", "", ""],
		["images/LINE 070final.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>
</head>
<body>
	<div id="Master">
		<div id="Banner">
		</div>
		<div id="Navigation">
			<div id="tabs" >
				<ul>
					<li><a href="index.html"><span>Home</span></a></li>				
					<li><a href="services.html"><span>Services</span></a></li>
					<li><a href="refer.html"><span>Refer A Friend</span></a></li>
					<li><a href="location.html"><span>Location</span></a></li>
				 </ul>	
			</div>
		</div>
		<div id="Center">
			<div id="left">
					[COLOR="Red"]<div id="fadeshow1"></div>[/COLOR]
			</div>
			<div id="right">
				<h1 align="left">Professional Hair Stylist</h1>
					<p align="left" style="text-indent: 40px;">Traditional and fashion cuts, color & multi-dimensional color specialist, highlights & lowlights for all hair types including thinning, thick, coarse, naturally curly, frizzy and more.  To keep your hair looking great, a full line of professional haircare products are available including the new <a href="www.moptophair.com">MopTop&trade;</a> products designed to help tame dry, frizzy, unruly, color treated and chemically treated hair, without the usual build up.  </p>

				<h1 align="left">Hair Extensions</h1>
					<p align="left" style="text-indent: 40px;">Certified in a full line of 100% human hair extensions and using only the highest quality products on the market today including <a href="http://www.greatlengths.net/">Great Lengths</a>, <a href="http://www.ultratress.com/">Ultratress&trade;</a>, <a href="http://www.cinderellahair.com/">Cinderella&trade;</a>, <a href="http://www.ultratress.com/ultrastrands.htm">Ultrastrand&trade;</a> & <a href="http://www.hairlocs.com/">Hairlocs&trade;</a>. Add color and style to your hair with <a href="http://www.conditionculture.com">Featherlocks</a> hair extensions.  Choose from a variety of colors and lengths.</p>

				<h1 align="left">Professional Hair Straightening</h1>
					<p align="left" style="text-indent: 40px;">Certified in the highest quality & safest products on the market. It is important to look for a certified professional to prevent damage to hair or applying harmful chemicals to your hair. I use only the safest and highest quality products including <a href="http://www.keratincomplex.com/">Keratin Complex Smoothing Treatment&trade;</a>, <a href="http://www.keragreensystem.com/">Keragreen System&trade;</a>, and and <a href="http://www.rejuvenol.com/">Rejuvenol®</a>. </p>

<br />
			</div>
			<div id="footer">
				<h2> Free Consultations.  Gift Certificates Available. </h2>         
			</div>
		</div>
	</div>
</body>
</html>

And the css:

Code:

body {
	text-align: center;
	font: bold 11px/1.5em Verdana;
	background-image: url("images/background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-color: #453a36;
	color: ffffff;
	}
#fadeshow1 {
	left: 0px;
	top: 0px;
}

A:link {
	text-decoration: underline;
	color: #acae7d;
}
A:visited {
	text-decoration: underline;
	color:#acae7d;
}
A:active {
	text-decoration: underline;
	color:#acae7d;
}
A:hover {
	text-decoration: none; 
	color: #453a36;
}
h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #acae7d;
	font-weight:bold;
	margin:0;
	padding:0;
	}
p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #453a36;
}
h2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #453a36;
	font-weight: bold;
}
hr {
	border:none;
	border-top:1px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	}
#Master {
	width: 960px;
	height: 860px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	left: 0px;
	top: 0px;
	border-left: 2px solid white; 
	border-right: 2px solid white;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
	background-color: #453A36;
	background-image: url("images/content_background_green1.gif");
}
#Banner {
	position:absolute;
	left:0px;
	top:0px;
	width:960px;
	height:250px;
	z-index:1;
	background-image: url(images/banner.gif);
}
#Navigation {
	position:absolute;
	left:0px;
	top:250px;
	width:960px;	
	z-index:4;
}
#Left {
	position: absolute;
	left: 45px;
	top: 80px;
	width: 250px;
	z-index: 4;
}
#Right {
	position: absolute;
	left: 280px;
	top: 50px;
	width: 600px;
	z-index: 4;
}
#Footer {
	position: absolute;
	left: 0px;
	bottom: 30px;
	width: 900px;
	z-index: 4;

}
#Center {
	position: absolute;
	bottom: 30px;
	left: 30px;
	height:520px;
	width: 900px;
	z-index: 4;
	background-image: url(images/content.png);
}

#tabs {
	float: left;
	width:100%;
	background:#F9F7F3;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #C2BDAE;
}
#tabs ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;	
}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
}

#tabs a {
	float:left;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}

#tabs a span {
	float:left;
	display:block;
	padding:5px 15px 4px 6px;
	color:#453a36;
		
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
	color:#acae7d;
}

#tabs a:hover {
	background-position:0% -42px;
}

#tabs a:hover span {
	background-position:100% -42px;
}

.the_tr {
padding: 6px; 
padding-bottom: 2px; 
font:  10px/1.5em Verdana;
}
.home_image {
border: 1px solid #453a36;
}

I really appreciate anyone's input and help, thanks!
skylight1

**jscheuer1** · 07-20-2011, 05:36 AM

This is a strange situation. The page is in Quirks Mode so isn't following standards. Styles in the stylesheet for #Left with a capital L are being followed by an element on the page with an id of left with a lower case l.

But since all the browsers are apparently doing it, I guess it's not an issue here. What's pushing the slideshow over in IE is the style for the body:

Code:

body {
	text-align: center;
	font: bold 11px/1.5em Verdana;
	background-image: url("images/background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-color: #453a36;
	color: ffffff;
	}

That's not the standard way to center the page. But rather than go into how to redesign the page to standards, we can just compensate by setting the text-align left for the Left/left division.

Since even IE is following #Left for id="left", you should be able to just add it to the stylesheet - around line #90:

Code:

#Left {
	text-align: left;
	position: absolute;
	left: 45px;
	top: 80px;
	width: 250px;
	z-index: 4;
}

But if that doesn't work - and make sure to clear the cache and refresh the page before deciding, you can add it inline:

Code:

			<div id="left" style="text-align: left;">
					<div id="fadeshow1"></div>
			</div>

In either case, no conditionals are required as all other browsers ignore the inherited text-align: center from the body because the 'left' division is positioned absolutely. The default is text-align left. In other words, they're already doing it.

**skylight1** · 07-20-2011, 08:12 PM

The first option did the trick, I also reassigned Left and Right with the proper capitalization, I had no idea they were case sensitive. Thanks for that.

Out of curiosity, what's a better way to align this page? I don't plan on redesigning it since it isn't necessary, however I am curious to improve my coding for the next time.

I really appreciate your help.

**griffinwebnet** · 07-21-2011, 06:39 PM

Originally Posted by jscheuer1

That's not the standard way to center the page.

I Agree, its a bit off topic for this but in the future you may want to use the <center> tag in html so you dont run into cross browser compatibility, also on older browsers (Specifically older IE :P ), that property doesnt seem to be supported, so the center tag is the way to go.

********************

Sorry if that was a bit off topic, but its a little glitch that always irks me so i just wanted to pass the tip along.

-JL Griffin

**jscheuer1** · 07-22-2011, 12:00 AM

I disagree somewhat.

The center tag, align="center", and/or text-align: center; must (except in the case of absolute positioning or other special cases) be used in IE prior to version 6.

However, none of those three would avoid the problem encountered here. And we can pretty much forget about IE before version 6.

The thing to do these days is use a standards invoking DOCTYPE and to center elements give them explicit width and a style margin: 0 auto. Using the center tag, align=center, and text-align: center are best used only for text, not elements. The first two are deprecated anyway.

Now I would be the first to agree that this is far from ideal. It's the best we have at the moment. The old methods were ambiguous (are we centering text, elements or both?), the new ones are counterintuitive (using margin auto to center?). But they work in all browsers including IE 6 and later as long as the page has a standards invoking DOCTYPE.

Getting back to skylight1's question, I avoided that because it can get complicated, especially if you're redesigning. It's much easier to do if you start with it from the beginning.

Here's an example though:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.content {
	background-color: #ddd;
	width: 800px;
	margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">See? I'm centered but my text is aligned left.</div>
</body>
</html>

Also, whatever you do, it's best to avoid doing anything to the body. I mean you can do lots of things to it, just avoid using it to center things. So, to that degree, griffinwebnet is absolutely correct.

The rest is personal preference and current practices sort of stuff. From my point of view I tend to think that if you can make it work, you're fine. There are many who would insist that you use current standard practices. And many who would say older deprecated methods are still best.

However you do it, you often have to know what you're doing and why. Otherwise it might not work out too well cross browser. Using current standards may have a better chance of being respected by future browsers.

Thread: IE isn't aligning this div/ image slideshow properly :(

Thread Tools

Search Thread

IE isn't aligning this div/ image slideshow properly :(

Bookmarks

Bookmarks

Posting Permissions