Div im IE6 verschoben | CSS

papi62

Mein Content wird im IE6 unter den Inhalt der linken Spalte geschoben, wie bekomm ich den wieder auf die richtige Höhe ?

index.php

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:

<?php include('cookie.php'); ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Appert Webdesign - Home</title>
<meta name="Title" content="Appert Webdesign">
<meta name="Description" content="Professionelles Web-Design und -Programmierung">
<meta name="keywords" content="Appert,René,Webdesign, Internetpräsenz,Internetauftritt,HTML,PHP,CSS">
<meta name="Author" content="René Appert">
<meta name="Publisher" content="René Appert">
<meta name="Copyright" content="René Appert">
<meta name="Content-language" content="de">
<meta name="Audience" content="Alle">
<meta name="Robots" content="INDEX">
<meta name="Robots" content="FOLLOW">
<meta name="Revisit-after" content="20 days">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<?php include('header.php'); ?>

<!--[if IE]>
<style type="text/css">
#menue ul {display:inline-block;}
#menue ul {display:inline;}
#menue ul li {float:left;}
#menue {text-align:center;}
</style>
<![endif]-->

</head>

<body>

<div id="wrapper"><a name="top"></a>
  <div id="header"></div>
  <div id="top"></div>
  <div id="wrapp">
    <div id="menue">
      <ul>
        <li class="current"><a href="http://www.a-web.ch/index.php"><b>Home</b></a></li>
        <li><a href="http://www.a-web.ch/projekt.php"><b>Projekte</b></a></li>
        <li><a href="http://www.a-web.ch/nutzung.php"><b>Impressum / Disclaimer</b></a></li>
        <li><a href="http://www.a-web.ch/mailform.php"><b>Kontakt</b></a></li>
        <li><a href="http://www.r-appert.ch" target="_blank" title="Externer Link nach www.r-appert.ch"><b>about me</b></a></li>
      </ul>
      <div class="werbung"></div>
      <div class="clear"></div>
      <div class="w3c01">
        <p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.a-web.ch%2F;ss=1;outline=1" target="_blank">
        <img class="w3c01" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></p>
      </div>
      <div class="w3c02">
        <p><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.a-web.ch/css/vernetzt.css" target="_blank">
        <img class="w3c02" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88"></a></p>
      </div>
      <div class="link01"></div>
      <div class="link02"></div>
      <div class="link03"></div>
      <div class="clear"></div>
      <br>
    </div>
    <div class="width">
    <div class="minwidth">
    <div class="container">
    <div id="content">

      <h2>Eine vernünftige Internetpräsenz wird immer wichtiger.</h2>

      <p>Es ist inzwischen einfach nicht mehr tragbar eine Homepage zu betreiben,
      die vor Jahren mal vom Schwager "gebastelt" wurde. Bunt-blinkende und unübersichtliche
      Websites, defekte Links und überlange Ladezeiten nimmt heutzutage kein Kunde mehr hin und klickt einfach weg.</p>
      <p>Ein professioneller Auftritt hingegen, stellt Sie und Ihr Unternehmen in ein ganz anderes
      Licht und vermittelt von der ersten Sekunde an einen positiven Eindruck.</p>
      <br>
      <div class="subhead"><h1>Kostenloses Angebot</h1></div>
      <p>Um Referenzen zu sammeln biete ich mich an, <em>kostenlos</em>, Ihren Firmen-Internetauftritt,
      Eure Homepage, Gilden- oder Clan-Page zu erstellen oder "redesignen".</p>
      <br>
      <p>Sie erhalten eine komplette, speziell auf Ihre Wünsche zugeschnittene Website, die an jedes
      bestehende Firmendesign angepasst werden kann.</p>
      <p>Logos, Schriftzüge, Bilder oder ähnliches werden nahtlos in das Design der Seiten integriert.
      Für eingesandtes Material stehen natürlich Scanner, Digitalkameras und Bildbearbeitungsprogramme bereit.</p>
      <p>Bei Bedarf fotografiere ich auch vor Ort für Sie.</p>
      <p>Erneuerungen, Updates bzw. Änderungen sind jederzeit möglich.</p>
      <br>
      <p>Laufende Projekte werden auf Test-Webspace bearbeitet.</p>
      <p>D.h: Sie erhalten von uns eine spezielle Internetadresse, über die Sie Sich ganz leicht in Ihr
      Projekt einloggen können. Das bedeutet für Sie, dass Sie während der Entstehungsphase jederzeit
      den aktuellen Stand der Dinge einsehen können.</p>
      <p>Dadurch haben Sie die Möglichkeit einzugreifen und Änderungswünsche noch während der Entstehung zu äußern.</p>
      <br>
      <h2>Web-Design</h2>
      <p>Entwurf und Programmierung von Websites in HTML, PHP, CSS mit Java-Scripts und Flash-Objekten
      gemäss Ihren Vorstellungen und Wünschen.</p>
      <br>
      <h2>Logo-Design</h2>
      <p>Erstellung Ihres Logos, 3D-Schriften und animierte Logos mit Adobe-Photoshop.</p>
      <br>
      <h2>Re-Design</h2>
      <p>Erneuern und modernisieren Ihrer "alten" Internetpräsenz so dass der Code dem neusten Standart
      entspricht und Ihre Site auch auf allen gängigen Browsern angesehen werden kann.</p>
      <br>
      <p>Wenn Ihnen diese Site oder meine Projekte gefallen und ich etwas für Sie tun kann, dann kontaktieren
      Sie mich bitte.</p>
      <br>
      <p>Da diese Dienstleistung kostenlos ist, wird meinerseits keinerlei Garantie und/oder Haftung übernommen.</p>
      <br>
      <p>Um Ihnen eine Kostprobe verschiedener Designs zu zeigen können Sie hier diverse Layouts (CSS-Styles) auswählen.
      Die ausgewählten Styles werden durch ein Cookie gespeichert und gelten für alle Seiten bis ein neuer
      Style gewählt wird.</p>
      <br>
      <ul>
        <li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=flexi">Style: Flexi</a><p>&nbsp;Halbdynamisches 2-Spalten Layout mit 600-1024px Breite</p></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=orient">Style: Orient</a><p>&nbsp;1-Spalten Layout mit 800px Breite</p></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=tubes">Style: Tubes</a><p>&nbsp;1-Spalten Layout mit 800px Breite</p></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=vernetzt">Style: Vernetzt</a><p>&nbsp;2-Spalten Layout mit 800px Breite</p></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=metall">Style: Metall</a><p>&nbsp;2-Spalten Layout mit 800px Breite</p></li>
      </ul>
      <br>

    <div class="clear"></div>
    </div>
    </div>
    </div>
    <div class="clear"></div>
    </div>
  </div>
  <div id="bottom"></div>
  <div id="footer">
  <div id="copyr">
    designed & copyright &copy; by <a href="http://www.a-web.ch">a-web</a>
  </div>
  </div>
