Hi, I've created a layout for a view and it renders fine in safari and firefox, but we need to support IE6 (not my choice) and it doesn't render correctly.
It appears that nesting a single div within another works fine; the problem arises when there are two inside a div: e.g. div.group.
This is as close as I could get it:
[codex]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
padding: 1% 1% 1% 1%;
margin: 1% 1% 1% 1%;
border: 1px solid gray;
background: red;
overflow:hidden;
}
div.group {
background: palegreen;
}
div.group_by {
width: 10%;
float: left;
background: khaki;
}
div.group_items {
float: left;
width: 80%;
background: azure;
}
div.group_item {
width: auto;
background: #33FF99;
}
div.right {
float: right;
background: papayawhip;
}
</style>
</head>
<body>
<div class="all">
<div class="group">
<div class="group_by">
<h2>Grouping</h2>
</div>
<div class="group_items">
<div class="group_item">
<div class="right">
<p>Hmm...</p>
</div>
<h3>Item</h3>
</div>
<div class="group_item">
<h3>Item</h3>
</div>
<div class="group_item">
<h3>Item</h3>
</div>
</div>
</div>
<div class="group">
<div class="group_by">
<h2>Grouping</h2>
</div>
<div class="group_items">
<div class="group_item">
<h3>Item</h3>
</div>
<div class="group_item">
<h3>Item</h3>
</div>
<div class="group_item">
<h3>Item</h3>
</div>
</div>
</div>
</div>
</body>
</html>
[/codex]
Top
