zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE6 und FF Darstellungsproblem! Bug?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 10.12.2007, 17:50
Benutzerbild von Speedy19102000
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Moin Heiko!

Erst mal ein dickes Dankeschön an Dich!

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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:
<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).
Das war das erste, was ich gemacht habe. Danach zeigte der Validator 6 anstatt 5 Fehler an.
Auf die Idee, das ich dann auf "de" umstellen muss, bin ich dabei nicht gekommen.

Und das mit dem "end tag for 'link' omitted" habe ich auch falsch interpretiert.
War wohl doch zu müde!

Da ich jetzt alles im FF Teste und dieser es mir auch (Online) richtig darstellt,
habe ich nun das Problem beim IE6, dass dieser mir den Abstand von 2px zwischen rechts und footer nicht richtig darstellt (1px).

Und wiso wird mir online es richtig dargestellt, während es offline bei mir so aussieht?

Hat man das eine Problem gelöst, kommt schon das nächste.

MfG Speedy
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 10.12.2007, 18:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Speedy19102000 Beitrag anzeigen
das Problem beim IE6, dass dieser mir den Abstand von 2px zwischen rechts und footer nicht richtig darstellt (1px).
Im Firefox ist der Abstand um 1px höher als im IE, weil div.content:after 1px hoch ist, vom IE aber ignoriert wird.

Ich würde immer ein hartcodiertes clear vorziehen, wenn dieses ohne Zusatz-Markup möglich ist, und dafür eignet sich in der Regel ein Footer perfekt. So auch in Deinem Falle: Wirf :after raus und stelle .unten in .content und lasse es clearen.

Übrigens würde ich aus sämtlichen Klassen eine ID machen.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 10.12.2007, 19:32
Benutzerbild von Speedy19102000
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Ok! Soweit habe ich auch das mit dem Offlineproblem gleich mit gelöst. Klick
Aber das Problem mit dem Abstand von 2px ist besteht immer noch.

Hier die aktuelle css-datei:
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;
}
/* ----------------- FOOTER ------------------ */
div#unten  {
 
background-color:#999; margin:2px 0 0 0; text-align:center; color:#000; clear:both;

Gibt es dafür noch eine Lösung?

MfG Speedy
Mit Zitat antworten
  #14 (permalink)  
Alt 10.12.2007, 19:40
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Folgt ein clearender Non-Float auf einen Float, wird margin-top des ersteren ignoriert - zumindest in guten Browsern, der IE handhabt dies mal wieder anders.

Abhilfe: margin-bottom für die Floats ersetzt margin-top des clearenden Elementes.
Mit Zitat antworten
  #15 (permalink)  
Alt 10.12.2007, 19:46
Benutzerbild von Speedy19102000
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Ok! Werde es später ausprobieren, muss jetzt (leider) zur Arbeit!

Melde mich dann wieder.

MfG Speedy
Mit Zitat antworten
  #16 (permalink)  
Alt 11.12.2007, 16:50
Benutzerbild von Speedy19102000
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Heiko!

Danke für den Tip!

Damit margin dennoch seine Funktion beibehält, habe ich 'clear:both' in einem eigenem 'div' gesteckt.
Ich denke, das ist dann auch eine saubere Lösung und macht es einfacher für das was ich vorhabe. Klick!

Ein Komplement nochmal für dieses Board und
im diesem Fall, für Dich Heiko!

Mit freundlichem Gruß

Speedy
Mit Zitat antworten
  #17 (permalink)  
Alt 11.12.2007, 17:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du clearst an der falschen Stelle und kannst einige divs einsparen. Wirklich nötig wären nur 5: #oben und #unten, sowie #links, #mitte und #rechts. Letztere 3 bekommen margin-bottom: 2px; und #unten cleart.
Mit Zitat antworten
  #18 (permalink)  
Alt 11.12.2007, 18:42
Benutzerbild von Speedy19102000
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Moin!

Habe ich ausprobiert.

Da ich jedes Element so haben möchte, dass es optisch von jeder Seite zum
anderen Element immer 2px Abstand bekommt (auch jeweils ganz außen, auch unten, bei überlänge),
funktioniert die abgespeckte Methode nicht und kommt in verschiedenen
Browsern (IE6 / FF) zu darstellungsproblemen.
Habe es mal hochgeladen. Klick!

Muss leider wieder zur Arbeit, melde mich später wieder!

MfG Speedy
Mit Zitat antworten
  #19 (permalink)  
