Fieses Darstellungsproblem
RobinsonHamburg
- html
Hallo,
mir macht folgendes Problem zu schaffen:
Wenn ich die Site mit IE anschaue sieht die Suche fehlerfrei aus wie auf dem oberen Bild zu sehen.
Schaue ich die Site aber mit Firefox, Opera, Netscape oder Mozilla an sieht die Box so aus wie auf dem unteren Bild zu sehen ist.
Die Box besteht aus mehreren einzelnen gif-Teilen...und die werden halt mit den genannten Browsern durch diesen Abstand sichtbar was natürlich nicht gerade schön aussieht.
Kann mir bitte jemand sagen um was für ein Problem es sich handelt?
Ich finde es komisch das alle Brwoser ausser IE das nicht richtig anzeigen.
Immer der gleiche Fehler.
Viele Grüsse
Rob
Hallo RobinsonHamburg,
Die Box besteht aus mehreren einzelnen gif-Teilen...
Mit CSS würdest du die sogar skalierbar hinkriegen - http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/
Kann mir bitte jemand sagen um was für ein Problem es sich handelt?
Dass du weder den Quelltext noch einen Link zur betreffenden Seite gepostet hast. ;-)
Ich finde es komisch das alle Brwoser ausser IE das nicht richtig anzeigen.
Keine voreiligen Schlüsse, bitte!
Gruss aus Luzern,
Daniel
Hi,
Wenn ich die Site mit IE anschaue sieht die Suche fehlerfrei aus wie auf dem oberen Bild zu sehen.
Sie sieht so aus wie Du es gerne hättest. Das ist aber nicht notwendigerweise fehlerfrei.
Schaue ich die Site aber mit Firefox, Opera, Netscape oder Mozilla an sieht die Box so aus wie auf dem unteren Bild zu sehen ist.
img-Elemente sind inline-Elemente. Diese werden vertikal auf der Basislinie der Schrift ausgerichtet, wenn nicht explizit was anderes gesagt wird.
Unter der Basislinie der Schrift ist Platz für die Unterlängen von Buchstaben wie p oder g oder ...
Wenn Dir die vertikale Ausrichtung der img-Elemente auf der Basislinie nicht taugt, gib eine andere Ausrichtung vor.
cu,
Andreas
Hallo!
Wenn Dir die vertikale Ausrichtung der img-Elemente auf der Basislinie nicht taugt, gib eine andere Ausrichtung vor.
Weiß zwar nicht ob es was mit dem genannten Darstellungsproblem zu tun hat, aber wenn ich mal folgenden Code probiere:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p style="font-size: 9px; vertical-align:middle;">
<input type="text"> Test <input type="checkbox">
</p>
</body>
</html>
Dann sind die Elemente aber alles andere als mittig an einer Linie angeordet, vor allem noch sehr unterschiedlich in verschiedenen Browsern. Oder gibt es eine andere Möglichkeit diese Elemente so anzuordnen, dass es aussieht als seien sie an der vertikalen Mitte ausgerichtet?
Grüße
Andreas
Hi,
Weiß zwar nicht ob es was mit dem genannten Darstellungsproblem zu tun hat, aber wenn ich mal folgenden Code probiere:
<p style="font-size: 9px; vertical-align:middle;">
<input type="text"> Test <input type="checkbox">
</p>
p ist kein inline-Element. p ist kein table-cell-Element.
Default-Wert für vertical-align ist baseline.
Warum sollte vertical-align für das p-Element also irgendeine Auswirkung haben?
Auf p trifft es nicht zu, vererbt wird es auch nicht.
Es darf also in Deinem Code keine Auswirkung haben.
cu,
Andreas
--
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
Hi!
p ist kein inline-Element. p ist kein table-cell-Element.
<table border="3" bordercolor="#0000FF">
<tr>
<td> </td>
<td style="font-size: 9px; vertical-align:middle;">
<input type="text"> Test <input type="checkbox">
</td>
</tr>
</table>
das führt aber zu selbigem Ergebnis (<p> hatte ich nur zur Vereinfachung genommmen, war mir nicht bewußt dass es hier einen Unterschied gibt). Zumindest lese ich das Beispiel in SELFHTML so dass dies eigentlich funktionieren sollte. Aber vermutlich verstehe ich hier irgendwas falsch ;-)
<table border="3" bordercolor="#0000FF">
<tr>
<td> </td>
<td style="font-size: 9px;>
<input type="text"> Test <input style="vertical-align:middle;" type="checkbox">
</td>
</tr>
</table>
So ändert sich das ganze zwar, aber ins andere Extrem, nicht wirklich mittig.
Was muss man denn anstellen, um das Textfeld, den Text und die Checkbox mittig ausgerichtet zu bekommen?
Grüße
Andreas
Hi,
Wenn ich die Site mit IE anschaue sieht die Suche fehlerfrei aus wie auf dem oberen Bild zu sehen.
Sie sieht so aus wie Du es gerne hättest. Das ist aber nicht notwendigerweise fehlerfrei.
Schaue ich die Site aber mit Firefox, Opera, Netscape oder Mozilla an sieht die Box so aus wie auf dem unteren Bild zu sehen ist.
img-Elemente sind inline-Elemente. Diese werden vertikal auf der Basislinie der Schrift ausgerichtet, wenn nicht explizit was anderes gesagt wird.
Unter der Basislinie der Schrift ist Platz für die Unterlängen von Buchstaben wie p oder g oder ...Wenn Dir die vertikale Ausrichtung der img-Elemente auf der Basislinie nicht taugt, gib eine andere Ausrichtung vor.
cu,
Andreas
Das würde ich nur zu gern verstehen :(
Für einen Laien wie mich leider nicht verständlich bzw. durchführbar.
Hallo,
als "quick and dirty"-Lösung könntest Du zunächst einmal folgende Doctype-Angabe an den Anfang Deines HTML-Codes stellen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Dies sollte aber wirklich nur als "schnelle" Lösung angesehen werden. Um diese Lücken "sauber" wegzubekommen, brauchst Du CSS. Du solltest Dich also unbedingt mit dieser Technik beschäftigen, zumal man um CSS nicht herum kommt, wenn man den Anspruch hat, moderne, zukunftssichere Seiten zu erstellen.
http://de.selfhtml.org/css/index.htm
Wenn Du CSS einigermaßen verstanden hast, dann könntest Du Dir diese Seiten anschauen, die Dir erklären, wie Du Deine Lücken "sauber" wegbekommst:
http://www.dodabo.de/html+css/img-table/
http://www.carsten-protsch.de/zwischennetz/doctype/luecken.html
Die allersauberste Lösung wäre natürlich, auf Tabellen zu Layout-Zwecken zu verzichten... (Runde und andere Ecken für skalierbare Boxen)
Viele Grüße
Carsten
Hallo,
als "quick and dirty"-Lösung könntest Du zunächst einmal folgende Doctype-Angabe an den Anfang Deines HTML-Codes stellen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
>
> Dies sollte aber wirklich nur als "schnelle" Lösung angesehen werden.
Hallo, Danke für die Hilfe!
Warum wäre es nichts für die Zukunft wenn ich nur den Doctype ändere?
Was könnte das für Probleme in der Zukunft geben?
Hallo,
Warum wäre es nichts für die Zukunft wenn ich nur den Doctype ändere?
Was könnte das für Probleme in der Zukunft geben?
Du verläßt Dich mit diesem Doctype auf Fehlerkorrekturen der Browser. Du weist aber nicht, ob
a) es einen aktuellen Browser gibt, der diese Fehlerkorrektur nicht mitmacht und daher Deine Lücken trotzdem anzeigt, oder
b) es zukünftig Browser gibt, die keinen "Doctype-Switch" mehr besitzen und unabhängig vom Doctype Deinen Code nur noch standardkonform interpretieren und daher Deine Lücken auch wieder anzeigen.
Also lieber gleich alles richtig machen.
Viele Grüße
Carsten
Hallo, hier nochmal der Code zu der Suche-Box, könnt ihr einen Fehler erkennen der das beschriebene Problem auslößt?
{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img border="0" src="templates/xtc2/img/navleft_top1-1.gif"></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img border="0" src="templates/xtc2/img/navleft_search.jpg"></td>
<td><img border="0" src="templates/xtc2/img/navright_top2-2_corner.jpg"></td>
<td><img border="0" src="templates/xtc2/img/navleft_top2-3.gif"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img border="0" src="templates/xtc2/img/navleft_top3-1.gif"></td>
</tr>
<tr>
<td background="templates/xtc2/img/navleft_main_bg.gif">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img border="0" src="templates/xtc2/img/pixel_trans.gif" width="21" height="1"></td>
<td>
<table>
<td class="boxText">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td valign="middle">{$INPUT_SEARCH}</td>
<td valign="middle">{$BUTTON_SUBMIT}</td>
</tr>
<br />
</td>
</tr>
</table></td>
</table><a href="{$LINK_ADVANCED}"><div><font color=#000000><font size=2><p style="font-family:verdana">
{#text_advanced_search#}</p></font></font></div></a>
</td>
<td><img border="0" src="templates/xtc2/img/pixel_trans.gif" width="10" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img border="0" src="templates/xtc2/img/navleft_bottom1-1.gif"></td>
</tr>
</table>
{$FORM_END}
Hallo,
Hallo, hier nochmal der Code zu der Suche-Box, könnt ihr einen Fehler erkennen der das beschriebene Problem auslößt?
[...]
< http://forum.de.selfhtml.org/my/?t=106340&m=658767>
Viele Grüße
Carsten
Hallo,
Hallo, hier nochmal der Code zu der Suche-Box, könnt ihr einen Fehler erkennen der das beschriebene Problem auslößt?
[...]
https://forum.selfhtml.org/?t=106340&m=658767
Viele Grüße
Carsten
Ich kann den Link nicht nutzen...habe keine Zugangsdaten!
Hallo,
Ich kann den Link nicht nutzen...habe keine Zugangsdaten!
sorry, ich mach jedesmal denselben Fehler...
< http://forum.de.selfhtml.org/?t=106340&m=658767>
Der Link verweist auf MudGuards Posting innerhalb dieses Threads. Er hat Dir bereits gesagt, was das Problem ist und wie man es lösen könnte.
Viele Grüße
Carsten