I have a 3 column layout left<->content<->right<->.I made a css and html in such a manner that when there is no left sidebar the content region starts from left side and takes whole width of left on content area.and when there is no right .it takes whole width of content on right and when there is no right and left the content takes whole width..its working in firefox properly.but in IE 6 its not taking the width properly.
this is the layout i am using
http://www.cssplay.co.uk/layouts/3cols.html
This is the css
- html, body {margin:0px; padding:0px; background:#ddd; font-family:verdana; font-size:12px;}
-
/* The header and footer */
-
.headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
-
/*.foot {display:block; height:30px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:12px;}*/
-
#wrapper {
-
margin-left: auto;
-
margin-right: auto;
-
padding-left: 1px;
-
padding-right: 1px;
-
width: 93%;
-
min-width:900px;
-
border-left:1px solid silver;
-
border-right:1px solid silver;
-
}
-
/* added here for footer problem*/
-
body,html {height:100%;}
-
-
#wrapper {
-
background:#ffffff;
-
min-height:100%;
-
position:relative;
-
}
-
* html #wrapper {height:100%;background:#ffffff;}
-
-
#container {
-
padding-bottom:30px;
-
}
-
#container:after {
-
content:" ";
-
display:block;
-
clear:both;
-
}
-
* html #container {
-
height:1px;
-
}
-
.foot {
-
position:absolute;
-
bottom:0;
-
height:30px;
-
background-color: #08a;
-
width:100%;
-
color:#fff;
-
text-align:center;
-
font-size:12px; }
-
-
/* till here */
-
-
/* This bit does all the work */
-
/*#container {position:relative; display:block; background:#ffffff; border-left:200px solid #aa8; border-right:200px solid #a8a;}*/
-
#container {position:relative; display:block; background:#ffffff; border-left:200px solid #ffffff; border-right:200px solid #ffffff;}
-
#inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
-
#left {float:left; position:relative; width:200px; left:0px;}
-
#right {float:right; position:relative; width:190px; right:0px;}
-
#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
-
.clear {clear:both;}
-
-
/* Just to extend each column */
-
#inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
-
#inner a span {display:none;}
-
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
-
#inner a:active span, #inner a:focus span {display:block;}
-
-
a:visited, a {text-decoration:underline; cursor:pointer;}
-
a:hover {text-decoration:none; cursor:pointer;}
-
-
em {font-weight:bold;}
...
In html i have added some work around like this
[PHP]
<?php if ($right);else echo "<style type=\"text/css\" media=\"all\">#center {margin-right:0;} #container{border-right:0px;}#inner { margin-right:0px;} *html #center {margin-right:0;} *html #container{border-right:0px;} *html #inner { margin-right:0px;} </style>"; ?>
<?php if ($left);else echo "<style type=\"text/css\" media=\"all\">#center {margin-left:0;} #container{border-left:0px;}#inner { margin-left:0px;} *html #center {margin-left:0;} *html #container{border-left:0px;} *html #inner { margin-left:0px;} </style>"; ?>
<?php if ($right);elseif($left);else echo "<style type=\"text/css\" media=\"all\">#center {margin-left:0;margin-right:0;} #container{border-left:0px;border-right:0px;}#inner { margin-left:0px;margin-right:0px;} *html #center {margin-left:0;margin-right:0;} *html #container{border-left:0px;border-right:0px;} *html #inner { margin-left:0px;margin-right:0px;}</style>"; ?>
[/PHP]
width problem in IE ..Any hack for IE
Thanks,
Pradeep
