IE 6 macht Probleme - DIV Layout

Status
Nicht offen für weitere Antworten.
I

Identität

Erfahrenes Mitglied
Hi,
also ich habe zwei Bilder gemacht. Einmal mein Firefox, der alles richtig darstellt, dann der IE 6, der alles anders macht. Die Inhaltsbereiche sind anders, die Schatten an der Seite musste ich per Hack ändern und noch einiges mehr. Ich habe alles wichtige auf den Bildern weggemacht, anders geht es leider nicht. Hoffentlich könnt ihr mir helfen. Sollten die Grafiken zu schlecht sein, kann ich euch Mal den Link zur Seite per PM schicken.

Bild Firefox
http://picfront.de/d/AHZjiOFYWV5/Unbenannt-1.gif

Bild IE6
http://picfront.de/d/fjpdp8x9O6Y/Unbenannt-2.gif

Codes

HTML: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>

  <TITLE>Text</TITLE>

  <link rel="stylesheet" type="text/css" href="styles/style.css" />

  <script src="javascript/js-global/FancyZoom.js" type="text/javascript"></script>
  <script src="javascript/js-global/FancyZoomHTML.js" type="text/javascript"></script>

 </HEAD>

<body onload="setupZoom()">

<a name="top"></a>

    <div id="schatten">

         <div style="float:left;">
             <img src="images/layout/bg_left.gif" />
         </div>

         <div style="float:right;">
             <img src="images/layout/bg_right.gif" />
         </div>

          <div id="container" class="clearfix">
            <div id="logobar">
                <img src="images/layout/logo.gif" alt="Logo" />
            </div>

            <div id="navi">

                <a class="navi_text" href="#">Text</a>
                <a class="navi_text" href="#">Text</a>
                <a class="navi_text" href="#">Text</a>
                <a class="navi_text" href="#">Text</a>
                <a class="navi_text" href="#">Text</a>
                <a class="navi_text" href="#" style="float:none;">Text</a>
            </div>

            <div id="content" class="clearfix">

                <img src="images/content/head_start.jpg" style="margin-bottom:7px;"/>

                <div id="left">
                    <div style="width:182px;height:320px;background-image:url(images/content/sprechzeiten.gif);padding-left:5px;">
                        <p style="padding-top:55px;">
                            <span style="padding-left:10px;">Text</span><br />
                            <span style="padding-left:10px;">Text</span><br />
                            <br />
                            <span style="padding-left:10px;">Text</span><br />
                            <span style="padding-left:10px;">Text</span></p>
                            <span style="padding-left:11px;"><img src="images/content/trennlinie_box.gif" alt="Trennlinie" /></span>
                            <p><span style="padding-left:40px;"><a href="images/content/karte_gr.gif" title="Mehr dazu unter Anfahrt"><img src="images/content/karte.gif" alt="Karte" border="" /></a></span></p>
                    </div>
                </div>

                <div id="right" style="padding-top:15px;">
                    <h1>Text</h1>
                    <p class="unter_h1">Text</p>

                    <h1>Text</h1>
                    <p class="unter_h1">Text</p>

                    <img src="images/content/trennlinie.gif" style="margin-bottom:20px;"/>
                    
                    <p style="width:148px;float:left;">
                        <img src="images/content/qualitaet_logo.gif" />
                    </p>
                    
                    <p style="width:5px;float:left;margin:0 25px;">
                        <img src="images/content/trennlinie_2.gif" style="margin-bottom:20px;"/>
                    </p>
                    <p>
                        <strong>Text</strong><br />
                        Text
                    </p>
                </div>

            </div>

            <div id="footer">
                <span style="width:217px;background-color:#f8be82;line-height:21px;display:block;float:left;">&nbsp;</span>
                <span style="color:#fff;font-size:11px;padding-left:10px;">Text</span>
                <span style="padding-left:152px;"><a href="#top" style="color:#fff;text-decoration:none;"><img src="images/layout/nachoben.gif" border="" alt="Pfeil" /> Text</a></span>
            </div>

          </div>
      </div>

 </BODY>
</HTML>

