CreativeMind
01-17-2009, 03:50 PM
Hi all!
My page render in Firefox is not center but in IE7 is fine. I have attached an image for you to look at. It is the center WHITE body is what I am talking about. Notice that it is off to the LEFT.
Here is what my external CSS looks like:
* {
border: 0;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/Background.gif);
background-position: center;
background-repeat: repeat-y;
background-color:#c0c0c0;
position: relative;
}
#wrapper1 {
width: 762px;
height: 112px;
background-color: #ffffff;
background-image: url(images/bannertop.gif);
background-repeat: no-repeat;
position: relative;
left: 120px;
top: 10px;
}
#heading1 {
height:22px;
width:191px;
left:35px;
top: 50px;
position:absolute;
}
#heading2 {
height:20px;
width:195px;
left:470px;
top: 50px;
position:absolute;
}
#wrapper2 {
width: 762px;
height: 298px;
background-color: #ffffff;
background-image: url(images/banner1.gif);
background-repeat: no-repeat;
position: relative;
left: 120px;
top: 10px;
}
#heading3 {
height:57px;
width:736px;
left:14px;
position:absolute;
}
#image1 {
height:229px;
width:149px;
left:15px;
top: 68px;
position:absolute;
}
#heading_text1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color:#000000;
left:186px;
top: 76px;
position:absolute;
}
#list1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
left:186px;
top: 110px;
position:absolute;
}
Here is what my HTML looks like:
<!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>Concept</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul {list-style:none;}
li {color:#fc0;line-height:1.2;}
li span {color:#000; display:inline-block; vertical-align:middle; padding-left: 4px;}
</style>
</head>
<body>
<div id="wrapper1">
<div id="heading1"><img src="images/heading_sage.gif"></div>
<div id="heading2"><img src="images/heading_sage2.gif"></div>
</div>
<div id="wrapper2">
<div id="heading3"><img src="images/heading_need.gif"></div>
<div id="image1"><img src="images/people1.jpg"></div>
<div id="heading_text1">Introducing Sage MIP Fund Accounting.</div>
<div id="list1">
<ul>
<li>■<span> Create the reports you need when you need them - within the system!</span></li>
<li>■<span> Enjoy easy access to data for more efficient tracking and reporting.</span></li>
<li>■<span> Maintain a clear audit trail for greater accountability.</span></li>
</ul>
</div>
</div>
</body>
</html>
Thanks in advanced!
My page render in Firefox is not center but in IE7 is fine. I have attached an image for you to look at. It is the center WHITE body is what I am talking about. Notice that it is off to the LEFT.
Here is what my external CSS looks like:
* {
border: 0;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/Background.gif);
background-position: center;
background-repeat: repeat-y;
background-color:#c0c0c0;
position: relative;
}
#wrapper1 {
width: 762px;
height: 112px;
background-color: #ffffff;
background-image: url(images/bannertop.gif);
background-repeat: no-repeat;
position: relative;
left: 120px;
top: 10px;
}
#heading1 {
height:22px;
width:191px;
left:35px;
top: 50px;
position:absolute;
}
#heading2 {
height:20px;
width:195px;
left:470px;
top: 50px;
position:absolute;
}
#wrapper2 {
width: 762px;
height: 298px;
background-color: #ffffff;
background-image: url(images/banner1.gif);
background-repeat: no-repeat;
position: relative;
left: 120px;
top: 10px;
}
#heading3 {
height:57px;
width:736px;
left:14px;
position:absolute;
}
#image1 {
height:229px;
width:149px;
left:15px;
top: 68px;
position:absolute;
}
#heading_text1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color:#000000;
left:186px;
top: 76px;
position:absolute;
}
#list1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
left:186px;
top: 110px;
position:absolute;
}
Here is what my HTML looks like:
<!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>Concept</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul {list-style:none;}
li {color:#fc0;line-height:1.2;}
li span {color:#000; display:inline-block; vertical-align:middle; padding-left: 4px;}
</style>
</head>
<body>
<div id="wrapper1">
<div id="heading1"><img src="images/heading_sage.gif"></div>
<div id="heading2"><img src="images/heading_sage2.gif"></div>
</div>
<div id="wrapper2">
<div id="heading3"><img src="images/heading_need.gif"></div>
<div id="image1"><img src="images/people1.jpg"></div>
<div id="heading_text1">Introducing Sage MIP Fund Accounting.</div>
<div id="list1">
<ul>
<li>■<span> Create the reports you need when you need them - within the system!</span></li>
<li>■<span> Enjoy easy access to data for more efficient tracking and reporting.</span></li>
<li>■<span> Maintain a clear audit trail for greater accountability.</span></li>
</ul>
</div>
</div>
</body>
</html>
Thanks in advanced!