DIV-Tag oder SPAN-TAG - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV-Tag oder SPAN-TAG

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV-Tag oder SPAN-TAG

Pages: [1]

geschrieben von Klaush am 17.02.2005 - 00:01

Hallo Leute,

ich habe folgendes Problem das nur im FF auftritt.

hier ein Ausschnitt aus der CSS:
.preview {
border: solid 1px;
width: 35px;
height: 16px;
}

Dann habe in einer Zeile folgendes stehen:
<input type="text" name="new[body_bg]" value="$body_bg" title="\$body_bg" size="22"> <span class="preview" style="background:#FFFFFF"></span>

Resultat:
Im IE wie auch im FF wird alles hintereinander geschrieben, bis hier her alles IO, jedoch wird beim FF das Farbkästchen nicht angezeigt und es entsteht nur ein vertikaler Strich.

Wenn ich einen div-Tag anstatt des Span-Tag nehme, dann gehts in beiden Browsern, nur das der div-Tag einen ungewollten Zeilenumbruch vor dem <div>.

Hat jemand eine Idee wieso das so ist, oder liegt es vielleicht nur an meine CSS Definition?

geschrieben von René am 17.02.2005 - 00:57

geschrieben von Klaush am 17.02.2005 - 01:20

Rene, wäre eine Möglichkeit!

<span ... > </span>

Das Problem selbst besteht dennoch, nur das sich jetzt durch das   ein kleiner Unterschied in der Weite ergeben hat. Demnach müsste ich so viele   einfügen das sich daraus ein Kästchen bildet.

Normalerweise sollte sich das Kästchen durch die Angabe width: 35px; aus der CSS Definition bilden, siehe Anhang.

geschrieben von Armin am 17.02.2005 - 08:10

Hi,

span ist kein Blockelement.
Entweder ein div nehmen oder span zum Block machen, und mit float die Positionierung nebeneinander zulassen.

Oder so

	HTML-Quelltext
1: 2: 3: 4: 5:	.preview { border: solid 1px; height: 16px; padding-right: 35px; }

Armin

geschrieben von René am 17.02.2005 - 08:35

hilft dir das weiter ?

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51:

<html>
<head>

<style type="text/css">
<!--
form
{
	display: inline;
}

.zeile
{
	margin-top: 5px;
	display: table;
	width: 200px;
}

.eingabe
{
	clear: right;
	float: left;
}

.preview
{
	border: 1px solid #000;
	height: 20px;
	float: right;
	clear: right;
	width: 35px;
}
//-->
</style>

</head>
<body>

<form>
  <div class="zeile">
    <input class="eingabe" name="new[body_bg]" type="text" size="22" value="$body_bg" title="$body_bg" />
    <span class="preview" style="background-color: #fff;">&nbsp;</span>
  </div>

  <div class="zeile">
    <input class="eingabe" name="new[body_bg]" type="text" size="22" value="$body_bg" title="$body_bg" />
    <span class="preview" style="background-color: #ccc;">&nbsp;</span>
  </div>
</form>

</body>
<html>

geschrieben von Klaush am 17.02.2005 - 09:14

jetzt kommt auch bei mir der aha Effekt

padding-right:

Danke ihr beiden!