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:
/* 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:
<!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>
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:
/* 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:
<!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>