XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE6 und FF Darstellungsproblem! Bug? (http://xhtmlforum.de/showthread.php?t=49321)

Speedy19102000 09.12.2007 18:54

IE6 und FF Darstellungsproblem! Bug?
 
Guten Abend zusammen!

Habe mich mal daran gewagt, mir eine Homepage ohne Tabellen zu Coden.
Sieht ja auch schon richtig gut aus im IE6 aber nicht im FF halt nicht.
Die Abstände zwischen linker Box, Content und rechter Box, sieht man ja auch deutlich genug! :?
Bei anderen Browsern kann ich es nicht sagen, hab nur die beiden.

Habe schon von diveren Bugs gelesen, auch schon was ausprobiert,
aber bin noch zu keinem richtigen Ergebniss gekommen.
Deshalb bitte ich nun Euch um Hilfe!

Wie bekomme ich es hin, dass es sowohl im IE6, als auch im FF gleich aussieht?
Was mache ich falsch?

Hier meine Homepage

und die dazugehörige CSS-Datei:
PHP-Code:

body {
 
color :blackfont-family:verdanahelveticasans-seriffont-size:13pxmargin:0 0 2px 0padding:0;
 
background-color:#900000;
}
/* ----------------- HEADER ------------------ */
.header {
 
background-color:#FBD8C5; border:0 solid black; margin:2px 2px 0 2px; padding:0; height:84px;
}
.
header .hptitel  {
  
font:bold 38px Verdanacolor:#900000;
}
#headerlinks  {
  
float:leftpadding:10px 20pxfont:normal 10px Verdana;
}
#headerrechts  {
  
float:rightpadding:2px 2px;
}
/* ----------------- NAVIGATION ------------------ */
.navlinks {
 
padding:0border:0 solid blackwidth:200pxmargin-left:2pxposition:absoluteleft:0top:88px;
}
.
navlinks a  {
  
display:blockwidth:200pxborder:1px solid #E2B49A; background-color:#FBD8C5; padding-left:2px;
  
font:bold 13px Verdanatext-decoration:noneline-height:22pxcolor:#900000;
}
.
navlinks a:hover  {
  
background-color:#900000; border:1px solid #FBD8C5; color:#FBD8C5;
}
.
gewaehlt  {
  
display:blockwidth:200pxborder:1px solid #FBD8C5; background-color:#900000; padding-left:2px;
  
font:bold 13px Verdanaline-height:22pxcolor:#FBD8C5;
}
.
navstyle  {
  
display:blockwidth:200pxborder:1px solid #E2B49A; background-color:#C48968; padding-left:2px;
  
font:bold 13px Verdanaline-height:22pxcolor:#FBD8C5;
}
/* ----------------- CONTENT ------------------ */
.content {
 
background-color:#FBD8C5; padding:0; border:0 solid black; margin:2 154px 2 204px; padding:0;
}
.
aktuelle_seite  {
  
display:blocktext-align:centerfont:bold 14px Verdanaline-height:22pxcolor:#FBD8C5;
  
background-color:#C48968; border:1px solid #E2B49A;
}
.
txt  {
  
padding:0 40px 0 40px:
}
/* ----------------- BOX RECHTS ------------------ */
.boxrechts {
 
padding:0border:0 solid blackwidth:150pxmargin-right:2pxposition:absoluteright:0top:88px;
}
.
navrechts a  {
  
display:blockwidth:150pxborder:1px solid #E2B49A; background-color:#FBD8C5; padding-left:2px;
  
font:bold 13px Verdanatext-decoration:noneline-height:22pxcolor:#900000;
}
.
navrechts a:hover  {
  
background-color:#900000; border:1px solid #FBD8C5; color:#FBD8C5;
}
.
gewaehltrechts  {
  
display:blockwidth:150pxborder:1px solid #FBD8C5; background-color:#900000; padding-left:2px;
  
font:bold 13px Verdanaline-height:22pxcolor:#FBD8C5;
}
.
navstylerechts  {
  
display:blockwidth:150pxborder:1px solid #E2B49A; background-color:#C48968; padding-left:2px;
  
font:bold 13px Verdanaline-height:22pxcolor:#FBD8C5;
}
/* ----------------- FOOTER ------------------ */
.footer {
 
background-color:#FBD8C5; border:0 solid black; margin:0 2px 0 2px; padding:0; height:24px;
}
#footerlinks  {
 
float:leftpadding-left:4pxpadding-top:6px;
}
#footerrechts  {
 
float:rightpadding-right:4pxpadding-top:6px;
}
#footermitte  {
 
text-align:centerpadding-top:6px;


MfG Speedy

Crizzo 09.12.2007 19:01

Du hast einen Fehler in der Grundannahme. Der IE6 macht die Fehler und der FF stellt es richtig dar, nicht umgekehrt. ;)

Du hast eine "wunderschöne" Divitis - Wikipedia . Vergiss erstmal "position" und positioniere deine Element nur mit Float und Clear. Und teste das Aussehen im FF oder Opera nicht im IE. Dessen Bugs und Probleme kannst du später noch behandeln.

Fehler machst du auch noch: [Invalid] Markup Validation of http://www.osnanet.de/andreas.krmela/testhp/index.htm - W3C Markup Validator

Speedy19102000 09.12.2007 19:55

Hallo BlackHawk!

Danke, für Deine prompte Hilfe.

...die Seite ist jetzt valide! Aber mein Darstellungsproblem noch nicht.
Was spricht denn gegen positionieren anstelle von floaten?
Die Browser müssen auch diese Art richtig anzeigen können.
Ich habe schon viel Zeit investiert,
da ich sonst immer mit Tabellen gearbeitet habe.

Wie kann denn der Code mit fload aussehen, wenn der footer mit dem Content gleichmäßig mit nach unten fließt.
Für drei Spalten gibt es Beispiele, aber für mein Model habe ich nichts ähnliches gefunden.

Ich wäre dankbar für einen Tip um mein Problem zu lösen, ob mit position, oder mit float.

...

Crizzo 09.12.2007 20:02

Zitat:

Zitat von Speedy19102000 (Beitrag 361527)

...die Seite ist jetzt valide! Aber mein Darstellungsproblem noch nicht.

Dein CSS-Code noch nicht: W3C CSS Validator results for http://www.osnanet.de/andreas.krmela/testhp/index.htm
Zitat:

Was spricht denn gegen positionieren anstelle von floaten?
Führt zu weniger Problemen, einfacher für Anfänger und flexibler. ;)
Zitat:

Die Browser müssen auch diese Art richtig anzeigen können.
Was der IE nicht alles müsste und doch verkehrt macht...
Zitat:

Ich habe schon viel Zeit investiert, da ich sonst immer mit Tabellen gearbeitet habe.
und es wird noch mehr Zeit kosten. Hast du eine Lektüre zur Hilfe genommen?
Zitat:

Wie kann denn der Code mit float aussehen, wenn der footer mit dem Content gleichmäßig mit nach unten fließt.
Für drei Spalten gibt es Beispiele, aber für mein Model habe ich nichts ähnliches gefunden.
Du hast doch ein drei Spaltenlayout.

Wie meinst du das: "Wie kann denn der Code mit float aussehen, wenn der footer mit dem Content gleichmäßig mit nach unten fließt." Was heißt: "gleichmähig mit nach unten fließt"?

fricca 09.12.2007 20:06

Zitat:

Zitat von Speedy19102000 (Beitrag 361527)
...die Seite ist jetzt valide!

Das Stylesheet nicht!

Zitat:

Aber mein Darstellungsproblem noch nicht.
Informier dich über den "Doctype Switch" und den "Box Model Bug". Dann nimm die Browser aus dem Quirksmodus.

Zitat:

Was spricht denn gegen positionieren anstelle von floaten?
Absolute Positionierung macht die Elemente komplett voneinander unabhängig.
Setz wenig Inhalt in deinen Contentbereich und schau dir an, was mit der Fußzeile passiert.

Wie immer: Wenn du CSS lernen willst brauchst du ein Buch. Siehe Ressourcen-Bereich.

Speedy19102000 09.12.2007 20:30

Danke, an Euch beiden!

Ich fange am besten noch einmal ganz von vorne an und werde es ausschließlich mit fload versuchen und die positionierung ganz weglassen.

Außerdem werde ich die Menüs mit <ol><li> coden.
Wenn ich dann wieder auf Probleme stoße, melde ich mich wieder.
Denn auf der jetzigen Homepage schaffe ich das nicht, die posizionierungen mit fload umzusetzen.

