Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I'm creating a simple two column layout using CSS but I'm running in to a couple of problems nesting tables within both of the columns in IE. One column is a fixed width and is floated to the right of the screen the other column then has a right margin set to seperate it from the other column.
The problem occurs when I have a table with 100% nested inside both columns, in Firefox it's fine but in IE the two tables can never be side by side with the table in the main column always appearing below the table in the floated column.
I've posted my current code below so if anyone has got any idea's they'd be more than welcome as I don't have much hair left!
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Reply-to" content="" />
<meta name="Copyright" content="" />
<meta name="Robots" content="no-follow" />
<link rel="stylesheet" type="text/css" href="" />
<link rel="shortcut icon" href="" />
<style type="text/css">
body
{
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 0.74em;
}
#container
{
margin: 15px;
}
#header
{
background-image: url(Images/Help-Logo.gif);
background-position: top right;
background-repeat: no-repeat;
height: 105px;
}
#centre
{
padding: 0px 0px 10px 0px;
}
#content
{
margin-right: 285px
}
#subcontent
{
width: 273px;
margin: 0;
padding: 0;
display: inlne;
float: right;
}
.table
{
width: 100%;
border: 1px solid #666666;
background-color: #F3F5F7;
padding: 0;
margin: 0;
text-align: left;
}
.table th
{
background-color: #5C8FBE;
padding: 10px 5px;
font-weight: normal;
color: #FFFFFF;
}
.table td
{
border-bottom: 1px solid #EAECEE;
background-color: #F3F5F7;
padding: 5px;
}
#footer
{
border-top: 2px solid #274561;
padding-top: 10px;
text-align: right;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Logo
</div>
<div id="centre">
<div id="subcontent">
<table cellspacing="0" class="table">
<tr>
<th>Table heading</th>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
</table>
</div>
<div id="content">
<table cellspacing="0" class="table">
<tr>
<th>Table heading</th>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
<tr>
<td>table cell</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<div id="footer">
Copyright © 2006
</div>
</div>
</body>
</html>[/code] -
just give the "content" div some "layout" in IE and you're good to go: http://www.satzansatz.de/cssd/onhavinglayout.html
-
has layout is dependant on JS
this is what I would do:
add this to your CSS
It only targets IE browsers
* html #container #centre #subcontent table.table,* html #container #centre #content table.table
{
margin-right:-5px;
}
bsw2112 -
has layout is dependant on JS
Um... no.
If you read the link I included in my post, you'll see that adding any of these CSS properties to a div will trigger "hasLayout" in IE6:- position: absolute
- float: left|right
- display: inline-block
- width: any value other than 'auto'
- height: any value other than 'auto'
- zoom: any value other than 'normal'
- writing-mode: tb-rl
I usually just use "zoom: 100%"
1 to 4 of 4