Formular nimmt Platz ein @ tutorials.de: Tutorials, Forum & Hilfe

Sasser · 17.03.11 23:15

Guten Abend!

Ich habe mehrere Boxen, welche ungefähr so aussehen:

Code css:

#panelbox {
    width: 400px;
    position: absolute;
    background-color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #808080;
    padding: 5px;
    font-size: 13px;
}

HTML-Code:

<div id="panelbox">
	<div style="float: left;">
		<p style="padding-top: 4px;">Sie sind angemeldet!</p>
	</div>
	<div style="float: right;">
		<form method="post" action="./?do=mypage">
			<p><input type="image" name="logout" src="images/button_logout.jpg" alt=""></p>
		</form>
	</div>
</div>

Nun habe ich das Problem, dass am Ende der Box nicht 5 Pixel Platz bleiben, sondern einige mehr. Dies ist wiederum von Browser zu Browser unterschiedlich. Was hebt diese Problem hervor?

Sasser · 30.03.11 23:27

Mittlerweile habe ich herausgefunden, dass der Abstand in jemden Browser der gleiche ist.

Wenn nur Text in der Box steht, sind überall 5px Abstand. Das Formular habe ich einmal entfernt und der Fehler bleibt der gleiche.

Warscheinlich liegt es an dem Input-Button. Hat niemand eine Idee?

Masaku · 03.04.11 03:11

Was meinst du mit "am Ende der Box"? Am unteren Rand?
Dann kontrollier mal margin und padding für <p>. Das hat normalerweise ein Standardmargin.

Sasser · 03.04.11 22:45

Hallo!

Das mache ich bereits, jedoch kommt das Problem von dem INPUT-Button, welcher ein Bild verwendet...

threadi · 04.04.11 21:50

Das padding wird zum width addiert, somit ergibt sich für diese Box eine Breite von 410 Pixel statt 400. Problematischer ist aber, dass Du die Box absolut positionierst, aber

a) nicht sagst wo hin (left/top/bottom/right)
b) keine Höhe vergibst

Beide Fehler werden von den meisten Browsern anders interpretiert, wodurch sich aber auch der selbe Effekt ergeben kann. So oder so ist es ein Fehler in deinem CSS den Du beheben solltest.

Wenn danach noch Probleme bestehen, zeig mal mehr von dem Quellcode. Ein Doctype ist auch wichtig.

Sasser · 05.04.11 21:54

Also ich verwende den Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ich habe es mit dem Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

versucht und dort wird es ohne Platz korrekt angezeigt. Jedoch werden hier wiederum andere Elemente wieder von allen Browsern unterschiedlich dargestellt.

threadi · 05.04.11 22:43

Ein Doctype ist wichtig. Vor allem einer der genau den Vorgaben entspricht. Welcher es ist spielt für die Darstellung keine Rolle.

Sasser · 06.04.11 13:12

Mit dem Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

hat es nun endlich funktioniert. Die Darstellung bleibt die gleiche, bis darauf dass die Abstände verschwinden.

Vielen Dank!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

platz allozierung

Float-Problem: relative positionierung von rechts nimmt platz weg

Platz sparen

Platz zwischen IMG - BG

Platz weg :-)

E-Mail:

Abonnieren Abbestellen