hpvic03
Technical User
- Aug 2, 2006
- 89
I'm working a new website, and I can't get the css positioning to work. This works perfectly in firefox, but screws up in ie6, but the css validates. I want my site to be centered in the viewer's browser, but everything still needs to be aligned. I have two parts to the top banner, pageBanner and bannerLeft. Then I have a "wrapper" which wraps all the text in a bordered box. The container is there to help center it. The website is at
Here is my positioning code:
CSS:
body {
margin-top:10px;
text-align: center;
}
#container {
position:relative;
margin: 0 auto;
margin-top:0px;
text-align:left;
width:800px;
height:auto;
}
#pageBanner {
position:relative;
background-image: url(../images/pageBanner/right.png);
margin-left:125px;
width:650px;
height:58px;
}
#bannerLeft {
position:absolute;
background-image: url(../images/bannerLeft/bannerLeft.png);
margin-left:-10px;
width:135px;
height:58px;
}
#wrapper {
position:relative;
height:auto;
margin-bottom:10px;
padding-bottom:10px;
margin-left:125px;
width:648px;
border-bottom: 1px #663300 solid;
border-right: 1px #FFE0C1 solid;
border-left: 1px #FFE0C1 solid;
min-height:250px;
}
HTML/CFML code:
<body class="main">
<div id="container">
<div id="bannerLeft"></div>
<div id="navTop">
<cfinclude template="includes/navTop.cfm"></div>
<div id="pageBanner"></div>
<div id="leftNav">
<cfinclude template="includes/leftNav.cfm"></div>
<div id="wrapper">
Dynamic text
</div>
</div>
</body>
Any help will be greatly appreciated!
Here is my positioning code:
CSS:
body {
margin-top:10px;
text-align: center;
}
#container {
position:relative;
margin: 0 auto;
margin-top:0px;
text-align:left;
width:800px;
height:auto;
}
#pageBanner {
position:relative;
background-image: url(../images/pageBanner/right.png);
margin-left:125px;
width:650px;
height:58px;
}
#bannerLeft {
position:absolute;
background-image: url(../images/bannerLeft/bannerLeft.png);
margin-left:-10px;
width:135px;
height:58px;
}
#wrapper {
position:relative;
height:auto;
margin-bottom:10px;
padding-bottom:10px;
margin-left:125px;
width:648px;
border-bottom: 1px #663300 solid;
border-right: 1px #FFE0C1 solid;
border-left: 1px #FFE0C1 solid;
min-height:250px;
}
HTML/CFML code:
<body class="main">
<div id="container">
<div id="bannerLeft"></div>
<div id="navTop">
<cfinclude template="includes/navTop.cfm"></div>
<div id="pageBanner"></div>
<div id="leftNav">
<cfinclude template="includes/leftNav.cfm"></div>
<div id="wrapper">
Dynamic text
</div>
</div>
</body>
Any help will be greatly appreciated!