Alt 12.12.2007, 03:02
Benutzerbild von Speedy19102000
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Heiko!

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Du clearst an der falschen Stelle und kannst einige divs einsparen. Wirklich nötig wären nur 5: #oben und #unten, sowie #links, #mitte und #rechts. Letztere 3 bekommen margin-bottom: 2px; und #unten cleart.
Genauso habe ich es gemacht! Klick!
CSS-Code:
PHP-Code:
*  {
 
margin:0pxpadding:0pxfont-family:VerdanaArialHelveticasans-serif;
}
body  {
 
font-size:0.8emcolor:#000; background-image: url(../bilder/bg.gif);
}
div  {
 
padding:0pxborder:0px solid #000;
}
li  {
 list-
style:none;
}
/* ----------------- HEADER ------------------ */
div#oben  {
 
margin-bottom:2pxheight:84pxtext-align:centerbackground-color:#FBD8C5; color:#000;
}
#headerlinks  {
 
float:leftpadding:10px 20pxfont:bold 38px verdanahelveticasans-serif;
}
#headerrechts  {
 
float:rightpadding:2px 2px;
}
/* ----------------- BOX LINKS ------------------ */
div#links  {
 
float:leftmargin-bottom:2pxwidth:15.9embackground-color:#999; color:#000;
}
#navlinks li a  {
 
display:blockwidth:200pxborder:1px solid #E2B49A; background-color:#FBD8C5; padding-left:2px;
 
font:bold 13px verdanahelveticasans-seriftext-decoration:noneline-height:22pxcolor:#900000;
}
#navlinks li a:hover  {
 
border:1px solid #FBD8C5; color:#FBD8C5; background-color:#900000;
}
#gewaehltlinks  {
 
display:blockwidth:200pxborder:1px solid #FBD8C5; padding-left:2px;
 
font:bold 13px verdanahelveticasans-serifline-height:22pxcolor:#FBD8C5; background-color:#900000;
}
.
navstylelinks  {
 
display:blockwidth:200pxborder:1px solid #E2B49A; background-color:#C48968; padding-left:2px;
 
font:bold 13px verdanahelveticasans-serifline-height:22pxcolor:#FBD8C5;
}
/* ----------------- BOX RECHTS ------------------ */
div#rechts  {
 
float:rightmargin-bottom:2pxwidth:12.0embackground-color:#999; color:#000;
}
#navrechts li a  {
 
display:blockwidth:150pxborder:1px solid #E2B49A; background-color:#FBD8C5; padding-left:2px;
 
font:bold 13px verdanahelveticasans-seriftext-decoration:noneline-height:22pxcolor:#900000;
}
#navrechts li a:hover  {
 
border:1px solid #FBD8C5; color:#FBD8C5; background-color:#900000;
}
#gewaehltrechts  {
 
display:blockwidth:150pxborder:1px solid #FBD8C5; padding-left:2px; background-color:#900000;
 
font:bold 13px verdanahelveticasans-serifline-height:22pxcolor:#FBD8C5;
}
#navstylerechts  {
 
display:blockwidth:150pxborder:1px solid #E2B49A; background-color:#C48968; padding-left:2px;
 
font:bold 13px verdanahelveticasans-serifline-height:22pxcolor:#FBD8C5;
}
/* ----------------- CONTENT ------------------ */
div#mitte  {
 
margin-bottom:2pxbackground-color:#FBD8C5; color:#000;
}
#aktuelle_seite  {
 
display:blocktext-align:centerfont:bold 14px verdanahelveticasans-serifline-height:22px;
 
color:#FBD8C5; background-color:#C48968; border:1px solid #E2B49A;
}
/* ----------------- FOOTER ------------------ */
div#unten  {
 
background-color:#FBD8C5; text-align:center; color:#000; clear:both;
}
/* ----------------- ------ ------------------ */ 
Habe ich Dich vielleicht falsch verstanden?
Muss da noch etwas geändert werden?
Leider sieht es überhaupt nicht so aus, wie ich es beschrieben habe.

Bräuchte nochmal Eure Hilfe!

MfG Speedy
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 12.12.2007, 08:09
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das einzige, was aus meiner Sicht noch nicht stimmt, sind die 2px horiz. Abstand zwischen den Spalten. Gib dafür den Elementen innerhalb von #links margin-right: 2px; und für #rechts margin-left: 2px;.

Außerdem braucht #mitte noch seitliche margins passend zur Breite der äußeren Spalten. Und <li class="navstylelinks">Erste Navigation</li> wird eine Überschrift, die nicht Bestandteil der Liste ist.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Welcher IE6 Bug ist das? UL-Float bei LI mit "height" martinpet CSS 5 20.08.2009 10:21
Darstellungsproblem mit IE6 und CSS dunkel_licht CSS 5 30.12.2008 19:39
Darstellungsproblem Pulldown Menü IE6 zu IE7 GigiASB CSS 8 24.12.2008 01:27
Darstellungsproblem NUR im IE6 beim Online Shop thomaskay CSS 13 20.08.2008 11:32
Darstellungsproblem im IE6 kiri CSS 13 19.06.2007 19:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:49 Uhr.