[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kfm-devel
Subject:    Strange khtml css layout problem
From:       Yves Glodt <yg () mind ! lu>
Date:       2004-07-13 19:53:37
Message-ID: 200407132153.37101.yg () mind ! lu
[Download RAW message or body]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hi,

I have a problem with a simple html-layout that is realized through
css. I attached a testcase.

The problem is that the first group of the 4 divs "4 3 2 1" correctly
touches the div below, but every following group does not. It seems like 
the "margin-bottom:10px" rule only gets applied on the first group.

Maybe it shows a problem in khtml, but I'm not sure about that, it could
also be a problem in the html/css. (but opera, gecko and ie display it
fine)

The html for each block of the 8 divs is identic.

I suck at explaining, so better look at the result in khtml 3.2.3 to see
the problem... ;-)


- --
Linux 2.4.26 #4 Wed Apr 14 19:23:19 CEST 2004 i686
 21:42:37 up  3:34,  1 user,  load average: 0.17, 0.29, 0.32


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.4 (GNU/Linux)

iD8DBQFA9D3BfmxiTOp0sQYRAtaWAJ0ZQ91olsXn09BwgnME4ntIqJ+sCACfX8SQ
mS7SZKfIHhw6jMiz8zr/Fus=
=gCjx
-----END PGP SIGNATURE-----

["testcase.html" (text/html)]

<!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>testcase</title>
	<style type="text/css">

	div.saveas, div.print, div.delete, div.edit {
		float:right;
		height:22px;
		margin:0;
		padding:2px 10px 2px 10px; /* T R B L */
		border:1px solid #000;
		border-width: 1px 0px 0px 1px;
	}

	div.saveas {
		border-right-width:1px;
	}

	div.title {
		height:26px;
		border:1px solid #000;
		border-width: 1px 1px 0 1px; /* T R B L */
		margin:0 250px 0 0;
		padding:0 0 0 10px;
		vertical-align:middle;
		font-size:16px;
		font-weight:bold;
		text-decoration:underline;
	}

	div.data {
		border:1px solid #000;
		border-width:1px 1px 1px 1px; /* T R B L */
	}

	pre {
		margin:0;
		padding:5px;
	}

	div.catcomment {
		border:1px solid #000;
		border-width:0px 1px 0px 1px; /* T R B L */
		padding:2px;
		font-style:italic;
		text-align:right;
	}

	div.hide {
		border:1px solid #000;
		border-width:0px 1px 1px 1px; /* T R B L */
		text-align:right;
		padding:2px;
		margin-bottom:10px;
	}

	</style>
</head>
<body>
<a name="top"></a>


<a name="53"></a>
<div class="saveas">1</div>
<div class="print">2</div>
<div class="delete">3</div>
<div class="edit">4</div>
<div class="title">5 test</div>
<div class="data"><pre>6
content content content content content content content
content content content content content content content
</pre></div>
<div class="catcomment">7</div>
<div class="hide">8</div>


<!--<a name="69"></a>-->
<div class="saveas">1</div>
<div class="print">2</div>
<div class="delete">3</div>
<div class="edit">4</div>
<div class="title">5 test</div>
<div class="data"><pre>6
content content content content content content content
content content content content content content content
</pre></div>
<div class="catcomment">7</div>
<div class="hide">8</div>


<div class="saveas">1</div>
<div class="print">2</div>
<div class="delete">3</div>
<div class="edit">4</div>
<div class="title">5 test</div>
<div class="data"><pre>6
content content content content content content content
content content content content content content content
</pre></div>
<div class="catcomment">7</div>
<div class="hide">8</div>


</body>
</html>



[prev in list] [next in list] [prev in thread] [next in thread]

Configure | About | News | Add a list | Sponsored by KoreLogic