✔ Lücke im IE

Status
Nicht offen für weitere Antworten.
D

dasraz

Mitglied
Hallo zusammen!

Bin von meinem Chef beauftragt worden, eine Seite für dessen Frau zu basteln. Habe dazu von einer Grafikerin eine psd bekommen, welche ich momentan versuche umzusetzen.

Das Grundgerüst steht bereits, allerdings habe ich ein Problem mit der unterschiedlichen Darstellung von Firefox und IE (ist ja nicht unüblich) und finde keine Lösung dafür.

Einen Blick auf die Seite kann man hier werfen --> Website

Das erste Darstellungsproblem ist, dass beim Übergang des rosanen Balken unten zur Sprechblase auf der linken Seite eine Lücke im IE entsteht. Im Firefox hingegen ist de Übergang sauber. Jetzt bin ich ratlos, wie ich das beheben kann.

Hier erstmal der CSS-Code:

Code: 
    * {
        margin:0;
        padding:0
    }
    
    #container {
        width:900px;
        margin:50px auto;
        border:1px solid #000000;
    }
    #header {
        margin:0;
        padding:0;
        background-color:#FCF4F5;
    }
    #nav {
        height:24px;
        background-color:#cb2139;
        color:#f8e1e5;
        text-align:center;
        padding-top:6px;
        margin:0;
    }
    #logo {    
        margin:0;
        float:left;
    }
    #footer {
        height:30px;
        background-color:#cb2139;
        margin:0;
    }
    .headImg {
        float:right;
        margin:0;
    }
    .navpoint {
        margin-right:50px;
        font-weight:bold;
        font-size:16px;
    }
    .breaker {
        clear:both;
        margin:0;
        padding:0;
    }
    #left {
        width:223px;
        height:525px;
        float:left;
        margin:0;
        padding:0;
        overflow:hidden;
    }
    #right {
        width:auto;
        height:525px;
        background-color:#CCCCCC;
    }
    #bottom {
        width:676px;
        background-color:#CCCCCC;
        float:left;
    }
    #content {
        background-color:#00FF99;
        width:676px;
        height:415px;
        margin:0px;
        padding:5px;
        overflow:auto;
    }
    #upper {
        height:415px;
        background-color:#ffffff;
        overflow:auto;
    }
    
    #text {
        margin:10px 10px 10px 10px;
    }
    #lower {
        height:110px;
        background-color:#99CC33;
        background-image:url(img/bottom.png);
        background-repeat:repeat-x;
    }
Und hier der HTML-Code
Code: 
<body>
    <div id="container">
        <div id="header">
            <img src="img/logo.png" id="logo" />
            <img src="img/headimg.png" class="headImg" />
            <div class="breaker"></div>
        </div>
        
        <div id="nav">
            <span class="navpoint">Home</span>
            <span class="navpoint">Vita</span>
            <span class="navpoint">Angebot</span>
            <span class="navpoint">Kontakt</span>
            <span class="navpoint">Impressum</span>
        </div>
        
        <div id="left">
            <img src="img/left.png" style="margin:0px;"/>
        </div>
        <div id="right">
            <div id="upper">
                <div id="text">
                    <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
                    <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
                    <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
                    <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
                </div>
            </div>
            <div id="lower">&nbsp;</div>
        </div>
        <div class="breaker"></div>
    
    </div>
</body>
Es wäre super nett, wenn ihr mir Tipps geben könntet, wie ich speziell dieses Problem (die Lücke im IE) beheben kann.
Allerdings bin ich auch für grundsätzliche Hinweise, was den Aufbau und die Formatierung der Seite mit CSS betrifft dankbar.
Ich bin nämlich kein CSS-Profi und kann mir vorstellen, dass ich manche Dinge recht umständlich oder suboptimal angegangen bin.

Ich danke euch schonmal im Vorraus!

Gruß,
raz
 
Hi!
Als grundsetzlichen Tip (der auch dein grafik-lückenproblem beheben würde):
Da sich die Größe deines Layouts ja nicht ändert und du den Text innerhalb des Designs scrollen lassen willst würde ich an deiner stelle das komplette Design so wie es ist als eine einzige Hintergrundgrafik deines Containers speichern.
Die Elemente in denen dann der Text erscheint würde ich mit position:absolute an die richtigen stellen positionieren.
Generell gibt es auch sogenannte "CSS-Resets" die du in deine CSS Datei einbinden kannst und welche alle vom Browser voreingestellten Werte wie margin oder padding zurücksetzen sollen.
 
Hi!

Erstmal danke für die interessante Idee! Allerdings ist das Layout nicht so statisch, wie es sich gerade darstellt.

Zum Beispiel solll das Bild im Header neben dem Logo (aktuell "education") mit jedem angeklickten Navilink durch ein anderes getauscht werden.

Desweiteren sollen auch die Titel der gerade aktiven Navigationspunkte nochmals als Grafik unten rechts auf dem roten Balken platziert werden.

Theoretisch könnte ich das auch mit position:absolute managen, aber bekomm ich dann nicht ein Problem, wenn jemand eine andere Auflösung verwendet als ich?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück