nicht angemeldet
Hallo zusammen.
Nachdem ich meine ersten gehversuche mit CSS damit verbringe meine KCCHiefs Fanpage komplett in CSS umzubauen (vorher Frontpage*schäm*) und auch alles soweit fröhlich geklappt hat (Firefox 1.07) ist mir leider beim betrachten im IE6 die Kinnlade runtergefallen.
Folgendes Hauptproblem tritt auf:
Die News Boxen welche meistens eine Überschrift ein Foto und den Text beinhalten sollen bei einem grösseren Foto immer noch den kompletten Inhalt umranden.
Um das zu gewährleisten hab ich ans Ende der Box noch eine Fusszeile mit dem Datum eingegeben damit sie auf jeden Fall am Ende unter allen Inhalten steht. (clear: both) Wie im kapitel zum Layout mit CSS beschrieben.
Leider ist anscheinend im IE wenn der Text nicht ausreicht das Bild zu umfliessen kein Text mehr zu sehen und die Box und stösst direkt vor die links gefloatete Navigations Box.
Ich hab schon versucht clear left oder right anzuwenden und dem Bild feste breiten und höhen zu verpassen.
Zu sehen ist das ganze auf.
http://kansascitychiefs.awardspace.com
die komplette CSS Datei könnt ihr unter
http://kansascitychiefs.awardspace.com/olistyle.css
sehen.
Hier noch der relevante Quellcode:
aus der html Datei:
<div id="Seite">
.
<ul id="Navigation">
</ul>
.
.
.
<div id="News">
<h2>Larry ist der beste.</h2>
<img src="image/johnson_larry_lead.jpg" alt="Larry ist der beste"/>
<p>Wie man hier gut sehen kann ist das Bild von Larry
und dieser Text in einer p-Zeile. Momentan bin ich mir da noch nicht ganz sicher wie sich das ganze zueinander verhalten wird.
Ich hoffe mal das der Text neben den Bild steht und dann später darunter weitergeht. Dann nämlich könnte ich diese Methode ohne Probleme
auf meine Chiefs Seite ummünzen.</p>
<p id="datum">21.03.05</p>
</div>
.
.
.
</div>
aus der CSS Datei:
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 758px;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white
}
div#News {
margin: 10px 0.5em 10px 11em;
font-size: 0.9em;
padding: 4px;
border: 2px outset black;
color: #000000;
background-color: #ffd990;
}
div#News img{float: right; border: 1px solid gray; margin: 0.3em}
div#News p{margin: 1px;}
p#datum {clear:right; font-size:0.5em; margin: 10px 0.5em 10px 11em; text-align: left}
p#Fusszeile {
clear: both;
color: #FFFFFF;
font-size: 0.7em;
margin-top: 2; padding: 0.1em;
text-align: center;
background-color: #ff0000;
border-top: 1px solid black;
}
P.S. kleinere Probleme um die ich mich bisher noch nicht gekümmert habe sind der Abstand des Containers Seite zur oberen *.gif und der viel grössere Font im Menü. Eventuell habt ihr da ja auch Tips zu.
Ich hoffe es ist ein nicht ganz so dummer Fehler (einfaches Workaround). Ich hab schon überall hier im Forum und unter google geguckt aber ich bin echt nicht weitergekommen.
Vielen Dank für eure Hilfe.
Gunnar Bittersmann