CSS: Rand wird nicht angezeigt (außer bei exakter Höhenangabe)

[ben-pen]

Morgen,

bei folgendem Code wird der linke Rand nicht angezeigt. Die Stärke schon, aber nicht die Farbe.
Erst wenn ich dem div eine exakte Höhe gebe, wird der farbige Rand angezeigt. Ich kann aber keine genaue Höhe angeben, da die sich je nach Inhalt ändert.
An was kann das liegen?

<div style="border-left:solid #FF0000 1px; height:200px">
<?
   $menu = "pl100";
?> 
<div class="thumb" <?php if ($section == $menu) 
echo 'style="background-color:#FFCC00;"' ?>>
<a href="index.php?kapitel=pendelleuchten&amp;section=<?=$menu?>" 
onmouseover="Tip('<img src=\'pictures/<?=$menu?>.jpg\' width=\'267\' height=\'267\'>')" onmouseout="UnTip()">
<img src="thumbs/<?=$menu?>.jpg" alt="<?=$menu?>">
<div class="thumbnumber"><?=$menu?></div></a></div>

</div>

 

[Zieger]

<div style="border-left: 4px solid #FF0000;">

	<div class="thumb">
		<a href="#">
			<img src="hmm.jpg" alt="" height="40" width="40">
			<div class="thumbnumber">pl100</div>
		</a>
	</div>

</div>

Damit habe ich auf jeden Fall einen roten Rand. Sieht dann so aus.

 

[msslovi0]

Sieht man davon ab, dass das mit dem inline-CSS und dem onmouseover-Zeug grenzwertig ist: Works like a charm.

 

[ben-pen]

Sieht man davon ab, dass das mit dem inline-CSS und dem onmouseover-Zeug grenzwertig ist: Works like a charm.

Was meinst du mit inline css?

Ja ich weiß. Javascript ist immer kritisch. Aber wenn es jemand ausgeschaltet hat, gibts halt kein mouseover.

 

[Force]

Ohne auf dein genaues Problem einzugehen, solltest du vielleicht immer eine Mindesthöhe je DIV setzen, das hat mir in den letzten Jahren, mit all seinen Browserauswüchsen oft einiges an Nerven und Zeit gespart.

 

[msslovi0]

Was meinst du mit inline css?

Alles, was irgendwie style= heißt: Raus damit! Das hat im Markup nichts verloren!

Ja ich weiß. Javascript ist immer kritisch. Aber wenn es jemand ausgeschaltet hat, gibts halt kein mouseover.

Du willst dich mit unobtrusive Javascript auseinandersetzen.

 

[ben-pen]

Alles, was irgendwie style= heißt: Raus damit! Das hat im Markup nichts verloren!

Das ist schon klar. Fürs Forum hab ichs so geschrieben

 

[Bastian]

<div style="border-left:solid #FF0000 1px; height:200px">

Das stimmt die Reihenfolge nicht.

border-left: 1px solid #ff0000;

So wäre es richtig.

 

[Atarimaster]

Das stimmt die Reihenfolge nicht.
border-left: 1px solid #ff0000;
So wäre es richtig.

Wie kommst Du darauf, dass die Reihenfolge eine Rolle spielt?
Weder finde ich in den CSS-Spezifikationen einen entsprechenden Hinweis, noch meckert der Validator auf http://jigsaw.w3.org/ CSS-Code mit »falscher« Reihenfolge an…

 

[msslovi0]

Nein, die Reihenfolge ist in dem Fall komplett egal, da sich alle Angaben eindeutig zuordnen lassen, egal in welcher Reihenfolge sie kommen.
http://www.blogpotato.de/wp-content/uploads/misc/border.php

Einzige Änderungen ggü. dem Originalcode: Höhe raus und Rand auf 10 Pixel erhöht wegen besserer Sichtbarkeit.