Forum Moderators: not2easy
In IE7/8, FF etc. the alignment is centered and fine.
The CSS I'm using is:
/* global to standardise padding etc. */
* {
padding:0;
margin:0;
border:0;
line-height:0;
}
body {
margin: 0;
padding: 0;
text-align: center;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
overflow:auto;
height:100%;
}
#container {
width: 1002px;
background: #ffffff;
margin: 0 auto;
text-align: left;
height:auto;
}
This CSS works fine (in IE6) on another site, i.e centers ok.
Some articles talk about IE6 being funny with XHTML doctypes, so I swapped it for an HTML Transitional doctype- but that wouldn't work either.
Any ideas as to how I can make the site centered properly in IE6? As far as I can tell the above code should work- but doesn't...
are you using a full or partial DOCTYPE?
birdbrain
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
I did try removing the <html xml...> line but to no avail.
can we see the full code then, for testing purposes?
birdbrain
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>[(site_name)] - [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/assets/templates/ie6.css" >
<![endif]-->
<link rel="stylesheet" type="text/css" href="/assets/templates/style.css" />
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
<script language="javascript" src="cal2.js">
</script>
<script language="javascript" src="cal_conf2.js"></script>
<script type="text/javascript">
function poponloadTerms()
{
testwindow= window.open ("terms.htm", "Terms and Conditions",
"location=1,status=1,scrollbars=1,width=350,height=500");
//testwindow.moveTo(0,0);
}
</script>
</head>
<body>
<div id="container">
<div id="banner">
<div class="banner_toplinks">{{toplinks}}</div>
<div class="banner_phone">{{topbanner}}</div>
<div class="searchform">{{searchform}}</div>
</div>
<div class="menuholder">
<div class="navigation">{{navmenu}}</div>
</div>
<div id="leftcolumn">
<div id="hotelpartners">{{hotelpartners}}
<div id="hotelscroller">{{hotelscroller}}</div>
</div>
<div id="lefthand_advert1">{{sideflash1}}</div>
<div id="lefthand_advert2">{{sideflash2}}</div>
</div>
<div id="rightcolumn">
<div id="bookahotel">{{bookahotel}}
<div id="bookahotelholder">{{bookahotelholder}}</div>
</div>
<div id="specialoffers">{{specialoffers}}
<div id="specialoffersholder">{{specialoffersholder}}</div>
</div>
<div id="newhotels">{{newhotels}}</div>
<div id="bookerstoolkit">{{bookerstoolkit}}</div>
</div>
<div id="maincontent">
<div id="topcontent">{{homeflashmovie}}</div>
<div id="dailynews">{{dailynews}}
<div id="dailynewsholder">{{dailynewsholder}}</div>
</div>
<div id="flashbox">{{flashbox}}</div>
<div id="divholder">
<div id="left_bottom">{{left_bottom}}</div>
<div id="middle_bottom">{{middle_bottom}}</div>
<div id="right_bottom">{{right_bottom}}</div>
</div>
</div>
<div class="clearing"></div>
<div class="footerbar">{{footerbar}}</div>
<div class="expotelfooter">{{expotelfooter}}</div>
</div>
</body>
</html>
The full CSS that deals with the global elements (not all the inner attributes such as paragraphs, colors etc. - it's a 1000-line file) is:
@charset "utf-8";
/* CSS Document */
/* global to standardise padding etc. */
* {
padding:0;
margin:0;
border:0;
line-height:0;
}
body {
margin: 0;
padding: 0;
text-align: center;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
overflow:auto;
height:100%;
}
#container {
width: 1002px;
background: #ffffff;
margin: 0 auto;
text-align: left;
height:auto;
padding:0;
}
Inside #container I have three main columns:
/* Content holder for the central column */
#maincontent {
margin: 0 136px;
padding: 10px 5px 5px 5px;
float:none;
}
/* Left and right columns */
#rightcolumn {
width: 196px;
float: right;
padding: 10px 10px 5px 0px;
}
#leftcolumn {
width: 98px;
float: left;
padding: 10px 5px 5px 10px;
}
.clearing {
clear:both;
height:0;
}
I tested the code that you provided and found that the #container div was centered in IE6.
Bear in mind, though, that I use the...
Internet Explorer Collection
birdbrain
I thought so too which is why I can't see where it's going wrong...
Thanks for checking. Not sure where to go from here...
