Auf der Website http://forechart.blum-group.de/
habe ich 2 Probleme:
1. Im IE (8.06) wird die Hintergrund Farbe nicht angezeigt. Im FF ist es einwandfrei.

HTML-Code:

div{
background-color: rgba(255,255,255,0.8);
opacity: 80%;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
color: black;
}

2. Abstand des unteren Div ist auf der Startseite einwandfrei. Wenn ihr aber beispielsweise auf Impressum klicken ist ein größerer Abstand und das Menü liegt nicht mehr auf. Wenn ich den margin-top erhöhe geht es weiter weg. Wenn ich ihn auf 0 setze dann bleibt der Abstand trotzdem unverändert (beim Impressum)! Auf der Startseite verändert sich der Abstand aber tatsächlich auf 0 wenn ich den margin-top auf 0px setze.

Oberes Div

HTML-Code:

.divTop{
width: 800px;
margin: 0 auto;
text-align: center;
}

Div darunter

HTML-Code:

.wrap{
width: 800px;
margin: 0 auto;
margin-top: 8px;
}

Auf der Startseite ist 2x das Login Div im wrap-Div

HTML-Code:

.login{
width: 400px;
float: left;
color: black;
height: 200px;
}

Auf der Impressumseite ist das Div nicht drin. Sobald ich es einfüge stimmt der Abstand. Aber warum?

Hier noch das Menü

HTML-Code:

span.menu{
 font-family: "Trebuchet MS", Arial;
 font-size: 14px;
 padding: 9px;
 margin-right: 12px;
 background-color: #333333;
 color: white;
 border: 2px solid #666666;
 border-bottom: none;
}

Ich hoffe ich habe mich verständlich ausgedrückt. Danke für eure Hilfe!

Zu 1.
http://css-tricks.com/rgba-browser-support/

Also nimm einfach eine "normale" Angabe der Hintergrundfarbe. Die Transparenz hast du doch ohnehin extra angegeben. Außerdem erwartet "opacity" einen Wert zwischen 0 und 1. Und Firefox untersützt inzwischen auch "opacity", man kann also auf "-moz-opacity" verzichten.

Code css:

1 2 3 4 5 6

div{ background-color: #fff; opacity: 0.8; filter: alpha(opacity=80); color: black; }

Edit:
Zu 2.
Das liegt daran, dass du auf der Startseite zwei Boxen hast, welche die Eigenschaft "float:left" besitzen. Deshalb werden Sie nicht von der Navigation nach unten gedrängt. Beim Impressum beinhaltet dein "wrap" keine float-Element, also beginnt der Inhalt erst unterhalb der Navigation.

ad1: Wenn ich das so mache, ist alles transparent. Vorher waren die Input Felder usw. nicht durchsichtig.

ad2: Gibt es eine Möglichkeit ohne die float Elemente das "wrap" direkt an die Navigation anzuschließen?

1. Da bleibt dir nur ein png als Hintergrundbild. Bis auf ganz alte Browser ist es dann so, wie du es willst. Und alte Browser (z.B. IE 6) stellen es dann eben deckend-weiß dar, was ja keinem weh tut. Und du brauchst keine proprietären CSS-Attribute mehr.

2. Lass deine Menüpunkte (span) nicht über die Box hinausragen, sondern umschließe den Kopf nochmal mit einem div (unsichtbar). Das sollte helfen. Dann musst du noch den top-margin des wrappers entfernen.

Das ändert irgendwie nichts an der Tatsache, dass die Divs ohne das float Element nicht direkt anschließen. Hab mal das unsichtbare DIv durcheinen roten Rahmen sichtbar gemacht. Und im Impressum ist immer noch dieser Abstand. Hast du da noch ne Idee?

Den Abstand im Textfluß erzeugt das nachfolgende <h1>-Blockelement für die Überschrift 1. Ordnung "Impressum"

Code css:

1 2 3 4 5 6 7

h1{  font-family: Trebuchet MS;  font-size: 18px;  font-weight: normal;  padding-left: 10px;  margin-top:0; /* oberen Initialwert resetten */ }

Weils noch weitere Elemente mit diesem Verhalten gibt, und diverse sich im IE und dem Rest der Browser bzgl. der angewandten margin- oder padding-Eigenschaft unterscheiden, empfiehlt sich zu Beginn eines CSS der Universalselektor * mit diesem Regelblock:

Code css:

1 2 3 4

* { margin:0; padding:0; }

Wo im Textfluß des Docs die zurückgesetzten Abstände erwünscht sind, werden sie explizit deklariert.

spicelab das war der entscheidende Tipp! Danke!