I am trying to create a CSS that deals with some automatically
generated content (using tapestry). It is effectly a list of items
that I have read from a database.
Each row of the table is a <div> whose only content is a set of divs
with the fields of the data that want to output.
The whole set of rows of this table are surrounded in another div.
My problem is that the First Row of the table is about 3 lines (in
relation to the size fo the text content of the inner divs) high,
compared to all the other rows
This is true with Konqueror and Mozilla Firefox browsers.
The row div has two classes specified for it . Each of the inner divs
have a single class for example like the following:-
<div class="personli st">
<div class="person clearfix">
<div class="surname" >Surname</div>
....
</div>
</div>
Firstly, the clearfix class is supposed to solve the problem of the
floating boxes not extending the surrounding div (as given at
http://www.positioniseverything.net/easyclearing.html) namely
..clearfix:afte r {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
The css for person is very simple
..person {
border:1px solid black;
padding:0 2px 0 2px;
}
and the css for each of the floats is very similar
..surname {
width: 20%;
float:left;
/* only for debugging */
border:1px solid blue;
}
Just to see what what happen, I have removed the visibility hidden
from the clearfix css. This produces a single . outside the content
of the div, but has no effect on th div size (the following divs move
down a bit.
In this case, it is clear all the floating divs only take up one line
of the surrounding div - so QUESTIONS
- Why am I a larger height for the first "person" div inside
"personlist ", whilst all the others behave fine?
- I have put borders round each div to see where they are but can't
see why it doesn't collapse - how else could I debug this?
