nicht angemeldet
Tabellen sind aber nicht dafür gedacht.
Ich würde ungern umbauen aber wenn es nicht anders geht...
verwende keine inline-style-Angaben. Lagere alle CSS-Vereinbarungen in eine eigene Datei aus. Ebenso solltest du keine veralteten Attribute verwenden.
Laut dem Link ist align="center" für td/tr/th durchaus legitim. Das auslagern der CSS hab ich jetzt gemacht.
Zeig die Seite und wir werden versuchen dir zu zeigen, wie du eine semantisch korrekte Seite daraus bauen kannst.
In Ordnung dann zeig euch mal was ich habe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>output</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="js/jsonHighlighting.js"></script>
<link rel="stylesheet" media="screen" href="css/jsonHighlightBrushes.css">
<link rel="stylesheet" media="screen" href="css/meteorFrontend.css">
</head>
<body>
<form action="/output" method="get" accept-charset="UTF-8">
<table>
<tr><th align="left"><h1>Output</h1></th></tr>
<tr><td align="left">
<select id="selectionidx" name="selectionidx" class="scriptSelection" size="1" onChange="this.form.submit()">
<option value="0">link1</option>
<option value="1" selected="selected">link2</option>
</select>
</td></tr>
<tr><td align="center" class="scriptTD">
<pre id="script"><span class="placeHolder">The output block for JSON script!</span></pre>
</td></tr>
<tr><td align="right"><a href="/runtime?viewMode=view" target="_blank">Job States</a></td></tr>
</table>
</form>
<script type="text/javascript">
var obj = [{"date":"1998-12-27","x1_volume":104626800,"x2_ratio":0},{"date":"1999-02-28","x1_volume":244379200,"x2_ratio":0}]; //hier steht eigentlich VIEL mehr!
var str = JSON.stringify(obj, null, 4);
output( syntaxHighlight(str) );
</script>
</body>
</html>
Jetzt ist der DOCTYPE doch nicht mehr Fehlerhaft oder? Trotzdem zeigt Firefox was anderes an als Chrome :(
Wie schon beschrieben. Ne Tabelle mit einer Spalte und 4 Zeilen.
Das Highlighting ist erst mal nicht weiter von Interesse.
Jetzt gibt es zum einen die MeteorFrontend.css in der es vor allem wie folgt aussieht:
@charset "ISO-8859-1";
html, body
{
height: 99%;
width: 99%;
position: auto;
overflow: auto;
}
table {
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 100%;
height: 100%;
border: thin solid;
}
.scriptTD{
height: 100%;
}
Tricks mit height: auto !important; führen zu interessanten Ergebnissen die Leider nicht helfen.
Nu gibt es natürlich noch eine Zweite CSS die sich vor allem um den Pre-Block kümmert und das Highlighting unterstützt. Die jsonHighlightBrushes.css enthält als relevanten Code:
@CHARSET "ISO-8859-1";
pre#script {
width: 99%;
height: 100%;
overflow: auto;
outline: 1px solid #ccc;
margin: 5px;
text-align: left;
}
Das führt jetzt in Chrome zu einem unleserlichen Ministreifen und in Firefox zu einem überdimensionalen Scriptblock (beachte das für diesen Beitrag die Codeausgabe extrem verkürtzt wurde).
Hach man ist das alles ärgerlich :/
PS: Ich hoffe ich hab nichts vergessen.
Matthias Apsel
MudGuard
Der Martin
Gunnar Bittersmann