Problem mit Ausgabe in FF

[deNiz83]

Hi,
ich habe da mal etwas Neues gestartet und habe jetzt schon ein Problem mit dem Firefox Browser.

Hier erstmal die Seite:

Test Seite

Das Problem ist, der FF erkennt die border-color Elemente nicht und zeigt sie nicht an. Der IE hingegen schon.

Hier der CSS Code:

.border {
    border: 1px;
    border-style: solid;
    border-color: #cbe7f6 #53656f #53656f #cbe7f6;
} 

Es geht um die beiden td Elemente in der ersten Zeile.

[TobiaZ]

Tabellen sind nicht zum Layouten da!!

im zweifel gib halt für jede border einzeln an...

[deNiz83]

Wenn ich es einzeln angebe, funktioniert es auch nicht.

Und wieso sollten Tabellen nicht zum "layouten" da sein? Wie kann ich sonst diesen Effekt erzielen (ohne Grafiken!)?

[onemorenerd]

Es gibt diverse Möglichkeiten, um a-Tags zu so einer Liste aufzuspannen.

[deNiz83]

Es geht nicht um die Navigation, sondern um die td-Tags und dass FF die border-color deklarationen im CSS nicht anzeigt.

[onemorenerd]

Ja ist schon klar. Ich meinte div's für den Header (dessen Border dir Probleme macht) und die Navigation, denn auch für diese gilt, dass Tabellen nicht zum Layouten sind.

[deNiz83]

Ok danke dir. Ich werde das mit div ausprobieren.

Die Naviliste wurde nicht mit Tabellen gemacht (ul/li-Tags).

[TobiaZ]

Die Naviliste wurde nicht mit Tabellen gemacht (ul/li-Tags).

ja, ul/li, die wiederum in einer tabelle positioniert sind.

[deNiz83]

Die Tabelle hat keinen Einfluss auf das Design der Navileiste.

Habe jetzt ein neues Problem.

zur Seite

Die Box, die unten dargestellt wird, sollte eigentlich neben der ersten sein.

.border {
    float: left;
    border: 1px;
    border-style: solid;
    border-color: #cbe7f6 #53656f #53656f #cbe7f6;
}

.size1 {
    width: 20%;
    height: 100px;
    background-color: #83a8bc;
}

.size2 {
    width: 80%;
    height: 100px;
    background-color: #83a8bc;
} 

Weiß jemand weiter?

[TobiaZ]

da ist halt nicht genug platz.

[deNiz83]

Danke, hast recht.

Verstehe aber nicht wieso. Die breiten Angaben wurden in % gemacht. Insgesamt sind es 100% (20 + 80).

Könnte es am "border" liegen? Falls ja, wie kann ich das dann richtig stellen? Denn so was wie 20% und 79% sieht nicht wirklich schön aus und vorallem kann man dann nicht sicher sein, dass die Ganze breite ausgenutzt wird.

[Kropff]

die border wird laut box-modell zur breite hinzugezählt, d.h. du hast 20% + 1 pixel und 80% + 1 pixel, dann passt das natürlich nicht mehr, weil 2 pixel zuviel sind.

EDIT:

---

eine ergänzung

---

weise das float nur dem ersten(!) element zu, beim zweiten arbeitest du mit margin-left

gruß
peter

[deNiz83]

Habe float ganz rausgenommen. War ja eh nicht notwendig, oder?

Was wolltest du mir mit dem margin-left sagen? Das habe ich nicht verstanden.

Wie schaffe ich es trotz der border die Breite der Seite zu 100% auszunutzen?

[Kropff]

du floatest das erste element und gibts dem eine bestimmte breite. da das nachfolgende div zu den blockelementen gehört, nimmt es so viel platz in anspruch, wie da ist. dem mußt du dann nur ein entsprechenden margin verpassen, damit es auch wirklich links von ersten element steht.

die theorie zu css und zwei tutorials findest du hier

gruß
peter

[deNiz83]

Habe das jetzt mal gemacht. Jetzt macht der IE Probleme.

Firefox stellt alles richtig da, aber IE hat ne Lücke von 2, 3 px zwischen den beiden Boxen.

1. Box
Breite: 20%
float: left

2. Box
keine Breiten-Angabe
margin-left: 20%

Gibt es evtl. eine ganz andere Methode, wie ich das realisieren kann oder hat Jemand noch ein Vorschlag, wie ich das Problem lösen kann?