IE stellt Page mit Spalten dar!

[Hitrix]

Hallo, habe folgendes Problem:

bin gerade dabei meine Seite zu vercoden und dabei stoße ich auf ein paar Probleme :( Hoffe ihr könnt mir dabei weiterhelfen!

Hier erst mal die Links zu den Quelldateien:

Landesrektorenkonferenz Baden-Würtemberg
http://hitrix.pytalhost.de/stylesheet2.css

Wenn man sich die Page nun mit dem IE anzeigen lässt, sieht man das zwischen der Navigation und dem Header und zwischen der Navi und dem Contentbereich eine Lücke ist, diese stellt der Firefox nicht dar!

Hat jemand eine Idee wie ich dieses Problem beheben könnte?!

danke schon mal im vorraus

 

[Efchen]

Hallo,

ich hab zwar grad keinen IE zur Verfügung, aber ich würde empfehlen, mal die margins/paddings zu überprüfen. Du willst, dass sie 0 sind, hast aber nicht explizit angegeben, dass sie 0 sein sollen. Daher kannst Du nicht erwarten, dass sie auch 0 sind. Soweit die Theorie. Obs hilft, wirst Du merken.

Eine Frage noch, warum hast Du die <ul> vom Menü nochmal extra in ein <div> gepackt, wo <div> doch dazu da sind, mehrere Elemente zu gruppieren? Das <div> ist hier völlig überflüssig. Bitte keine <div>-Suppe!

Gruß,
-Efchen

 

[prm]

Sieh mal ob dir das weiterhilft:
Lücke am unteren Bildrand

 

[Hitrix]

zu Efchen:

Wieso ist der <div> überflüssig? der Container ist für die Navigation gedacht und es sind auch nur die Buttons drin, was ist denn daran falsch? Meinst du das ich hin mit dem Header in einen <div> packen soll? Habe padding: 0px; und margin: 0px; schon ausprobiert ohne Erfolg!

zu prm:

Ja der Link ist eigentlich nicht schlecht... wenn ich in der css Datei für alle img vertical-align: bottom festlege dann ist die Lücke weg, dann habe ich aber ganz oben eine Lücke :(

http://img118.imageshack.us/img118/909/89441858xf1.jpg

 

[prm]

Dann nimm besser

display: block;

 

[Hitrix]

http://img397.imageshack.us/img397/8926/24016740pd4.jpg

Erg. für:

img { border: 0;
display: block;
}


und wenn ich es nur für den Container #navi mach dann bringt es gar nichts!

Also habe es nun geschafft das die Lücke unten weg ist! Nun bleibt noch die obere!!!

habe folgendes gemacht:

in der CSS Datei

#navi img
            {
            
    display: block;
    
            }

 

[Efchen]

Wieso ist der <div> überflüssig? der Container ist für die Navigation gedacht und es sind auch nur die Buttons drin, was ist denn daran falsch?

Du hast doch schon einen Container, das <ul>, wozu brauchst Du noch einen Container?
Das ist, wie wenn Du beim Einkaufen eine Einkaufstüte in eine andere Einkaufstüte steckst, um da Deine Einkäufe reinzustecken. Und bitte jetzt nicht antworten, dass die innere Tüte ein Loch hat :-)

 

[Hitrix]

<ul> ist doch bloß eine "unordered list", das ist doch kein Container? Hab ich da was falsch verstanden?

 

[prm]

Im #header sind ja auch noch Grafiken. Füge deshalb noch dies ein:

#header img
            {
            
    display: block;
    
            }

 

[Hitrix]

sieht wie folgt aus:

http://img383.imageshack.us/img383/228/51043233zd0.jpg

 

[prm]

Ich habe mir den Link von deinem allerersten Post nochmal angesehen. Sieht sowohl im FF als auch IE7 perfekt aus.
Der Fehler tritt offensichtlich nur im IE 6 auf.

Ich vermute, dass er mit dem Suchfeld und der dazugehörigen Grafik zusammenhängt. Allerdings konnte ich den dazugehörigen Code im Quelltext nicht finden.
Versuche mal, das Suchfeld zu löschen oder kommentiere es aus.
Es muss dann für den IE6 möglichwerweise anders eingebaut werden.

 

[Hitrix]

das Suchfeld ist eine ganz normale Grafik, wieso sollte es mit dieser ein Problem geben?!

Die Grafik heißt "image_03.jpg" und befindet sich im Ordner images auf dem FTP!

Die Stelle wo die Grafik im Quelltext eingebaut ist kannst du dir nun anschauen!

 

[prm]

Noch eine letzte Idee:

#header img
            {
            
    float: left;
    
            }

Und HTML:

</div>
<div style="clear: both;"></div>
<div id="navi">

Die <br>'s im Header mal weglassen.
Allerdings: Wenn später ein echtes Suchfeld reinkommt, kann es wieder anders aussehen.

 

[Hitrix]

Noch eine letzte Idee:

#header img
            {
            
    float: left;
    
            }

Und HTML:

Die <br>'s im Header mal weglassen.
Allerdings: Wenn später ein echtes Suchfeld reinkommt, kann es wieder anders aussehen.

Wohooo das erste hat geklappt ich dank dir !!!

Hab noch ne kleine Frage:

Habe ganz unten einen <div> in dem der footer als background-image festgelegt ist, doch der Footer wird komplett nicht angezeigt bei mir wieso?

HTML Code:

<div id=footer">

</div>

CSS Code:

#footer

        {
    width:802px;
    height: 63px;
    background-image: url(images/image_39.jpg); 

        }

gelöst!

Danke an alle!

 

[prm]

Offensichtlich fehlt da nur ein Anführungszeichen.

<div id="footer">

Übrigens hab ich mir heute Nacht nochmal so meine Gedanken über deinen #header gemacht: Es nicht gerade üblich so viele Teilgrafiken zu verwenden. Viel sinnvoller wäre es, diese ganzen Teile, die bei dir noch auf mehrere Zeilen verteilt sind in einer Grafik zusammenzufassen und die dann als eine Hintergrundgrafik einzubinden. Das Suchfeld kann dann innerhalb des #headers mit entsprechenden Margin-Werten positioniert werden.
Mit einem Grafikprogramm müsstest du eine neue, leere Grafik erstellen, die den Ausmaßen deines #headers entspricht. Darein kopierst du nun alle Einzelgrafiken und speicherst alles als Gesamtgrafik ab.
Eine Anleitung, wie es z.B. mit dem Grafikprogramm PhotoImpact geht, findest du hier, Ziffer 10:
PI-Kurs: 2. Fotocollage PopArt ... Teil 2

 

[Efchen]

<ul> ist doch bloß eine "unordered list", das ist doch kein Container? Hab ich da was falsch verstanden?

Warum sollte das kein Container sein?
Gut, "Container" ist vermutlich ein unglücklich gewählter Begriff.
Es gibt in HTML Block-Elemente und Inline-Elemente. Diese haben bestimmte Eigenschaften. Block-Element z.B. dehnen sich immer auf 100% Breite aus, stehen immer untereinander usw. Inline-Elemente stehen auf einer Zeile, nebeneinander und können keine Höhe angegeben bekommen.
<div> ist ein Block-Element (das allgemeine Block-Element) und <ul> ist ein Block-Element. <address> ist ein Block-Element, <h1> ist auch ein Block-Element. Alle diese Tags verhalten sich von Grund auf gleich. Sie haben lediglich unterschiedliche, nicht näher definierte (und daher auch möglicherweise von Browser zu Browser unterschiedliche) CSS-Eigenschaften als Default.

Kurzum, die beiden Container (oder besser Block-Elemente) <div> und <ul> verhalten sich beide exakt gleich. Um ein <ul> darzustellen, zu positionieren oder bestimmte Eigenschaften zu vergeben, ist es nicht notwendig, das Element nochmal in ein weiteres Block-Element zu packen, das sich genauso verhalten wird, wie die Liste selber.

Das ist eine der Grundfunktionsweisen von HTML, die HTML mit CSS so einfach machen, wo aber sehr viele nie was von gehört haben oder es nicht verstehen, weswegen HTML für sie so schwer zu sein scheint.

Gruß,
-Efchen