misaligned div in firefox

[jim9]

Does any one know why does #slide_frame appear in the center when checking the page with IE6 & IE7 but it appears in the left side when checking the page with firefox?website link : bustan .co.ukCSS:

/************************************************************//*						 generic						  *//************************************************************/Body{margin:0;padding:0;text-align:center;font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#222222;background-color:#fff;}#wrapper{width:970px;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;padding:0 7px;border:0px solid #ccc;text-align:left;background-image:url('img/bg.png');}.clear{clear:both;margin:0;padding:0;border:0px solid red;}/************************************************************//*						 header						   *//************************************************************/#header, #header a, #header img{margin:0;padding:0;border:0 solid red;width:970px;height:135px;}/************************************************************//*						 top menu						 *//************************************************************/#top_menu{ width:970px;height:35px;margin:0;padding:0;border:0px solid red; background-color:#444;line-height:35px;text-align:center;}#nav{height:35px;margin:0 0 0 30px;padding:0;border:0px solid red;list-style:none;}#nav li{position:relative;width:150px; background-color:#444;margin:0;padding:0;border:0px solid red;float:left; z-index:11;}#nav a:link, #nav a:visited, #nav a:active{display:block;background-color:#444;margin:0;padding:0 10px;border-right:1px solid #222;border-bottom:1px solid #222;border-top:1px solid #666;border-left:1px solid #666;color:#fff;text-decoration:none;width:128px;line-height:33px;font-weight:700;}#nav a:hover{background-color:#000;}#nav ul{position:absolute;left:0;margin:0;padding:0;border:0px solid red;list-style:none;display:none;}#nav ul li{position:relative;width:150px; background-color:#444;margin:0;padding:0;border:0px solid red;float:left;z-index:10;}#nav ul a:link, #nav ul a:visited, #nav ul a:active{display:block;background-color:#444; margin:0;padding:0 10px;border-right:1px solid #222; border-bottom:1px solid #222;border-top:1px solid #666; border-left:1px solid #666;color:#fff;text-decoration:none; width:128px;line-height:33px; font-weight:700;}#nav ul a:hover{background-color:#000;}/************************************************************//*						 content						  *//************************************************************/#content{margin:0;padding:10px;border:0 solid red;text-align:left;background-color:#fff;}/************************************************************//*						 left side						*//************************************************************/#left_side{margin:0;padding:10px;border:1px solid red;text-align:left;width:210px;height:100%;float:left;}#left_menu{ width:200px;margin:25px 0 0 0;padding:1px;border:1px solid #000000; background-color:#ffffff;line-height:35px;text-align:center;}#left_nav{margin:0 0 0 0px;padding:0;border:0px solid red;list-style:none;}#left_nav li{position:relative;width:200px; background-color:#444;margin:0;padding:0;border:0px solid red;z-index:10;}#left_nav a:link, #left_nav a:visited, #left_nav a:active{ display:block;background-color:#444; margin:0;padding:0 10px;border-right:1px solid #222; border-bottom:1px solid #222;border-top:1px solid #666;border-left:1px solid #666;color:#fff;text-decoration:none; width:178px;line-height:33px;font-weight:700;}#left_nav a:hover{background-color:#000;}#left_nav ul{background-color:#555;margin:0;padding:0;border:0px solid red; list-style:none;display:none;}#left_nav ul li{position:relative;width:150px; background-color:#444;margin:0px auto;padding:0;border:0px solid red; z-index:10;}#left_nav ul a:link, #left_nav ul a:visited, #left_nav ul a:active{display:block;background-color:#444; margin:0;padding:0 10px;border-right:1px solid #222; border-bottom:1px solid #222;border-top:1px solid #666; border-left:1px solid #666;color:#fff;text-decoration:none; width:128px;line-height:33px; font-weight:700;}#left_nav ul a:hover{background-color:#000;}/************************************************************//*						 right side					   *//************************************************************/#right_side{position:relative;margin:0;padding:10px;border:1px solid red;text-align:center;width:680px;float:left;}#slide_frame{margin:10px 10px 10px 10px;padding:0px;border:0px solid red;height:414px;width:554px;background-image:url('img/web_photos_frame.gif');text-align:left;}/************************************************************//*						 footer						   *//************************************************************/#footer{margin:0;padding:10px;border:0px solid red;text-align:center;width:950px;height:30px;background:#888;color:#fff;font-size:11px;}#footer a{margin:0;padding:0px;border:0px solid red;color:#fff;}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<title>Home - Bustan</title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<meta name="Keywords" content="" />	<meta name="Description" content="" />	<link rel="icon" href="" type="image/png" />	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />	<link rel="stylesheet" type="text/css" href="style.css" />		<script type="text/javascript" src="js/jquery.js"></script>	<script type="text/javascript">$(document).ready(function () {			$('#nav li').hover(		function () {			//show its submenu			$('ul', this).slideDown(500);		}, 		function () {			//hide its submenu			$('ul', this).slideUp(300);					}	);	});	</script>		<script type="text/javascript">$(document).ready(function () {			$('#left_nav li').hover(		function () {			//show its submenu			$('ul', this).slideDown(500);		}, 		function () {			//hide its submenu			$('ul', this).slideUp(300);					}	);	});	</script></head><body><div id="wrapper"><!-- start of wrapper -->	<div id="header"><!-- start of header --><a href="index.html"><img src="img/header.gif" alt="Bustan" /></a></div><!-- end of header -->	<div id="top_menu"><!-- start of top menu -->		<ul id="nav">			<li><a href="">Item</a></li>			<li><a href="">Item</a>				<ul>					<li><a href="">Sub Item1</a></li>					<li><a href="">Sub Item2</a></li>					<li><a href="">Sub Item3</a></li>					<li><a href="">Sub Item4</a></li>				</ul>					</li>			<li><a href="">Item</a></li>			<li><a href="">Item</a></li>		</ul>	</div><!-- end of top menu -->	<div class="clear"></div>	<div id="content"><!-- start of content -->		<div id="left_side"><!-- start of left site -->			<div id="left_menu"><!-- start of left menu -->				<ul id="left_nav">					<li><a href="">Item</a></li>					<li><a href="">Item</a>						<ul>							<li><a href="">Sub Item1</a></li>							<li><a href="">Sub Item2</a></li>							<li><a href="">Sub Item3</a></li>							<li><a href="">Sub Item4</a></li>						</ul>					</li>					<li><a href="">Item</a></li>					<li><a href="">Item</a></li>				</ul>			</div><!-- end of left menu -->		</div><!-- end of left site -->		<div id="right_side"><!-- start of right site -->			<div id="slide_frame"></div>		</div><!-- end of right site -->		<div class="clear"></div>	</div><!-- end of content -->	<div id="footer">		<p>Design by <a href="http://www.bustan.co.uk">Bustan.co.uk</a></p>	</div></div><!-- end of wrapper --></body></html>

Thank for the help.

[HungryMind]

Hi!In This Case! Don't Use MARGIN For All Sides.Use "margin: 0 auto;" For Centering This DIV.

#slide_frame{/* margin:10px 10px 10px 10px; */margin: 0 auto;padding:0px;border:0px solid red;height:414px;width:554px;background-image:url('img/web_photos_frame.gif');text-align:left;}

[jim9]

Thank you HungryMind but I want to know why the "text-align:center;" did not work in Firefox?

[Ingolme]

As the property name indicates, "text-align" is only intended to align text and other elements that behave like text (inline elements)

[dsonesuk]

IE incorrectly uses text-align to align elements, but it should be only used for text only 'text-align:, as you found out other browser follow this rule correctly, and will not affect the alignment of an element, and this is why margin: 0 auto; is used.

[HungryMind]

Hi!"text-align:center;" Not Only Works For TEXT...It'll Work For "image", "div", "table" Or Any Other Element etc etc...Except CSS: Background-Image or My be Anything Else...If U Want To Set Position Of Your CSS: background-image...So Read This TutorialAnd It's Not True That "text-align:center;" did not work in Firefox."Because! U Were Using It For CSS: Background-Image...That's Why It Was Not Working...

[jim9]

Now, It is clear. HungryMind, Ingolme and dsonesuk thank you very much guys.

[Ingolme]

Hi!"text-align:center;" Not Only Works For TEXT...It'll Work For "image", "div", "table" Or Any Other Element etc etc...Except CSS: Background-Image or My be Anything Else...If U Want To Set Position Of Your CSS: background-image...So Read This TutorialAnd It's Not True That "text-align:center;" did not work in Firefox."Because! U Were Using It For CSS: Background-Image...That's Why It Was Not Working...

You should get your facts straight: The text-align property will only align inline elements.It will not align <div> or <table> elements in any standards compliant browser. Images are inline, so it will align images that are inside whichever element that has text-align set.

[dsonesuk]

And It's Not True That "text-align:center;" did not work in Firefox."Because! U Were Using It For CSS: Background-Image...That's Why It Was Not Working...

"And It's Not True That "text-align:center;" did not work in Firefox." then this topic was pointless, and not required then.div element did not align to center because it had a background-image? think you will find if you remove the background image you will find the div element container STILL align to the left.

[HungryMind]

HI!I Apologize! My Mistake :SHere Is An Issue With Open Source Browsers Like firefox, google chrome etc...Thnks 4 Guide Me Too Guys :)But! In IE 6.0, text-align: center; does align div, img, table

[Ingolme]

But we all know that Internet Explorer 6 is the biggest headache for any decent web developer.

[dsonesuk]

IE text-align:centerIE6: table = yes; div=yes; img=yes;IE7: table = yes; div=yes; img=yes;IE8: table = no; div=no; img=yes;