homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
table ignores div width in ie6
barnsleydj




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

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

 

Robin_reala




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

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.

barnsleydj




msg:3629164
 3:10 pm on Apr 17, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved