Markus: Darstellungsproblemchen IE / Firefox...

Tach Post!
Ich hätte da einige kleinere Fragen zu Darstellungsprobleme meiner Seite. Ich hab euch mal die vorläufige Startseite hochgeladen:

http://web13.ipx10814.ipxserver.de/download/hp/index.html

Unterhalb des Banners sieht man links und rechts einen schwarzen Balken. Ich hab mir das so gedacht, dass ich ein <div> formuliere und dem den background="black" setze. In dieses <div> packe ich dann zwei <p>-Elemente, von denen eins links floatet, und das andere rechts. Somit hätte ich einen schönen durchgehenden Balken mit Text links und rechts. Tut aber irgendwie nicht wie gedacht - warum?

Im Firefox stört mich:

  • der schwarze Balken gehört direkt unter das obere Banner. Abstände hab ich in meinem CSS nicht formuliert - woher kommt die Lücke?

  • unterhalb des Fußzeilen-<div> kommt nochmal eine Lücke von der ich keine Ahnung habe woher der FF die hat...

Im IE stört:

  • die Navi links ist viel zu weit auseinandergezogen - warum macht er das nicht so schön wie im Firefox?
  • klicke ich auf einen Link in der Navi, und gehe dann auf die Seite zurück ist der geklickte Link unterstrichen, obwohl ich im CSS für "visited" text-decoration auf "none" gesetzt habe. Keine Ahnung wo er das her hat.

Wäre wunderbar, wenn ihr mir ein wenig auf die Sprünge helfen würdet, vor allem an dem schwarzen Balken knoble ich jetzt schon seit Stunden ohne brauchbare Resultate zu erzielen... :-(

Und wenn wir schon dabei sind: was haltet ihr vom Design an sich? Macht das was her oder ist das eher augenkrebsverursachend?

Gruß & Dank! Markus.

  1. Du musst für #kopfleiste width: 100% definieren.
    Der Abstand zwischen der schwarzen Leiste kommt vom p Tag, dass den Banner einschließt. Entferne das p Tag um definiere für den Banner(img) umbedingt per CSS display: block, sonst hast du noch einen 3px Abstand.

    1. Du musst für #kopfleiste width: 100% definieren.
      Der Abstand zwischen der schwarzen Leiste kommt vom p Tag, dass den Banner einschließt. Entferne das p Tag um definiere für den Banner(img) umbedingt per CSS display: block, sonst hast du noch einen 3px Abstand.

      Merci euch beiden, ich denke eure Antworten helfen weiter. Das mit dem <p>-Tag entfernen geht aber nicht (denke ich) - zumindest wenn ich valides XHTML schreiben möchte gehört img als inline-Element in ein <p>-Tag o.ä., oder liege ich falsch?

      Ich werd es mal mit alle Abstände auf 0 setzen versuchen und für die #kopfleiste 100% width definieren.

      Merci, Markus

      1. Du musst für #kopfleiste width: 100% definieren.
        Der Abstand zwischen der schwarzen Leiste kommt vom p Tag, dass den Banner einschließt. Entferne das p Tag um definiere für den Banner(img) umbedingt per CSS display: block, sonst hast du noch einen 3px Abstand.

        Merci euch beiden, ich denke eure Antworten helfen weiter. Das mit dem <p>-Tag entfernen geht aber nicht (denke ich) - zumindest wenn ich valides XHTML schreiben möchte gehört img als inline-Element in ein <p>-Tag o.ä., oder liege ich falsch?

        Ich werd es mal mit alle Abstände auf 0 setzen versuchen und für die #kopfleiste 100% width definieren.

        Merci, Markus

        Willst Du einen durchgängig schwarzen Balken, dann musst Du nicht für die <p>-Tags die Hintergrundfarbe definieren, sondern für den <div>, der die <p>-Tags umschließt. Du hast einfach zu kompliziert gedacht. So sparst Du sogar eine background-color-Regel.

        Die Überschriften finde ich übrigens nicht zu groß. Für leicht Schwersichtige wie mich ist der Fließtext sogar eine Spur zu klein.

        Grüße
        Nico

        1. Ahoi!

          Willst Du einen durchgängig schwarzen Balken, dann musst Du nicht für die <p>-Tags die Hintergrundfarbe definieren, sondern für den <div>, der die <p>-Tags umschließt. Du hast einfach zu kompliziert gedacht. So sparst Du sogar eine background-color-Regel.

          Wenn du mein CSS anschaust findest du genau diese Regel unter #kopfzeile. Erst als das nicht funktioniert hat, hab ich versucht in den <p>-Tags herumzupfuschen...

          Nachdem ich für das <div> width= 100%; gesetzt habe funzt es übrigens im IE. Der FF ignoriert mein flehen weiterhin...

          Die Überschriften finde ich übrigens nicht zu groß. Für leicht Schwersichtige wie mich ist der Fließtext sogar eine Spur zu klein.

          Danke für den Tip!

          Gruß & Dank, Markus

  2. Hallo,

    • der schwarze Balken gehört direkt unter das obere Banner. Abstände hab ich in meinem CSS nicht formuliert - woher kommt die Lücke?

    Die Lücke könnte daher kommen, dass Du keine Abstände definiert hast. (Häh – wie das denn?!) Jeder Browser hat für verschiedene Elemente wie <h1> etc. Defaultabstände. Um diese zu eliminieren, steht in meinen css immer als erstes

      
    * {  
        margin: 0;  
        padding: 0;  
    }  
    
    

    Das haut alle Abstände raus und man hat eine Basis, von der man ausgehen kann.

    Vielleicht hängen einige Deiner Probleme damit zusammen.

    Und wenn wir schon dabei sind: was haltet ihr vom Design an sich? Macht das was her oder ist das eher augenkrebsverursachend?

    Das Design ist erfrischend unaufregend ohne Firlefanz und gefällt mir daher ziemlich gut. Marginales Detail: Die Überschriften und die Links finde ich ein bisschen bollerig. Entweder würde ich sie etwas kleiner machen und/oder nicht schwarz lassen.

    Meine zwei Øre.

    Gruß
    Olaf