CSS Layout im IE

bubu306 · 02.06.2009

Hallo zusammen

ich habe mit DV ein HTML Seite erstellt, in Firefox wird die Seite ohne Problme angezeigt. Sobald ich es mir im IE ansehen wird der DIV MAIN nach unten geschoben

Ich weiss das es mit den float zusammen hängen soll weiss aber nicht so genau, wo ich im Code dieses anpassen kann?

Hier mal der CSS Code

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
 
body {
}
#wrapper {
background-color:#FFFFFF;
border-bottom:1px solid #999999;
border-left:1px solid #999999;
border-right:1px solid #999999;
height:860px;
margin-left:auto;
margin-right:auto;
width:1000px;
}
#footer {
}
#header {
background-image:url(../images/header.png);
height:100px;
left:auto;
top:0;
width:1000px;
z-index:1;
}
#navi {
background-color:#004595;
float:left;
height:760px;
left:200px;
top:150px;
width:150px;
}
#table_field_2 {
margin-bottom:50px;
margin-left:20px;
margin-top:50px;
}
#field_4 {
margin-left:20px;
margin-top:0;
width:450px;
}
#lose {
margin-left:20px;
}
#team .Stil8 {
margin-left:10px;
margin-top:20px;
}
#field_3 .Stil6 {
height:0;
margin-left:10px;
}
#main {
float:left;
height:760px;
left:auto;
margin:0;
top:151px;
width:auto;
z-index:3;
}
#team_text {
margin-left:10px;
}

Herr_D · 02.06.2009

AW: CSS Layout im IE

Gib mal n Link zur Seite... ohne html ist das css sinnfrei...

und nutz mal die

[noparse]

Code:

Quelltext

[/noparse]

Ansicht...

Warum kriegt main auch noch ein float? Verwirrend alles

bubu306 · 02.06.2009

AW: CSS Layout im IE

