By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,946 Members | 1,701 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,946 IT Pros & Developers. It's quick & easy.

width problem in IE

pradeepjain
100+
P: 563
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

Expand|Select|Wrap|Line Numbers
  1. html, body {margin:0px; padding:0px; background:#ddd; font-family:verdana; font-size:12px;}
  2. /* The header and footer */
  3. .headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
  4. /*.foot {display:block; height:30px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:12px;}*/
  5. #wrapper {
  6. margin-left: auto;
  7. margin-right: auto;
  8. padding-left: 1px;
  9. padding-right: 1px;
  10. width: 93%;
  11. min-width:900px;
  12. border-left:1px solid silver;
  13. border-right:1px solid silver;
  14. }
  15. /* added here for footer problem*/
  16. body,html {height:100%;}
  17.  
  18. #wrapper {
  19. background:#ffffff;
  20. min-height:100%;
  21. position:relative;
  22. }
  23. * html #wrapper {height:100%;background:#ffffff;}
  24.  
  25. #container {
  26. padding-bottom:30px;
  27. }
  28. #container:after {
  29. content:" ";
  30. display:block;
  31. clear:both;
  32. }
  33. * html #container {
  34.  height:1px;
  35.  }
  36.  .foot {
  37.  position:absolute;
  38.  bottom:0;
  39.  height:30px;
  40.  background-color: #08a;
  41.  width:100%;
  42. color:#fff;
  43. text-align:center;
  44. font-size:12px; }
  45.  
  46. /* till here */
  47.  
  48. /* This bit does all the work */
  49. /*#container {position:relative; display:block; background:#ffffff; border-left:200px solid #aa8; border-right:200px solid #a8a;}*/
  50. #container {position:relative; display:block; background:#ffffff; border-left:200px solid #ffffff; border-right:200px solid #ffffff;}
  51. #inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
  52. #left {float:left; position:relative; width:200px; left:0px;}
  53. #right {float:right; position:relative; width:190px; right:0px;}
  54. #center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
  55. .clear {clear:both;}
  56.  
  57. /* Just to extend each column */
  58. #inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
  59. #inner a span {display:none;}
  60. #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
  61. #inner a:active span, #inner a:focus span {display:block;}
  62.  
  63. a:visited, a {text-decoration:underline; cursor:pointer;}
  64. a:hover {text-decoration:none; cursor:pointer;}
  65.  
  66. 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
Sep 4 '08 #1
Share this Question
Share on Google+
1 Reply


Expert 100+
P: 397
See reply to your thread/post subject line 3 column structure
Sep 4 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.