Also wahrscheinlich dann bis später!

MfG Speedy

heiko_rs 10.12.2007 00:15

Zitat:

Zitat von Speedy19102000 (Beitrag 361532)
werde es ausschließlich mit fload versuchen

Versuch's lieber mit float ;) SCNR

Speedy19102000 10.12.2007 00:24

Moin!

Zitat:

Zitat von heiko_rs (Beitrag 361582)
Versuch's lieber mit float ;) SCNR

Natürlich so! Tippfehler :!:

Bin gerade dabei, mein Menü neu zu Coden.
Valide habe ich es schon bekommen! Link
Probleme werde ich wohl beim floaten bekommen, mal schauen!

MfG Speedy

Speedy19102000 10.12.2007 07:24

Soweit sieht es schon einmal ganz gut aus. Klick
Wenn ich meine Seite mit dem Validator prüfe, zeigt dieser mir 5 Fehler an. Klick
Meine css-Datei ist valide. Klick

Habe die ganze Nacht versucht, dass Problem in den Griff zu bekommen, mit verschiedenen Lösungsversuche, wie z.B.:

<html xmlns="XXX"> in verschiedenen Ausführungen, oder mit zusätzlichen
<meta ...> Angaben, oder anderen DOCTYPEn.

Mir kann man nicht nachsagen, dass ich es nicht versucht habe!
Ich hoffe, dass Ihr mir bei der Lösung helfen könnt, ich weis nämlich nicht mehr weiter.

Jetzt werde ich aber erst einmal in die Falle gehen, war eine lange Nacht, die dennoch schnell rumging.

CSS-CODE:
PHP-Code:

*  {
 
margin:0pxpadding:0pxfont-family:VerdanaArialHelveticasans-serif;
}
body  {
 
font-size:0.8emcolor:#000; background-color:#FFF;      
}
div  {
 
padding:0pxborder:0px solid #000;
}
div.rahmen  {            
 
margin:2px;                   
}
/* ----------------- HEADER ------------------ */
div.oben  {
 
margin:0background-color:#999; height:84px; text-align:center; color:#000;
}
/* ----------------- /HEADER ------------------ */
div.content  {
 
margin-top:2px;
}
/* ----------------- BOX LINKS ------------------ */
div.links  {
 
float:leftwidth:20.1embackground-color:#999; color:#000;
}
/* ----------------- BOX RECHTS ------------------ */
div.rechts  {
 
float:rightwidth:20.1embackground-color:#999; color:#000;
}
/* ----------------- CONTENT ------------------ */
div.mitte  {
 
margin0px 20.2em 0px 20.2embackground-color:#999; color:#000;
}
/* ----------------- /CONTENT ------------------ */
div.content:after  {
content"."display:blockclear:bothvisibility:hiddenheight:1px;
}
 
html div.content  {
 
height:1px;
}
/* ----------------- FOOTER ------------------ */
div.unten  {
 
background-color:#999; margin:1px 0 0 0; text-align:center; color:#000;


Bis nachher!

MfG Speedy

heiko_rs 10.12.2007 07:50

Zitat:

Zitat von Speedy19102000 (Beitrag 361610)
Habe die ganze Nacht versucht, dass Problem in den Griff zu bekommen, mit verschiedenen Lösungsversuche, wie z.B.:

<html xmlns="XXX"> in verschiedenen Ausführungen, oder mit zusätzlichen
<meta ...> Angaben, oder anderen DOCTYPEn.

Da bin ich jetzt echt fassungslos. Du Validator sagt Dir doch ganz genau, was Du tun sollst, er gibt Dir zu Fehler 1 sogar den korrekten Code vor, den Du nur hättest kopieren müssen:

Zitat:

Many Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Damit wäre der Fehler bereits behoben gewesen, und Du hättest nur noch die Sprache anpassen müssen (de statt en).

Zu Fehler 2 sagt er "end tag for 'link' omitted" und "You may have neglected to close an element", und da Du auch das meta-Element korrekt geschlossen hast, hätte Dir spätestens durch diesen Hinweis eigentlich sofort klar sein müssen, daß auch das link-Element auf diese Weise geschlossen werden muß.

Die übrigen 3 Fehler sind Folgefehler des ersten.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:47 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020