</div>

</body>

</html>

flexi.css

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:

* {
 margin: 0;
 padding: 0;
}

body{
 margin: 0;
 background: #666;
}

.width {width:90%; min-width:400px;}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:400px solid #666666; position:relative; float:left; z-index:1;}
* html .container {margin-left:-400px; position:relative; float:left; z-index:2;}

#wrapper{
 position: relative;
 width: 100%;
 height: auto;
}

#header{
 width: 1024px;
 height: 150px;
 top: 0;
 left: 0;
 background-image: url(http://www.a-web.ch/images/flexi/header.gif);
 background-repeat: no-repeat;
}

#wrapp{
 width: 100%;
 min-height: 100%; /* Moderne Browser */
 height:auto !important; /* Moderne Browser */
 height: 100%; /* IE */
 padding-top: 0px !important;
 padding-top: 0px;
 background: #666666;
}

#menue{
 float: left;
 width: 200px;
 height:auto !important;
 padding-left: 36px !important;
 padding-left: 18px;
 padding-top: 40px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 background-image: url(http://www.a-web.ch/images/flexi/menue.gif);
 background-repeat: no-repeat;
}

#menue ul{
 margin: 0;
 padding: 0;
 list-style: none;
 white-space: nowrap;
 font-size: 12px;
}

#menue li{
 text-align: left;
 margin-top: 0px;
 margin-bottom: 3px;
 height: 30px;
 width: 158px;
}

#menue li a{
 display: block;
 color: #fff;
 text-decoration: none;
 font-family: arial, verdana, sans-serif;
 font-weight: bold;
 padding-top: 6px;
 padding-bottom: 12px;
 padding-left: 8px;
 cursor: pointer;
 background: url(http://www.a-web.ch/images/flexi/button.gif) no-repeat;
}

#menue li.current a{
 color:#fff;
 background:url(http://www.a-web.ch/images/flexi/button_current.gif) no-repeat;
}

#menue li a:hover{
 color:#FF0000;
 background: url(http://www.a-web.ch/images/flexi/button_hover.gif) no-repeat;
}

#menue li.current a:hover{
 color:#FF0000;
 background: url(http://www.a-web.ch/images/flexi/button_current.gif) no-repeat;
 cursor:default;
}

