Welcome to WebmasterWorld Guest from 54.211.86.24

Forum Moderators: not2easy

table ignores div width in ie6

   
6:20 pm on Apr 14, 2008 (gmt 0)

5+ Year Member



My site has a layout consisting of 2 columns side by side (one for navigation and the other for content).

The problem is, in the first column, which is about 165 pixels wide, i have a table, i have set the width on this table to 100% so it should fit perfectly inside the column, which it does it firefox and ie7. But in ie6 it just spans across both columns and covers the entire page.

Heres the code for the layout, devoid of any content.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="/css/main.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body>
<div id="outerborder">
<div id="innerborder">
<div id="header">Header image</div>
<div id="navigation"> Links and Stuff </div>
<div id="wrapper">
<div id="leftpane">
Main navigation
</div>
<div id="rightpane">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</body>
</html>

And the css...


body{ background:url('/images/background.gif');}
body,td,p{ color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;}

a{ color:#990000; text-decoration:none;}
a:visited{ color:#990000; text-decoration:none;}
a:hover{color:#FF6600;}

#navigation a{ color:#990000; text-decoration:none; font-weight:bold;}
#navigation a:visited{ color:#990000; text-decoration:none;font-weight:bold;}
#navigation a:hover{color:#FF6600;font-weight:bold;}

.allie{ color:#336600; }
.enemy{ color:#FF0033; }

#outerborder{ width:85%; border:#7A7A7A 1px solid; text-align:left; margin:auto;}
#innerborder{ border:#000000 5px solid; background:#ADAFB1;}
#navigation{ padding:5px; border-top:#000000 1px solid; border-bottom:#000000 1px solid;background:url('/images/gradient_bg.gif');background-repeat:repeat-x; text-align:center;}
#wrapper{ background:url('/images/leftbar.gif') repeat-y left;}
#leftpane{ float:left; width:165; padding:5px; background:url('/images/leftbar.gif') repeat-y left; max-width:165px; text-align:left; }
#rightpane{ padding:5px 5px 5px 180px; }
#contentpane{ padding:5px; }
#footer{ clear:both;border-top:#000000 1px solid;padding:5px;text-align:center;}
#header{ background:url('/images/banner_bg.gif'); background-repeat:repeat-x; height:130px;}

#fullbox{ background:#A2A2A2; padding:5px; border:#888888 1px solid; }

h1{ font-family: Verdana, sans-serif;font-size: 1.8em;font-weight:bold;color:#000000; margin:0;}
h2{ font-family: Verdana, sans-serif;font-size: 1.4em;font-weight:bold;color:#000000; margin:0;}

hr { border:0; color:#888888; background-color:#888888; height:1px; width:100%; text-align:left; }

fieldset{ border:#7A7A7A 1px solid; background:#888888; }

legend{font-size: 1.1em;font-weight:bold;}

img{border:0px; }

table.center {margin-left:auto; margin-right:auto;}

table{ width:99%; }

#center{ text-align:center; }

img.menu{border:0px; display:block;}

table.allborders{ background:#ADAFB1; }
table.allborders td{ background:#888888; }
table.allborders td.header{height:22px; background:url('/images/table_header.gif'); padding-top:0px;padding-bottom:0px; text-align:center; font-weight:bold;}
table.allborders td.dark{ background:#888888; }
table.allborders td.light{ background:#A2A2A2; }

table.smaller{ width:auto; background:#ADAFB1; }
table.smaller td{ background:#888888; }
table.smaller td.header{height:22px; background:url('/images/table_header.gif'); padding-top:0px;padding-bottom:0px; text-align:center; font-weight:bold;}
table.smaller td.dark{ background:#888888; }
table.smaller td.light{ background:#A2A2A2; }

input,select,textarea{ border:#7A7A7A 1px solid;background:#CCCCCC;color:#000000;font-size:10px; }

form{ margin:0;padding:0; }

.left{float:left;}
.right{float:right;}

TIA

12:06 pm on Apr 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Seeing as you've not given code for your table I can't test this, but I'm guessing it's the missing 'px' from your left column width that's causing the problem. IE7 and Firefox will respect max-width, but IE6 doesn't understand it. It's always worth validating your CSS as it's very good at picking up minor problems like this.
3:10 pm on Apr 17, 2008 (gmt 0)

5+ Year Member



This has fixed the problem. Thanks very much :) Ended days of headaches trying to fix this.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month