Darstellungsproblemchen
Siegmund
- browser
2 Beat0 Siegmund0 Shadowcrow0 Beat0 MudGuard
0 Gunnar Bittersmann
Hallo an alle,
ich habe ein Darstellungsproblem zwischen Firefox und IE 8.
Mit dem folgenden Script wird eine Tabelle mit zwei Spalten und zwei Reihen dargestellt. In der ersten Tabellen-Zelle wird eine Checkbox dargestellt, in der zweiten Zelle eine Überschrift. Die Zellenbreite der Checkbox soll nur so breit sein, dass die Checkbox dargestellt werden kann.
Sobald man jedoch die chekcbox anklickt, öffnet sich ein Menü, indem einige Buttons dargestellt werden -> die Zellenbreite wird also entsprechend größer dargestellt, sodass die Buttons sichtbar sind. Firefox macht soweit alles so, wie ich es haben will, der IE dagegen reisst die Zellenbreite ca. doppelt so weit auf, wie eigentlich notwendig. Folgend der code zum nachvollziehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Muster</title>
<script type="text/javascript">
function menue(chk)
{
var fs = document.getElementById('menue_' + chk.id);
fs.style.display = (chk.checked) ? '' : 'none';
}
</script>
</head>
<body bgcolor="#FFFF99">
<form action="test.php" method="POST">
<table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0><tr style="height:25;">
<td style="width:10;">
<?PHP
$main=$_POST["main"];
if ($main=="")
{
$main="ja";
}
echo"<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" ";
if ($main=="ja")
{
echo"checked=checked";
}
echo"></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center">";
echo"<fieldset id="menue_a1" style="border:0; ";
if ($main=="nein")
{
echo"display:none;";
}
echo""><font color=white>Menü</font>";
$x="1";
while ($x<="9")
{
echo"<hr><input type="submit" name="$x" value="Button_$x" style="width:120;">";
$x++;
}
echo"<hr></fieldset>";
echo"</td><td style="background:#CCCCCC;" valign="top" align="center">";
echo"<iframe src="inhalt.php" frameborder="0" style="width:100%;height:100%;"></iframe></td></tr>";
?>
</table></form>
</body>
</html>
Am <hr> zwischen den Buttons liegt es nicht, ich hatte es auch mal mit nur <br> getestet.
Wie kann ich es also anstellen, dass der IE nur die Breite darstellt, die man benötigt, um die Buttons darzustellen und nicht links un rechts noch 200 Pixel mehr angezeigt werden?
Freue mich über konstruktive Ratschläge
Siegmund
Freue mich über konstruktive Ratschläge
Du hast ein clientseitiges Problem?
Dann poste clientseitigen Code.
PHP Code interessiert in dem Kontext nicht.
mfg Beat
Ihr meint den Quellcode des Browsers...?:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Muster</title>
<script type="text/javascript">
function menue(chk)
{
var fs = document.getElementById('menue_' + chk.id);
fs.style.display = (chk.checked) ? '' : 'none';
}
</script>
</head>
<body bgcolor="#FFFF99">
<form action="test.php" method="POST">
<table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0><tr style="height:25;">
<td style="width:10;">
<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked=checked></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center"><fieldset id="menue_a1" style="border:0; "><font color=white>Menü</font><br><br><input type="submit" name="1" value="Button_1" style="width:120;"><br><br><input type="submit" name="2" value="Button_2" style="width:120;"><br><br><input type="submit" name="3" value="Button_3" style="width:120;"><br><br><input type="submit" name="4" value="Button_4" style="width:120;"><br><br><input type="submit" name="5" value="Button_5" style="width:120;"><br><br><input type="submit" name="6" value="Button_6" style="width:120;"><br><br><input type="submit" name="7" value="Button_7" style="width:120;"><br><br><input type="submit" name="8" value="Button_8" style="width:120;"><br><br><input type="submit" name="9" value="Button_9" style="width:120;"><br></fieldset></td><td style="background:#CCCCCC;" valign="top" align="center"><iframe src="inhalt.php" frameborder="0" style="width:100%;height:100%;"></iframe></td></tr></table></form>
</body>
</html>
'ǝɯɐu$ ıɥ
Ihr meint den Quellcode des Browsers...?:
WOW, ich hätte gedacht der Sourcecode DES Browsers wäre umfangreicher.
*SCNR*
ssnɹƃ
ʍopɐɥs
Hallo,
Ihr meint den Quellcode des Browsers...?:
WOW, ich hätte gedacht der Sourcecode DES Browsers wäre umfangreicher.
ja, ausgeklügelte Kompressionsalgorithmen wirken Wunder! :-)
Ciao,
Martin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
...
<td valign="top" align="center">
<fieldset id="menue_a1" style="border:0; ">
<font color=white>Menü</font><br><br>
<input type="submit" name="1" value="Button_1" style="width:120;">
...
</fieldset></td>
Es wäre nett, wenn du den Code auch etwas formatierst, wenn du hilfe willst.
Schick den Code durch den Valigator.
http://validator.w3.org/#validate_by_input+with_options
Abgesehen davon, dass das ein ausgegrabenes Gespenst aus dem vorletzten Jahrhundert ist, hat es da Fehler drin.
mfg Beat
Schick den Code durch den Valigator.
http://validator.w3.org/#validate_by_input+with_options
Abgesehen davon, dass das ein ausgegrabenes Gespenst aus dem vorletzten Jahrhundert ist, hat es da Fehler drin.
Hallo,
Sorry, aber auch der validator hilft mir nicht wirklich weiter.
Ich habe den code jetzt nochmal mit all den Tipps überarbeitet und es bleibt immer noch ein waren Scheunentor, was mir der IE da anzeigt:
[...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Muster</title>
<script type="text/javascript">
function menue(chk)
{
var fs = document.getElementById('menue_' + chk.id);
fs.style.display = (chk.checked) ? '' : 'none';
}
</script>
</head>
<body bgcolor="#FFFF99">
<table style="width:98%;height:95%;background:black" border="1" cellpadding="0" cellspacing="0">
<tr style="height:25px;">
<td style="width:10px;">
<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked="checked">
</td>
<td align="center">
<font color="white">Headline</font>
</td>
</tr>
<tr>
<td valign="top" align="center">
<fieldset id="menue_a1" style="border:0"><font style="color:white;">Menü</font>
<br><br>
<input type="submit" name="1" value="Button_1" style="width:120px;">
<br><br>
<input type="submit" name="2" value="Button_2" style="width:120px;">
<br><br>
<input type="submit" name="3" value="Button_3" style="width:120px;">
<br><br>
<input type="submit" name="4" value="Button_4" style="width:120px;">
<br><br>
</fieldset>
</td>
<td style="background:#CCCCCC;" valign="top" align="center">INHALT</td>
</tr>
</table>
</body>
</html>
...]
Die zwei Fehler die mir der validator ausgibt kann ich nicht nachvollziehen.
Vielleicht habt ihr noch mal einen Winl mit dem Zaunpfahl für mich?
Gruß
Siegmund
Die zwei Fehler die mir der validator ausgibt kann ich nicht nachvollziehen.
Welche?
Vielleicht habt ihr noch mal einen Winl mit dem Zaunpfahl für mich?
Sind die Zaunpfähle des Validators nicht groß genug?
Sind die Zaunpfähle des Validators nicht groß genug?
NEIN - sont würde ich hier doch nicht nochmal schreiben.
1. Fehler:
…dset id="menue_a1" style="border:0"><font style="color:white;">Menü</font>
dem validator gefällt das Zeichen '>' nach 'color:white;"' nicht.
2. Fehler:
</fieldset>
dem validator gefällt das Zeichen '>' nicht.
Ich bin den kompletten Code nochmal durch gegangen und konnte keinerlei Fehler feststellen - bin aber gerne eines besseren Belehrbar.
DANKE
Siegmund
Hi,
dem validator gefällt das Zeichen '>' nach 'color:white;"' nicht.
Jetzt wissen wir zwar, wo das Problem auftritt. Aber da Du die Fehlermeldung verschweigst, wissen wir immer noch nicht, welches Problem.
cu,
Andreas
- Fehler:
…dset id="menue_a1" style="border:0"><font style="color:white;">Menü</font>dem validator gefällt das Zeichen '>' nach 'color:white;"' nicht.
- Fehler:
</fieldset>dem validator gefällt das Zeichen '>' nicht.
Die Fehlermeldung ist das hier:
Line 27, Column 77: start tag for "LEGEND" omitted, but its declaration does not permit this
In beiden Fällen bemängelt der Validator keineswegs das genannte Zeichen - diese nich ganz klare Fehlermeldung ist schlichtweg ein Folgefehler, weil du einfach ein fieldset-Element notierst, welches "einfach so" existiert, ohne dass es dafür ein form-Element gäbe.
Hi,
Die Fehlermeldung ist das hier:
Line 27, Column 77: start tag for "LEGEND" omitted, but its declaration does not permit thisIn beiden Fällen bemängelt der Validator keineswegs das genannte Zeichen - diese nich ganz klare Fehlermeldung ist schlichtweg ein Folgefehler, weil du einfach ein fieldset-Element notierst, welches "einfach so" existiert, ohne dass es dafür ein form-Element gäbe.
Falsch. Diese Fehlermeldung sagt sehr genau aus, was das Problem ist - und es ist NICHT ein fehlendes form-Element um das fieldset, sondern es ist das fehlende legend-Element IM fieldset.
cu,
Andreas
Falsch. Diese Fehlermeldung sagt sehr genau aus, was das Problem ist - und es ist NICHT ein fehlendes form-Element um das fieldset, sondern es ist das fehlende legend-Element IM fieldset.
Punkt für dich.
So, Mittagspause vorbei.
Ich habe jetzt innerhalb des <fieldset> ein <legend> eingebaut und die Fehler vom validator sind verschwunden - wunderbar und vielen Dank für den Hinweis.
Ich war bisher der Meinung, dass wenn man keinen Inhalt in Legend haben möchte, man diesen konpletten TAG weg lassen kann - wieder was gelernt.
Dennoch hat das ganze mein Problem nicht gelöst.
'Gunnar Bittersmann' hat auf meien erste Zeile verwiesen und mir netterweise einen Link dazu gegeben. Aus dem ging hervor, dass man den 'Quirks Mode' verhindern sollte. Demnach ergab sich aus meiner ersten Zeile folgende:
voher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
nachher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
Das Ergebnis ist nun so, dass meine Table nicht mehr eine Höhe von 95% hat - wie ich es eigentlich gerne hätte, sondern nur noch die Höhe des darzustellenden bereichs hat. Das ist nicht gewollt.
Jetzt seit Ihr wieder dran...
Gebt mir ein Stichwort und ich versuche das Rätsel zu lösen ;)
Vielen Dank
Siegmund
Hi,
Das Ergebnis ist nun so, dass meine Table nicht mehr eine Höhe von 95% hat - wie ich es eigentlich gerne hätte, sondern nur noch die Höhe des darzustellenden bereichs hat. Das ist nicht gewollt.
Jetzt seit Ihr wieder dran...
Nein, Du bist noch dran. Warum das so ist, habe ich bereits vor langer Zeit in diesem Thread geschrieben.
cu,
Andreas
Hallo Mudguard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
» Wieso verwendest Du HTML 4.0 statt des üblicheren 4.01?
Du meinst sicherlich diese Aussage.
Nachdem ich irgendwann später mal...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
...draus gemacht habe wurde ich hier auch gesteinigt.
Und selbst wenn ich mit diesen sehr, sehr dürftigen Informationen jetzt folgende Zeile nutze:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Komme ich der Lösung meines Problems NULL entgegen.
:(
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
» Wieso verwendest Du HTML 4.0 statt des üblicheren 4.01?
Du meinst sicherlich diese Aussage.
Nein, ich meinte die Aussage, die ich zur prozentualen Höhe gemacht habe.
cu,
Andreas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>Muster</title>
<script type="text/javascript">
function menue(chk)
{
var fs = document.getElementById('menue_' + chk.id);
fs.style.display = (chk.checked) ? '' : 'none';
}
</script>
</head>
<body bgcolor="#FFFF99">
<table style="width:98%;height:95%;background:black" border="1" cellpadding="0" cellspacing="0">
<tr style="height:25px;">
<td style="width:10px;">
<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked="checked"></input>
</td>
<td align="center">
<font color="white">Headline</font>
</td>
</tr>
<tr>
<td valign="top" align="center">
<fieldset id="menue_a1" style="border:0">
<legend>Muster</legend>
<font style="color:white;">Menü</font>
<br></br>
<input type="submit" name="1" value="Button_1" style="width:120px;"></input>
<br></br>
<input type="submit" name="2" value="Button_2" style="width:120px;"></input>
<br></br>
<input type="submit" name="3" value="Button_3" style="width:120px;"></input>
<br></br>
<input type="submit" name="4" value="Button_4" style="width:120px;"></input>
<br></br>
</fieldset>
</td>
<td style="background:#CCCCCC;" valign="top" align="center">INHALT</td>
</tr>
</table>
</body>
</html>
'ǝɯɐu$ ıɥ
ssnɹƃ
ʍopɐɥs
Hi!
Ja, my!
Ich habe Deins mal geklaut;-)
off:PP
Mahlzeit Siegmund,
voher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">nachher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
Mensch, da bist Du Deiner Zeit aber *weeeeeiiiiiiiiiit* voraus.
Jetzt seit Ihr wieder dran...
Nein, Du bist dran. Und zwar damit: <http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyp-Deklaration verstehen>.
MfG,
EKKi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
Mensch, da bist Du Deiner Zeit aber *weeeeeiiiiiiiiiit* voraus.
Der Buchstabe X hat eine schon fast unheimliche magische Wirkung auf die Menschen.
Egal wie viele Teufel. Hauptsache es gibt einen XTeufel.
mfg Beat
Hallo,
voher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
das ist ein gültiger DOCTYPE, aber einer, der den Quirks Mode auslöst (DTD fehlt).
nachher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
Das ist ein ungültiger DOCTYPE. Es gibt kein XHTML 4.01.
Ciao,
Martin
@@Siegmund:
nuqneH
voher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">nachher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
Von der falschen Versionsnummer abgesehen: Die DOCTYPE-Angabe dient nicht dazu, irgendwas draufzuschreiben, was gar nicht drin ist.
Das heißt: Nicht XHTML draufschreiben, wo kein XHTML drin ist! Verwende einen HTML-4.01-DOCTYPE, wenn du HTML 4.01 schreibst. Oder schreib auch XTHML.
Der Validator sollte dich auf die Unterschiede zwischen HTML und XHTML hinweisen. http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=SELFHTML auch.
Qapla'
Das heißt: Nicht XHTML draufschreiben, wo kein XHTML drin ist! Verwende einen HTML-4.01-DOCTYPE, wenn du HTML 4.01 schreibst. Oder schreib auch XTHML.
Der Validator sollte dich auf die Unterschiede zwischen HTML und XHTML hinweisen. http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=SELFHTML auch.
Ahh... vielen Dank für diesen Link, danach wollte ich gerade fragen.
Ich lese mir den kurzen Text ;) mal eben durch und melde mich dann sehr wahrscheinlich bald wieder.
Danke aber - wirklich
Gruß Siegmund
Ich bin den kompletten Code nochmal durch gegangen und konnte keinerlei Fehler feststellen - bin aber gerne eines besseren Belehrbar.
Studiere die Regeln zu fieldset.
mfg Beat
@@Siegmund:
nuqneH
Ich habe den code jetzt nochmal mit all den Tipps überarbeitet […]
Wirklich alle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Wenn man IE in den Quirksmodus schickt, sollte man sich nicht über Darstellungsunterschiede gegenüber standardkonformen Browsern wundern.
Erst IE in den standardkonformen Modus versetzen, dann weitersehen!
Qapla'
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Wieso verwendest Du HTML 4.0 statt des üblicheren 4.01?
<table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0>
Da für das übergeordnete Element keine Höhe angegeben ist, ist height damit auf auto gesetzt.
<tr style="height:25;">
25 Ameisenbeindurchmesser oder 25 Elefantenrüssellängen?
Ohne Einheit ist der Wert ungültig und muß ignoriert werden.
Sorge also erstmal für korrekten Code, bevor Du über Darstellungsprobleme auch nur nachdenkst.
<td style="width:10;">
same here ...
<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked=checked></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center">
Das Gewusel guck ich nicht näher an - Du solltest bei der Ausgabe an sinnvollen Stellen Leerzeichen und Zeilenumbrüche einbauen.
cu,
Andreas
@@Siegmund:
nuqneH
Folgend der code zum nachvollziehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Aha, Quirksmodus. Vermeide diesen! [Jendryschik]
<?PHP
$main=$_POST["main"];
Nein, das ist kein Code zum Nachvollziehen. Du hast ein clientseitiges Problem, dabei ist serverseitiger Cor irrelevant.
Post den generierten HTML-Code. Noch besser: Verlinke deine Seite! [ZITAT1632]
Qapla'