.werbung{
 text-align: center;
 width: 164px;
 height: 303px;
 margin-top: 10px;
 background: url(#) no-repeat;
}

.w3c01{
 border: none;
 width: 88px;
 height: 31px;
 margin-top: 10px;
 margin-left: 20px !important;
 margin-left: 10px;
}

.w3c02{
 border: none;
 width: 88px;
 height: 31px;
 margin-top: 10px;
 margin-left: 20px !important;
 margin-left: 10px;
}

.w3c11{
 display: none;
}

.w3c12{
 display: none;
}

#content{
 position: relative;
 max-width: 814px !important;
 min-width: 400px;
 width: auto !important;
 width: 814px;
 padding: 40px 10px 10px 40px;
 margin-left: 200px !important;
 margin-left: 190px;
 background-image: url(http://www.a-web.ch/images/flexi/content.gif);
 background-repeat: no-repeat;
}

.subhead{
 max-width: 784px;
 height: 24px;
 text-align: center;
 margin-bottom: 10px;
 margin-left: 2px;
 background-image: url(http://www.a-web.ch/images/flexi/subhead.gif);
 background-repeat: no-repeat;
}

.subhead h1{
 padding-top: 4px;
 text-align: center;
}

#content p{
 margin: 0;
 padding-left: 0px;
 padding-right: 0px;
 color: #fff;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: justify;
}

.kursiv{
 font-style: italic;
 color: #fff !important;
}

.fett{
 font-weight: bold;
}

#content em{
 font-weight: bold;
}

#content h1{
 margin: 0;
 padding-left: 0px;
 padding-right: 0px;
 color: #fff;
 font-size: 12px;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: center;
}

#content h2{
 margin-bottom: 5px;
 padding-left: 0px;
 padding-right: 0px;
 color: #fff;
 font-size: 11px;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content h3{
 margin-top: 5px;
 padding-left: 0px;
 padding-right: 0px;
 color: #fff;
 font-size: 11px;
 font-weight: normal;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: center;
}

#content h4{
 margin: 0;
 padding-left: 0px;
 padding-right: 0px;
 color: #fff;
 font-size: 11px;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: center;
}

#content ul{
 margin-top: 0px;
 margin-bottom: 0px;
 margin-left: 20px;
 padding-top: 0px;
 padding-bottom: 0px;
 color:#fff;
 font-size: 11px;
 font-weight: normal;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content ol{
 margin-top: 5px;
 margin-bottom: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 color:#fff;
 font-size: 11px;
 font-weight: normal;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content a:link{
 color: #fff;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-decoration: underline;
}

#content a:visited, #content a:active, #content a:focus{
 color: #fff;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-decoration: underline;
}

#content a:hover{
 color: #FF0000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-decoration: underline;
}

.table{
 width: 527px;
}

.form{
 border : 1px solid #00FF00;
 padding-left: 2px;
 padding-top: 2px;
 width: 199px;
}

.inputout{
 background-color: #d4d4d4;
 border : 1px solid #00FF00;
 width: 300px;
}

.input{
 background-color: #d4d4d4;
 width: 300px;
}

.textarea{
 background-color: #d4d4d4;
 width: 300px;
 height: 100px;
}

.help{
 width: 28px;
}

.send{
 border : none;
}

#bottom{
 width: 100%;
 height: 0px;
 background-image: url(#);
 background-repeat: no-repeat;
}

#footer{
 width: 1024px;
 height: 80px;
 margin-bottom: 0px;
 background-image: url(http://www.a-web.ch/images/flexi/footer.gif);
 background-repeat: no-repeat;
}

.foto1{
 text-align: center;
 margin: 10px auto;
 border : 0;
 color:#fff;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.fotor{
 float: right;
 text-align: center;
 margin: 0px 0px 0px 10px;
 border : 0;
 color:#fff;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.fotol{
 float: left;
 text-align: center;
 margin: 0px 10px 0px 0px;
 border : 0;
 color:#fff;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.foto2{
 text-align: center;
 margin-bottom: -10px !important;
 margin-bottom: -13px;
 margin-top: 10px;
 border : 0;
 color:#fff;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.foto1 a img, .foto2 a img, .fotor a img, .fotol a img{
 border: none;
}

#w3cr{
 float: right;
 padding: 0;
 margin: 0px 80px 0px 0px;
 border: none;
}

#w3cl{
 float: left;
 padding: 0;
 margin: 0px 0px 0px 80px;
 border: none;
}

.clear{
 clear: both;
}

#copyr{
 margin-left: 60px;
 color: #fff;
 padding-top: 20px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
}

#copyr a:link{
 color: #fff;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

#copyr a:visited, #copyr a:active, #copyr a:focus{
 color: #fff;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

#copyr a:hover{
 color: #FF0000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

Ansicht Firefox

Ansicht IE6