HTML: 
body{
    margin:0 0 0 80px;
    font-family: verdana,arial,tahoma;
    font-size:13px;
    background-color: #f8f8f8;
    color: #727272;
}
a{
    color: #727272;
}
a:hover{
    text-decoration:underline;
}
p{
    margin-top:10px;
}
h1{
    font-size:16px;
    color:#f66919;
    margin:0;
}
#schatten{
    width:794px;
}
/*IE6 Hack*/
  * html #schatten { /*IE6 only*/
    width: 814px;
  }
#container{
    width: 730px;
    background-color: #fff;
    margin-left:32px;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#logobar{
    width: 730px;
    padding-left: 22px;
    padding-top: 10px;
    height: 70px;
    margin-bottom: 10px;
}
#navi{
    width: 730px;
    line-height: 23px;
    background-image: url(../images/layout/bg_navi.png);
}
#navi:hover{
    width: 730px;
    line-height: 23px;
}
  * html #content { /*IE6 only*/
    width: 622px;
  }
#content{
    width: 642px;
    padding:12px 44px 0px 44px;
    background-image:url(../images/layout/bg_content.gif);
    background-repeat:no-repeat;
    margin-bottom:20px;
}
#left{
    float: left;
    width: 197px;
}
#right{
    float: right;
    width: 445px;
}
#footer{
    width:728px;
    line-height:21px;
    background-color:#f66919;
    border:1px solid #fff;
}
.navi_text{
    font-size: 13px;
    font-weight:bold;
    color:#737373;
    text-decoration:none;
    float: left;
    padding: 0 20px;
    height:23px;
    border-right:1px dotted #ccc;
    letter-spacing:1px;
}
.navi_text:hover{
    color:#393939;
    text-decoration:underline;
    background-image: url(../images/layout/bg_navi_hover.gif);
}
.unter_h1{
    padding-left:20px;
    margin-bottom:25px;
}


Ich bin wirklich für jede Hilfe dankbar.
 
Hi,

hast du es schon mal ohne den XML-Prolog vor der Doctype-Deklaration versucht, durch den der IE6 in den "Quirksmodus" gesetzt wird?

Wenn ich diese Angabe rausnehme, kann ich soweit keine Unterschiede zum FF feststellen.
 
Danke ein wenig hat sich dadurch verändert. Ich habe dir Mal eine PM gesendet. Vielen Dank, und das meine ich wirklich. Du bist wohl einer der besten in dem Gebiet wie ich hier sehe.
 
Nimm mal folgende Änderungen bzw. Erweiterungen vor:

