Input top nicht gleich Text top?

[de-kekse]

Hi,
Folgender 2 Zeiler egal in welchem Browser aufgerufen führt dazu dass das Textfeld um die halbe höhe tiefer angezeigt wird wie das Eingabefeld obwohl beide Position:absolute; top:100; haben. (siehe Bild)
Hat wer eine Idee wieso das so ist?

<?PHP
echo "<a><input name='index.htm' type='text' value=10.0 style='position:absolute; left:100px; top:100px; width:100px; height:50px'></a>";
echo "<p style='background-color:rgb(0,255,0); position:absolute; left:200px; top:100px; width:100px; height:50px'>mm</p>";
?>


mfg
de-kekse

 

[MrMurphy]

Hallo,

die Browser haben interne Stylesheets, die durch das CSS überschrieben werden.

Diese internen Stylesheets haben für unterschiedliche Elemente unterschiedliche Vorgaben.

Das p-Element bekommt so in jedem Fall einen äußeren Abstand (margin) mit auf den Weg. Wenn du dem p-Element im Inline-CSS ein "margin: 0;" mitgibst stehen beide Elemente auf einer Höhe.

Für weitere Infos zu dem Problem kannst du ja mal nach "css normalisierung" oder für die harte Tour nach "css reset" googeln.

Gruss

MrMurphy

 

[de-kekse]

Vielen Dank MrMurphy,
genau das (margin:0;) war der Auslöser für den Versatz.

Gruß
de-kekse

 

[bodo92]

Warum steht das Input-Element in einem Anker-Element?
Bitte verzichte möglichst auf Inline-Styles mach das mit CSS.
Der p sollte nicht absolut Positioniert werden sondern gefloatet werden.

So etwa:

<span>
    <input>
    <p></p>
</span>

Und HTML-Tags haben Doppelte Anführungszeichen also in PHP

echo '<input type="text">';

In deinem Fall aber wahrscheinlich eher ein Input vom Type number.

 

[bdt600]

Und HTML-Tags haben Doppelte Anführungszeichen

Das ist falsch, auch einfache Anführungszeichen sind erlaubt

 

[nookie]

Beides ist erlaubt, kommt einfach nur auf die Schreibweise an und wo und wie du es verwendest.

 

[bodo92]

OK das wusste ich nicht, nutze sofern möglich grundsätzlich echo mit einfachen Anführungszeichen.

 

[de-kekse]

Hi bodo92,
erst mal danke für die schnelle Antwort.
Das Anker-Element war ein Abfallprodukt. Richtig, es geht auch ohne.

Zum Thema inline Styles. Die Styles können für jedes Element auf der Seite Variabel eingestellt werden. Mir erscheint es derzeit übersichtlicher die Styles beim Element zu halten statt einmal die Styles zu definieren und dann bei jedem Element auf den definierten Style zu verweisen. Mir ist hier noch nichts praktikableres eingefallen bei Möglichen ca. 100 Styles / Seitenaufruf.

Die folgende Zeile für ein Element auf der Seite wird variabel aus einer VS C# Anwendung auf dem Server generiert. Wenn ich die Anführungszeichen und die Hochkomma tausche geht gar nichts mehr.
Eine Idee?

echo "<p><input name={$item['func']} type='text' value={$value}
style='color:rgb({$item['fcolor']});
background-color:rgb({$item['bcolor']});
margin:0;
font-family:{$item['font']};
font-size:{$item['fontsize']};
font-weight:{$item['fontstyle']};
text-align:{$textalign};
position:absolute; left:{$posX}px; top:{$posY}px; width:{$item['w']}px; height:{$item['h']}px'></p>";


Gruss
de-kekse

 

[bodo92]

Das Bedeutet du hast für jeden User die Einstellungen gespeichert und willst die Styles generieren..

Nur mal so als Idee macht es nicht mehr sinn die Einstellungen in Browser abzulegen und auf Clientseite die Anpassung durchzuführen?