Seite hab ich nur Lokal anbei der HTLM Code

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {font-family: Verdana, Arial, Helvetica, sans-serif}
.Stil2 {
    color: #d4021d;
    font-weight: bold;
    font-size: 24px;
}
.Stil4 {
    font-size: 18px;
    color: #004595;
    font-weight: bold;
}
.Stil5 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-top: 20px;
}
.Stil6 {font-size: 12px}
.Stil8 {
    font-size: 14px;
    font-weight: bold;
    color: #004595;
}
.Stil9 {color: #d4021d}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="header"> </div>
  <div id="navi">

    <div id="maurer">Raum für Bild "Bild1"</div>
    <div id="russ">Raum für Bild "Bild2"</div>
    <div id="schmitt">Raum für Bild "Bild3"</div>
    <p>&nbsp;</p>
  </div>
  <div id="main">
    <table width="850" height="727" border="0">

      
      <tr>
        <td>&nbsp;</td>
        <td height="10">&nbsp;</td>
      </tr>
      <tr>
        <td width="380"><div align="left"><img src="images/die3_button.png" alt="die3" width="300" height="252" hspace="0" /></div></td>
        <td width="520" height="10"><div id="table_field_2">
          <p align="left" class="Stil1"><span class="Stil2"></span><br />

            <span class="Stil4">? Text</span></p>
          <p class="Stil5 Stil6">&nbsp;</p>
          <p class="Stil5 Stil6">Das Team <br />
             </p>
        </div>          </td>

      </tr>
      <tr>
        <td height="10" align="left" valign="top"><div id="team"><span class="Stil8"></span></div></td>
        <td height="10" align="left" valign="top"><div id="lose"><span class="Stil8">10 Euro gibt es ab ??. Juni: </span></div></td>
      </tr>
      <tr>
        <td align="left" valign="top"><div id="team_text">
          <table width="315" border="0">

              <tr>
                <td width="309" align="left" class="Stil6 Stil9">A </td>
              </tr>
              <tr>
                <td align="left" class="Stil6">? ? </td>
              </tr>
              <tr>
                <td align="left" class="Stil6"></td>

              </tr>
              <tr>
                <td align="left" class="Stil6">&nbsp;</td>
              </tr>
              <tr>
                <td align="left" class="Stil6"><span class="Stil9">A</span><br /></td>
              </tr>
              <tr>

                <td align="left" class="Stil6"> ??<br /></td>
              </tr>
              <tr>
                <td align="left" class="Stil6"> .</td>
              </tr>
              <tr>
                <td align="left">&nbsp;</td>

              </tr>
              <tr>
                <td align="left" class="Stil6"><span class="Stil9">R </span><br /></td>
              </tr>
              <tr>
                <td align="left" class="Stil6"> ? ?<br /></td>
              </tr>

              <tr>
                <td align="left" class="Stil6"> </td>
              </tr>
            </table>
          </div>
          <p class="Stil6">&nbsp;</p>
        </td>
        <td width="520" align="left" valign="top"><div class="Stil6" id="field_4">

          <table width="498" border="0">
              <tr>
                <td width="11" align="right" valign="middle"><div align="right"><img src="images/quadrat_red.png" width="10" height="10" /></div></td>
                <td width="460" class="Stil6"></td>
              </tr>
              <tr>
                <td align="right" valign="middle"><div align="right"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></div></td>
                <td class="Stil6"> </td>

              </tr>
              <tr>
                <td align="right" valign="top">&nbsp;</td>
                <td valign="middle" class="Stil6"> </td>
              </tr>
              <tr>
                <td valign="middle"><div align="right"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></div></td>
                <td class="Stil6"></td>

              </tr>
              <tr>
                <td valign="middle"><div align="right"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></div></td>
                <td class="Stil6">a</td>
              </tr>
              <tr>
                <td valign="middle">&nbsp;</td>
                <td class="Stil6">&nbsp;</td>

              </tr>
              <tr>
                <td valign="middle">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td valign="middle">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>

              <tr>
                <td colspan="2" valign="middle"><p><span class="Stil8"></span><br />
                    r <br />
                </p>                </td>
              </tr>
            </table>
            </div></td>

      </tr>
      <tr>
        <td height="150" colspan="2" align="left" valign="top"><div id="footer">
          <table width="841" border="0">
            <tr>
              <td width="254" height="45" align="left" valign="middle">&nbsp;</td>
              <td width="292" align="left" valign="middle">&nbsp;</td>
              <td width="281" rowspan="3" align="right" valign="top"><div align="right"><img src="images/logo.png" width="209" height="131" border="0" align="top" usemap="#Map" /></div></td>
            </tr>

            <tr align="left" valign="middle">
              <td height="10"><div align="center"><img src="images/PDF_text_button_99_40.png" width="99" height="40" /></div></td>
              <td height="10"><div align="center"><img src="images/PDF_Flyer_button_99x40.png" width="99" height="40" /></div></td>
              </tr>
            <tr align="left" valign="middle">
              <td valign="top" class="Stil6"><div align="center"></div></td>
              <td height="21" class="Stil6">&nbsp;</td>
              </tr>

          </table>
        </div></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>

<map name="Map" id="Map"><area shape="rect" coords="4,6,206,127" href="" target="" />

</map></body>
</html>

Herr_D · 02.06.2009

AW: CSS Layout im IE

boah... es liegt irgendwo an der Tabelle, die ist wahrscheinlich zu breit...

Mein Tipp: Schmeiß den Code in die Tonne und fang anständig an...

...ach ja vergessen: Wenn das da oben dein CSS ist (Extradatei), dann gehört da

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>

Nicht rein...

bubu306 · 02.06.2009

AW: CSS Layout im IE

tja das hat man davon, wenn man einfach drauf los legt. Nach dem ich den Code gesehen habe ich mir das auch gedacht....autsch
so sollte das Layout aussehen

sokie · 02.06.2009

AW: CSS Layout im IE

wenn du so eine Struktur hast, wird es doch auch viel einfacher.

HTML:

<div id="aussen"><!-- breite und margin:0 auto; in der css angeben -->
  <div id ="header"><!-- hoehe im css  -->

  </div>
  <div id="navi"><!-- breite in css / float: left;-->
       <!-- hier kommt die navi hinein -->
       <!-- statt eines div könnte dieser Bereich auch direkt über die <ul> definiert werden-->
 </div>
 <div id="main"><!-- css: breite angeben überlegen ob die festlegung der Hoehe überhaupt Sinn macht... float: right-->
    <!-- Raum für die inhalte (warum muss es eine Tabelle sein?)-->
 </div>
 <div id="clearfix"><!-- css: clear: both; -->
  <!-- kann leer bleiben, oder für weitere Inhalte "footer" benutzt werden.-->
 <div>
</div><!-- ende "aussen" -->

so zB könnte die struktur der Seite aussehen. die frage stellt sich, wozu die Tabelle im main benötigt wird. Im allgemeinen Layout für alle Seiten einer Site haben Tabellen nichts zu suchen, es sei denn im allgemeinen Layout gibt es tabellarische Daten.

Herr_D · 02.06.2009

AW: CSS Layout im IE

Den Ansatz hast du ja auch schon ganz gut hinbekommen

Jetzt mußt du nur noch sehen, ob du die Tabelle überhaupt brauchst...

bubu306 · 02.06.2009

AW: CSS Layout im IE

wegen der folgenden Aufstellung die Tabelle:

Feld 1: soll ein Bild rein
Feld 2: soll zentriert (ausgerichtet) zum Bild ein Text rein
Feld 3: soll Text rein
Feld 4: soll Text rein aber anderer Text zum Feld 3 und ebenfalls zum Feld 3 ausgerichtet.

Da ich da noch nicht so Fit in CSS bin, hab ich es mit der Tabelle gemacht.

Herr_D · 02.06.2009

AW: CSS Layout im IE

Ägypten?

Zeichne mal auf

sokie · 02.06.2009

AW: CSS Layout im IE

da solltest du das bild ungesliced als background hineinlegen.
für die positionierung Blöcke, die in dem Bereich liegen kannst du entweder mit width height float und margin arbeiten, oder sie absolut positionieren (#main braucht in demFall ein position: relative).

HTML:

<div id="main"><!-- position: relative-->
  <div id="feld1"></div><!-- position: absolute; left: x; top: y; -->
  <div id="feld2"></div><!-- position: absolute; left: x; top: y; -->
  <div id="feld3"></div><!-- position: absolute; left: x; top: y; -->
  <div id="feld4"></div><!-- position: absolute; left: x; top: y; -->
</div><!--ende main-->

bubu306 · 02.06.2009

AW: CSS Layout im IE

@Herr_D

hier mal auf die schnelle

bubu306 · 05.06.2009

AW: CSS Layout im IE

Hallo zusammen, jetzt hab ich alles noch mal von neuem gemacht,
damit wir/ich mehr Ordnung in den Code bekommen.

Leider wird der DIV footer im IE unter dem Header angezeigt anstelle unten ganz unten....im FOX und Safari ohne problem.

Könnte Ihr mir sagen wo ran das liegen könnte ?

HTML Code

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>now title</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {
    color: #D3031C
}
.Stil2 {color: #004595}
.Stil3 {color: #000000; }
.Stil4 {
    color: #000000;
    font-size: 12px;
}
.Stil5 {
    font-size: 12px
}
.Stil6 {font-size: 10px}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="navi">
    <p>&nbsp;</p>
    <div id="bild1">
      <div align="right"><img src="images/1.png" alt="" width="72" height="72" /></div>
    </div>
    <div id="bild2">
      <div align="right"><img src="images/2.png" alt="" width="72" height="72" /></div>
    </div>
    <div id="bild3">
      <div align="right"><img src="images/3.png" alt="" width="73" height="73" /></div>
    </div>
    <p>&nbsp;</p>
  </div>
  <div id="main">
    <div id="field1"></div>
    <div id="field2">
      <h2 class="Stil1">title1</h2>
      <h3 class="Stil2">date</h3>
      <h5 class="Stil3 Stil5">text<br />
        text<br />
      text</h5>
    </div>
    <div id="field3">
      <h5 class="Stil2">Das Team:</h5>
      <p class="Stil4"><span class="Stil1">text</span><br />
        text<br />
        text<br />
        <br />
        <br />
        <span class="Stil1">text</span><br />
        text<br />
       text<br />
        <br />
      </p>
      <p class="Stil4"><br />
        <span class="Stil1">text</span><br />
        text<br />
      text</p>
      </div>
    <div class="Stil2" id="field4">
      <h5>text</h5>
      <table width="437" height="120">
        <tr>
          <td width="13" align="left"><img src="images/quadrat_red.png" width="10" height="10" /></td>
          <td width="414"><span class="Stil4">text</span></td>
        </tr>
        <tr>
          <td align="left"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></td>
          <td><span class="Stil4">text</span></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><span class="Stil4">text</span></td>
        </tr>
        <tr>
          <td align="left"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></td>
          <td><span class="Stil4">text</span></td>
        </tr>
        <tr>
          <td align="left"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></td>
          <td><span class="Stil4">text</span></td>
        </tr>
        <tr>
          <td align="left" class="Stil4">&nbsp;</td>
          <td class="Stil4">&nbsp;</td>
        </tr>
        <tr>
          <td align="left" class="Stil4">&nbsp;</td>
          <td class="Stil4">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2" align="left" class="Stil2"><h5>text</h5></td>
        </tr>
        <tr>
          <td colspan="2" align="left" class="Stil4">Text<br /></td>
        </tr>
        <tr>
          <td colspan="2" align="left" class="Stil4"></td>
        </tr>
      </table>
      <p class="Stil4">&nbsp;</p>
    </div>
    <div id="footer">
      <div id="button"><img src="images/2button.png" width="123" height="50" align="top" /></p>
      </div>
      <div id="flyer"><a href="Flyer.pdf"><img src="images/1button.png" width="123" height="50" border=0/></a></div>
      <div id="sponsor"><a href="page2.html"><img src="images/2button.png" width="123" height="50" border="0" href="page2.html" /></a></div>
      <div class="Stil6" id="datum">
        <div align="center">ab 01.01.2009</div>
      </div>
      <p>&nbsp;</p>
    </div>
  </div>
</div>
</body>
</html>

CSS Code

Code:

@charset "UTF-8";
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
    height: 860px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
}
#header {
    height: 100px;
    background-image: url(../images/header.png);
}
#navi {
    background-color: #004595;
    height: 760px;
    width: 150px;
    float: left;
}
#main {
    float: right;
    width: 850px;
}
#field1 {
    background-image: url(../images/die3_button.png);
    background-repeat: no-repeat;
    float: left;
    height: 300px;
    width: 350px;
    background-position: 10px;
}
#field2 {
    float: right;
    height: auto;
    width: 480px;
    padding-top: 80px;
}
#field3 {
    float: left;
    height: 300px;
    width: 350px;
    clear: left;
    padding-left: 20px;
}
#field4 {
    float: right;
    height: 150px;
    width: 480px;
    clear: right;
}
#datum {
    margin-left: 25px;
    margin-right: 710px;
}
#back_button {
    background-color: #FF0000;
    float: right;
    margin-right: 200px;
}
#footer {
    height: 140px;
    float: left;
    clear: right;
    width: 850px;
    background-image: url(../images/logo.gif);
    background-position: right;
    background-repeat: no-repeat;
}
#text {
    float: left;
    width: 250px;
    padding-left: 20px;
}
#bild3 {
    background-color: #D3031C;
}
#bild2 {
    background-color: #D3031C;
    margin-top: 18px;
    margin-bottom: 18px;
}
#bild1 {
    background-color: #D3031C;
    margin-top: 310px;
}
#banner1 {
    float: left;
    padding-left: 20px;
    padding-top: 50px;
}
#banner2 {
    float: right;
    padding-top: 50px;
    padding-right: 250px;
}
#banner3 {
    padding-top: 50px;
    padding-left: 260px;
}