Code: 
        <div id="schatten">

                 <div style="float:left;width:32px;margin-right:0 !important;margin-right:-3px;">
                         <img src="http://www.tutorials.de/forum/images/layout/bg_left.gif" />
                 </div>

                 <div style="float:right;width:32px;margin-left:0 !important;margin-left:-3px;">
                         <img src="http://www.tutorials.de/forum/images/layout/bg_right.gif" />
                 </div>

                  <div id="container" class="clearfix">
                        <div id="logobar">
                                <img src="http://www.tutorials.de/forum/images/layout/logo.gif" alt="Logo" />
                        </div>

                        <div id="navi">

                                <a class="navi_text" href="#">Praxis</a>
                                <a class="navi_text" href="##">Praxisteam</a>
                                <a class="navi_text" href="###">Leistungen</a>
                                <a class="navi_text" href="#">Kontakt</a>
                                <a class="navi_text" href="#">Anfahrt</a>
                                <a class="navi_text" href="#" style="float:none;">Links</a>
                        </div>

                        <div id="content" class="clearfix">

                                <img src="http://www.tutorials.de/forum/images/content/head_start.jpg" width="642" height="172" style="margin-bottom:7px;"/>

                                <div id="left">
                                        <div style="width:182px;height:320px;background-image:url(images/content/sprechzeiten.gif);padding-left:5px;">
                                                <p style="padding-top:55px;">
                                                        <span style="padding-left:10px;">Montag - Donnerstag</span><br />
                                                        <span style="padding-left:10px;">08.00 Uhr - 13.00 Uhr</span><br />
                                                        <br />
                                                        <span style="padding-left:10px;">Freitag</span><br />
                                                        <span style="padding-left:10px;">08:30 Uhr - 12.30 Uhr</span></p>
                                                        <span style="padding-left:11px;"><img src="http://www.tutorials.de/forum/images/content/trennlinie_box.gif" alt="Trennlinie" /></span>
                                                        <p><span style="padding-left:40px;"><a href="http://www.tutorials.de/forum/images/content/karte_gr.gif" title="Mehr dazu unter Anfahrt"><img src="http://www.tutorials.de/forum/images/content/karte.gif" alt="Karte" border="" /></a></span></p>
                                        </div>
                                </div>

                                <div id="right" style="padding-top:15px;">
                                        <h1>Schmerztherapie - Muster</h1>
                                        <p class="unter_h1">Schmerztherapie - Muster</p>

                                        <h1>Acupuncture - Muster</h1>
                                        <p class="unter_h1">Dr. Yamamoto - Muster</p>

                                        <img src="http://www.tutorials.de/forum/images/content/trennlinie.gif" style="margin-bottom:20px;"/>

                                        <p style="width:148px;float:left;">
                                                <img src="http://www.tutorials.de/forum/images/content/qualitaet_logo.gif" />
                                        </p>

                                        <p style="width:5px;float:left;margin:0 25px;">
                                                <img src="http://www.tutorials.de/forum/images/content/trennlinie_2.gif" style="margin-bottom:20px;"/>
                                        </p>
                                        <p>
                                                <strong>QEP?</strong><br />
                                                Seit dem 01.01.2004 schreibt der Gesetzgeber im SGB V vor, dass Vertragsärzte einrichtungsintern ein Qualitätsmanagement einzuführen und weiterzuentwickeln haben.
                                        </p>
                                </div>

                        </div>

                        <div id="footer">
                                <span style="width:217px;background-color:#f8be82;line-height:21px;display:block;float:left;">&nbsp;</span>
                                <span style="color:#fff;font-size:11px;padding-left:10px;">© Muster</span>
                                <span style="padding-left:152px;"><a href="#top" style="color:#fff;text-decoration:none;"><img src="http://www.tutorials.de/forum/images/layout/nachoben.gif" border="" alt="Pfeil" /> nach oben</a></span>
                        </div>

                  </div>
          </div>
Code: 
body{
        margin:0 0 0 80px;
        font-family: verdana,arial,tahoma;
        font-size:13px;
        background-color: #f8f8f8;
        color: #727272;
}
a{
        color: #727272;
}
a:hover{
        text-decoration:underline;
}
p{
        margin-top:10px;
}
h1{
        font-size:16px;
        color:#f66919;
        margin:0;
}
#schatten{
        width:794px;
}

/*IE6 Hack*/
/*  * html #schatten {
        width: 822px;
  }*/ /* auskommentiert = deaktiviert */

#container{
        /*width: 730px;*/  /* auskommentiert = deaktiviert */
        background-color: #fff;
        margin:0 32px !important;
        margin:0 29px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#logobar{
        width: 708px; /* 708px + 22px = 730px */
        padding-left: 22px;
        padding-top: 10px;
        height: 70px;
        margin-bottom: 10px;
}

#navi{
        width: 730px;
        line-height: 23px;
        background-image: url(../images/layout/bg_navi.png);
}

#navi:hover{
        width: 730px;
        line-height: 23px;
}

/*   * html #content { 
        width: 622px;
  }*/ /* auskommentiert = deaktiviert */

#content{
        width: 642px;
        padding:12px 44px 0px 44px;
        background-image:url(../images/layout/bg_content.gif);
        background-repeat:no-repeat;
        margin-bottom:20px;
}

#left{
        float: left;
        width: 197px;
}

#right{
        float: right;
        width: 445px;
}

#footer{
        width:728px;
        line-height:21px;
        background-color:#f66919;
        border:1px solid #fff;
}

.navi_text{
        font-size: 13px;
        font-weight:bold;
        color:#737373;
        text-decoration:none;
        float: left;
        padding: 0 20px;
        height:23px;
        border-right:1px dotted #ccc;
        letter-spacing:1px;
}

.navi_text:hover{
        color:#393939;
        text-decoration:underline;
        background-image: url(../images/layout/bg_navi_hover.gif);
}

.unter_h1{
        padding-left:20px;
        margin-bottom:25px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück