CSS bug
"Steven Pemberton" <[email protected]>
| Newsgroups | gmane.comp.web.amaya.general |
|---|---|
| Organization | CWI/W3C |
| Message-ID | <[email protected]> |
The enclosed XHTML document shows up a CSS bug that I run into regularly
with Amaya.
My theory is that "height: 100%" is not working for the divs.
It is I admit a gruesome document consisting of loads of nested divs. I
apologise. But there is method to the madness. The technique is this:
<div class="hn"><p>2009</p></div><div class="h"> ... more stuff here
...</div>
The idea is that these two divs will be put next to each other
(h=horizontal, n=number)
div.hn {height: 100%; width: 49%; float: left }
div.h {height: 100%; width: auto;}
"... more stuff here ..." contains two divs that will be placed above each
other (v=vertical):
<div class="vn"><p>2008</p></div> <div class="v"> ... yet more here ...
</div>
div.v {height: 50%; width: 100%; }
div.vn {height: 50%; width: 100%; }
The "yet more here" contains another two 'h' class divs, and so on ad
nauseam.
An hn has additionally:
border-right: 2px blue solid;
and likewise a vn has:
border-bottom: 2px red solid;
Apart from that there is an all-encompassing div surrounding the lot
(class="a") with a big black border.
As you will see in Amaya, the blue borders are too short, making me
suspect the problem is with height. But maybe I shouldn't have said that
lest it send you on a wild-goose chase.
The problem may be with my CSS, I admit. I call to my defense a number of
mainstream browsers that do seem to do what I expect.
Thanks!
Best wishes,
Steven Pemberton
paper-diag-simple.html
(text/html, 2.1 KB)
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Paper</title>
<style type="text/css">
div.a {background-color: white; margin: 1em;
width: 80%; height: 7em;
font-size: 400%; font-weight: bold;
border: 0.1em black solid;}
div.h, div.v, div.hn, div.vn {
padding: 0; margin: 0; text-align: center;
overflow: hidden}
div.v {height: 50%; width: 100%; font-size: 80%}
div.h {height: 100%; width: auto; font-size: 80% }
div.vn {height: 50%; width: 100%;
border-bottom: 2px red solid;}
div.hn {height: 100%; width: 49%; float: left;
border-right: 2px blue solid}
div p {margin-top: 20%}
</style>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
</head>
<body>
<h2>Paper</h2>
<div class="a">
<div class="hn"><p>2009</p></div>
<div class="h">
<div class="vn"><p>2008</p></div>
<div class="v">
<div class="hn"><p>2007</p></div>
<div class="h">
<!-- comment this section out for the simplest case -->
<div class="vn"><p>2006</p></div>
<div class="v">
<div class="hn"><p>2005</p></div>
<div class="h">
<div class="vn"><p>2004</p></div>
<div class="v">
<div class="hn"><p>2003</p></div>
<div class="h">
<div class="vn"><p>2002</p></div>
<div class="v">
<div class="hn"><p>2001</p></div>
<div class="h">
<div class="vn"><p>2000</p></div>
<div class="v">
<div class="hn"><p>x</p></div>
<div class="h"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of commented out section -->
</div>
</div>
</div>
</div>
</body>
</html>