Messiahs · 05.06.2009

AW: CSS Layout im IE

Also ich habe mir das ganze auch ma an gesehen und ich kann dazu nur sagen das du zu 100% Dream Weaver benutzt

Es sind einige Fehler drine auch wenn es nur kleine sind IE und Firefox Inepretieren das immer anders.Mich würde mal intressieren welchen IE version du den benutzt?

Auserdem benutze mal diesen Doc Typ , ist fast der selbe den du hast

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" lang="en" xml:lang="en">

Was mir auch gleich ins Auge gestochen ist das du einen MischWasch mit deinen CSS.Gewöhne dir gleich an alles sauber zu schreiben.Du lagerst zu einen eine Css Datei aus und zum andern lagerst sie direkt in deine Index Seite ab - alleine das kann zu Problemen führen , auch wenn es nur Stiele sind.

Mein vorschlag zur Lösung deines Problems sieht so aus
<div style="position:relative;width:1024px;height:768px;"></div>

Damit kannst du die Style Anweisung direkt auf deinen Div Container anwenden ohne weiteeren schnick schnack.Wenn du diese Code Zeile in deinen DW einfügst wirst du erkennen das du die Div Box einfach herum schieben kannst und die größe frei mit der Maus Scalieren kannst und dennoch wird sie dann in verbindun mit dem Doc Type richtig in jeden Browser angezeigt sofern du keinen veralteten IE benutzt.

bubu306 · 05.06.2009

AW: CSS Layout im IE

Jep ich verwende DW
ich strick vieles mit dem MAC und Firefox

Auf einem anderen Rechner verwende ich den IE7.

Ich werde heute Abend mal Deinen Vorschlag testen.

Thanks

Messiahs · 05.06.2009

AW: CSS Layout im IE

So ich habe male dein DW Code geschnipsle neu geschrieben.
Zum veranschaulichen

Und hier der Code dafür
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anpassung</title>
</head>
<body>
<div style="position: relative; width:1000px; height: 860px; margin: 0 auto; padding: 0; background-image: url();">
<div style="position:absolute; width:1000px; height:100px; background-image: url(>
<div style="position:absolute; width:100px; height:760px; top: 101px; background-image: url(>
<div style="position:absolute; width:871px; height:730px; left: 116px; top: 115px; background-image: url(>
</div>
</body>
</html>