[HTML] Problem mit CSS und IE

**igel457**

Hallo,

ich könnte den IE mal wieder erwürgen.
Ich habe auf eine HTML Seite mit einem Tabellenlayout:

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd>

<html>

  <head>

    <title>Andorra 2D - The Website</title>

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

  </head>

  <body>

    <table class="contenttable">

      <tr>

        <td class="header" colspan="2">Andorra 2D

<span style="font-size:12pt;color:#CCC">The Next Generation 2D Engine</span></td>    

      </tr>

      <tr>

        <td class="menu">Top2</td>

        <td class="main">Top3</td>

      </tr>

    </table>

  </body>

</html>

Mein dazugehöriges Stylesheet (Auszug) sieht so aus:

markieren

Code:

			html {height:100%; width:100%}

body {background-color:#FFF; color:#000; font-size:10pt; line-height:14pt; font-family: "Verdana", "Arial", "Helvetica", sans-serif; margin:0px; padding:0px; height:100%; width:100%;}

.content {padding:0px; margin:0px; border-width:0px; vertical-align:top;}

.header {background-image:url(img/big.png); color:#FFF; padding:10px; height:40px; vertical-align:middle; font-size:16pt;}

.contenttable{padding:0; margin:0; border-width:0px; border-style: none; border-spacing:0px; border-collapse:collapse; font-size:10pt; line-height:14pt; width:100%;}

.menu{width:200px; border-width:0px 1px 0px 0px; border-style:solid; border-color:#000; vertical-align:top;}

.main{vertical-align:top;text-align:left;}

Wie man sehen kann besteht das Layout aus einem "Header" oben, einer Menüspalte (200px Breit) und einer "Contentspalte". Sobald in der "Headerspalte" der Text länger als 200px wird, wird die Site im InternetExplorer (7) falsch dargestellt. Wie das aussieht ist im Anhang dargestellt.

Ich habe außerdem mal die gesamte Seite angehängt.
Ich hoffe ihr könnt mir helfen (auch wenn dies kein HTML Forum ist) und mir sagen was ich "falsch" mache.

Igel457

**Thorben77**

Auch wenn du es wahrscheinlich nicht hören willst

:

Zitat von igel457:

Und mir sagen was ich falsch mache.

Du benutzt Tabellen für das Layout.
Es überhaupt kein Problem, das, was du vorhast, mit CSS zu erreichen.

Markup:

markieren

Code:

			<div id="header">

  <h1>

    Andorra 2D

    <span style="font-size:12pt;color:#CCC">The Next Generation 2D Engine</span>

  </h1>

</div>

<div id="menu">Top 2</div>

<div id="content">Top 3</div>

Stylesheet:

markieren

Code:

			div#header {

/* Schrift, Innenabstand usw. */

}

div#menu {

  width: <Breite des Menüs>;

}

div#content {

  margin-left: <Breite des Menüs + X>;

}

**igel457**

Hm...

So könnte das natürlich auch gehen.

Danke für deine Lösung!

PS: Danke jetzt gehts!

[HTML] Problem mit CSS und IE

[HTML] Problem mit CSS und IE

Re: [HTML] Problem mit CSS und IE

Re: [HTML] Problem mit CSS und IE

Forumregeln