Margin:0 auto ,works perfectly in Firefox but not in IE

**suthaharmca** · 06-04-2009, 11:02 AM

Hai

I'm designing a web site and i have centered my page using margin:auto it works fine in firefox and opera but its not proper in IE
after surfing a lot of forums i found that the solution is to add
{text-align:center} but even after adding this to wrapper i couldn't get the exact output in IE it remains the same i think i have gone wrong..kindly help me in solving this.

Thanks in advance for helping me to solve this..

Below i have posted my CSS code:

Code:

/* CSS Document */

* {
  margin: 0;
  padding: 0;
}
#wrap {
text-align:center;
}
body
{
font-size:70%;
font-family:Arial, Helvetica, sans-serif;
color:#010101;
background-color:#C8C8C8;

}
#banner
{
 width:786px;height:103px;
 
 background:url(../images/banner_bg.gif) repeat-x;
 position:relative;
 margin:0 auto; 
}
#logo1
{
width:534px;height:103px;
 background:url(../images/banner_logo.gif) no-repeat;
 background-position:left;
 position:relative;
}
#logo2
{
width:786px;height:103px;
 background:url(../images/banner_text.gif) no-repeat;
 background-position:right;
 position:relative;
}
#left_border
{
	width:816px;
	height:800px;
	background:url(../images/left_corner.gif) repeat-y;
	background-position:left;
	position:relative;
	margin:0 auto;

}
#right_border
{
	width:816px;
	height:800px;
	background:url(../images/right_corner.GIF) repeat-y;
	background-position:right;
	position:relative;
	margin:0 auto;
}
#menu
{
	width:786px;
	height:33px;
	background:url(../images/menu_bar.gif) repeat-x;
	background-position:left;
	position:relative;
    margin:0 auto;
}
#menu ul
{
list-style:none;
}
#menu li
{
list-style:none;
display:block;
float:left
}
#menu li a
{
display:block;
float:left;
color:#FFFFFF;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
padding:10px 10px 0 15px;
text-decoration:none;
}
#menu li a span
{
display:block;
float:left;
padding:0 15px 0 6px;
}
#menu li a:hover
{
display:block;
float:left;					
background:url(../images/menu_over.gif) no-repeat;
height:23px;
color:#F9DABE;
}
#flash
{
 width:784px;height:103px;
position:relative;
margin:0 auto;
}
#left_content
{
width:200px;
height:510px;
background-color:#DFDDDB;
margin:50px 0 0 17px;
}
#main_content
{
width:565px;
height:510px;
background:url(../images/Home_logo.gif) #FFFEFE no-repeat;
float:left;
margin:-49px 0 0 210px;
}
#main_text
{
text-align:left;
width:555px;
height:510px;
float:left;
margin:50px 0 0 10px;
}
#title_text
{
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
}
p
{
text-indent:10pt;
}
#cv_img
{
width:171px;
height:49px;
}

And hers my HTML Code:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Xplore My profile</title>
<link href="Scripts/sytle.css"rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="left_border">
  <div id="right_border">
         <div id="banner">
             <div id="logo1">
                   <div id="logo2"> </div>
	         </div>
         </div>
         
         <div id="menu">
           <ul>
             <li><a href="#" class="current"><span>Home</span></a></li>
             <li><a href="#"><span>About Me</span></a></li>
             <li><a href="#"><span>Projects</span></a></li>
             <li><a href="#"><span>Contact Me</span></a></li>
             <li><a href="#"><span>Site Map</span></a></li>
           </ul>
         </div>
		 <div id="flash">
		 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="784" height="146" title="main_flash">
           <param name="movie" value="http://www.estetica-design-forum.com/images/flash.swf" />
           <param name="quality" value="high" />
           <embed src="http://www.estetica-design-forum.com/images/flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="784" height="146"></embed>
         </object>
		 </div>
		 
		<div id="left_content">
		<div id="cv_img">
		<img src="http://www.estetica-design-forum.com/images/Download_cv.gif" />
		</div>
		 <div id="main_content">

		 <div id="main_text">
		 <p class="float">"Hai i am Suthahar Completd MCA in Vysya College(2008),this website reveals my complete profile,iam intrested in WEB designing,Development,Digital Designing. i have skilled with several areas such as .Net, HTML, Photoshop, CSS,C,C++..</p>
		 
		 
		 <p>This site holds my complete Profile and you can xplore more about me here.. I am a Web application developer,system application developer,website designer, Software programmer from chennai. I am skilled in latest technologies,Software Packages,languages.The following are the various several areas i am involved in.</p>
		 <br/>
		 <div id="title_text">
Microsoft Technologies:
</div>
DOT NET 2005[Well strong in ASP.Net 2.0] Visual Basic 6.0
<div id="title_text">
Database:
</div>
Sql Server 2005,MS-Access
<div id="title_text">
Web tools:
</div>
HTML,CSS,Java Script
<div id="title_text">
Multimedia Package:
</div>
Adobe Photoshop,Macromedia Flash MX,Dreamviewer
<div id="title_text">
Languages:
</div>
C,C++,Java
<div id="title_text">
Packages:
</div>
MS Office Tools
<p><br/>
I Own a WAP Site for mobile downloads,this site is well optimized to browse in mobile browsers.</p>

		 </div>
		 </div>

    </div>
		
	
  </div>
</div>
</div>

</body>
</html>

Thread: Margin:0 auto ,works perfectly in Firefox but not in IE

Thread Tools

Search Thread

Margin:0 auto ,works perfectly in Firefox but not in IE

Bookmarks

Bookmarks

Posting Permissions