[prev in list] [next in list] [prev in thread] [next in thread]
List: kfm-devel
Subject: Re: Bad HTML or another KHTML table rendering issue ?
From: Vadim Plessky <lucy-ples () mtu-net ! ru>
Date: 2001-12-08 11:24:04
[Download RAW message or body]
On Friday 07 December 2001 22:55, Joseph Wenninger wrote:
|
| First of all I've to say, that I'm sorry, but I couldn't create a more
| simple testcase, than can be found at:
| http://stud3.tuwien.ac.at/~e9925371/temporary/test_tables.html
|
No problem I reduced it to acceptable size (2.7K + 4.3K)
please consider 2 files attached
-2c.html - displays ok in Konquerror.
-2c2.html illustrates "not correct width of table" problem.
the only difference between these 2 examples that I repeated "inner" table 7
times in 2c2 testcase, while in 2c there are only 2 inner tables.
I am on KDE 2.2.2 and problem is easily reproducable for me with those
testcases.
| The webpage is the output of a cocoon web application a friend of mine
| has written. It renders completely correct (at least what I would consider
| correct) in IE and Mozilla, but in Konqy the cells containing the
| checkboxes are quite too large. Everything I tried to reproduce this
| behaviour in a simplier testcase failed. That's why I'm not sure if it is
| really a khtml bug or if it's a bug within the file.
|
| That's why I'd like to hear what others (with more HTML knowledge than I
| have) think about it, before I submit an official bug report.
|
Done.
Now we should wait what Dirk Muller will respond - if he can fix this without
submitting bug report, well... one Bug No in KDE bug database will be saved
;-))
|
| Kind regards
| Joseph Wenninger
Ahh, now looked at subject of your mail again.
I guess HTML you were refering to is really bad.
Number of tables your friend is using - enermous, and it's not justified by
page design/complexity.
Didn't you liked layout with DIVs I proposed to you some time ago (Nov.24)?
(see 'tables-replaced-with-DIV.html' attached - just 941 bytes :-)
--
Vadim Plessky
http://kde2.newmail.ru (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
KDE mini-Themes
http://kde2.newmail.ru/themes/
["test_tables-bigfoot-2c.html" (text/html)]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" \
"http://www.w3.org/TR/REC-html40/strict.dtd"> <html><head>
<title>Infostat Asgard: Berechtigungsprofile administrieren</title>
<style type="text/css">
#t0 { border: 2px solid lime }
#t1 { border: 2px solid green }
#t2 { border: 2px dashed orange }
#t1d { width: 100% }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginheight="0" marginwidth="0">
<!-- <table border="0" cellpadding="0" cellspacing="0" width="100%">
-->
<table id="t0" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="20"></td>
<td width="164">
<span class="text"><a href="javascript:navigate(1)" \
onmouseout="MM_swapImgRestore()" \
onmouseover="MM_swapImage('button1','','images/b_round2.gif',1)">
<img align="absbottom" border="0" height="21" name="button1" \
src="images/b_round.gif" width="22">
<b>ADMIN</b>
</a></span></td></tr>
</table>
</td>
<td background="images/left.gif" width="8">
<img height="8" src="images/trans.gif" width="8">
</td>
<td bgcolor="#FFFFFF" valign="top">
<table id="t1" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div align="right">
<a href="javascript:doSwitch();" onmouseout="MM_swapImgRestore()" \
onmouseover="MM_swapImage('b_zuordnen','','images/b_zuordnen2.gif',1)">
<img border="0" height="27" name="b_zuordnen" src="images/b_zuordnen.gif" \
width="98"></a> </div>
</td>
</tr>
</table>
<!-- IMPORTANT PART STARTS HERE -->
<table id="t2" cellpadding="3" cellspacing="0" style="margin-right:8px; \
table-layout:fixed" width="534"> <tr>
<td bgcolor="#ffffff" border="0" valign="top">
<table align="left" border="1" cellspacing="4" width="100%">
<tr>
<td width="50%"><font \
color="#000000">Profilname:</font><br><b>ADMIN</b></td> </tr>
</table>
true
<table align="left" border="1" cellspacing="4" width="100%">
<tr>
<td width="50%"><font color="#000000">SAVE_FILE:</font>
<input name="SAVE_FILE" type="checkbox"></td>
<td width="50%"><font color="#000000">OPEN_PROJECT:</font>
<input name="OPEN_PROJECT" type="checkbox"></td>
</tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
</td></tr>
</table>
</td></tr></table>
</body></html>
["test_tables-bigfoot-2c2.html" (text/html)]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" \
"http://www.w3.org/TR/REC-html40/strict.dtd"> <html><head>
<title>Infostat Asgard: Berechtigungsprofile administrieren</title>
<style type="text/css">
#t0 { border: 2px solid lime }
#t1 { border: 2px solid green }
#t2 { border: 2px dashed orange }
#t1d { width: 100% }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginheight="0" marginwidth="0">
<!-- <table border="0" cellpadding="0" cellspacing="0" width="100%">
-->
<table id="t0" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="20"></td>
<td width="164">
<span class="text"><a href="javascript:navigate(1)" \
onmouseout="MM_swapImgRestore()" \
onmouseover="MM_swapImage('button1','','images/b_round2.gif',1)">
<img align="absbottom" border="0" height="21" name="button1" \
src="images/b_round.gif" width="22">
<b>ADMIN</b>
</a></span></td></tr>
</table>
</td>
<td background="images/left.gif" width="8">
<img height="8" src="images/trans.gif" width="8">
</td>
<td bgcolor="#FFFFFF" valign="top">
<table id="t1" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div align="right">
<a href="javascript:doSwitch();" onmouseout="MM_swapImgRestore()" \
onmouseover="MM_swapImage('b_zuordnen','','images/b_zuordnen2.gif',1)">
<img border="0" height="27" name="b_zuordnen" src="images/b_zuordnen.gif" \
width="98"></a> </div>
</td>
</tr>
</table>
<!-- IMPORTANT PART STARTS HERE -->
<table id="t2" cellpadding="3" cellspacing="0" style="margin-right:8px; \
table-layout:fixed" width="534"> <tr>
<td bgcolor="#ffffff" border="0" valign="top">
<table align="left" border="1" cellspacing="4" width="100%">
<tr>
<td width="50%"><font \
color="#000000">Profilname:</font><br><b>ADMIN</b></td> </tr>
</table>
true
<table align="left" border="1" cellspacing="4" width="100%">
<tr>
<td width="50%"><font color="#000000">SAVE_FILE:</font>
<input name="SAVE_FILE" type="checkbox"></td>
<td width="50%"><font color="#000000">OPEN_PROJECT:</font>
<input name="OPEN_PROJECT" type="checkbox"></td>
</tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
<table align="left" border="1" cellspacing="4" width="100%"><tr>
<td width="50%"><font color="#000000">DELETE_CONTENT:</font><input \
name="DELETE_CONTENT" type="checkbox"></td> <td width="50%"><font \
color="#000000">REWINDTO_FILE:</font><input name="REWINDTO_FILE" \
type="checkbox"></td> </tr></table>
</td></tr>
</table>
</td></tr></table>
</body></html>
["tables-replaced-with-DIV.html" (text/html)]
<HTML>
<head>
<style type="text/css">
table { width: 100% }
td { width: 50% }
.aa { color: #000000 }
.L { width: 50%;
float: left;
border: 1px solid navy }
.R { width: 50%;
margin-left: 50%;
border: 1px solid gray }
</style>
</head>
<BODY>
<div class="L">
<span class="aa">SAVE_FILE:</span>
<input name="SAVE_FILE" type="checkbox">
</div>
<div class="R">
<span class="aa">OPEN_PROJECT:</span>
<input name="OPEN_PROJECT" type="checkbox">
</div>
<div class="L">
<span class="aa">DELETE_CONTENT:</span>
<input name="DELETE_CONTENT" type="checkbox">
</div>
<div class="R">
<span class="aa">REWINDTO_FILE:</span>
<input name="REWINDTO_FILE" type="checkbox">
</div>
<div class="L">
<span class="aa">OPEN_FILE:</span>
<input name="OPEN_FILE" type="checkbox">
</div>
<div class="R">
<span class="aa">REWINDTO_OPERATOR:</span>
<input name="REWINDTO_OPERATOR" type="checkbox">
</div>
</BODY>
</HTML>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic