Unterschiedliche Abstände von div in IE und FF

[Fabian]

Hidiho!

Ich habe ein kleines Browserproblemchen. Die Seite um die es sich dreht: http://test.pfanny.de/sunrise/

Im FF 3.0.1 habe ich einen Spalt von 2px zwischen Menu und Schatten darunter. Im IE7 nicht.
Im IE6 ist der Spalt zwischen dem Banner oben und dem Menu. Ich hab nur keine Ahnung warum. Ich hab standardmäßig ein

* {  
 margin: 0px;  
 padding: 0px;  
}

in meinem CSS Sheet um sowas zu unterbinden.

Das kuriose ist: Wenn ich im CSS-Body-Tag die Schriftgröße entferne, dann wird der Spalt im FF größer?!??!

Kann mir da jemand auf die Sprünge helfen?

Vielen Dank!

Gruß
Fabian

[Joe]

Hallo Fabian,

kannst du bitte auch die entsprechenden CSS Zeilen posten. Bin auf der Arbeit und kann hier die CSS Datei nicht runterladen.

Ich habe die Vermutung, dass es mit dem Boxmodell zusammenhängt. Und dieses wird bei den verschiedenen Browsern gern "anders" interpretiert.

Aber um zu Wissen wo genau der Fehler liegt benötige ich die CSS Einträge.

Grüße
Joe

[suit]

kannst du bitte auch die entsprechenden CSS Zeilen posten. Bin auf der Arbeit und kann hier die CSS Datei nicht runterladen.

wtf?

Ich habe die Vermutung, dass es mit dem Boxmodell zusammenhängt. Und dieses wird bei den verschiedenen Browsern gern "anders" interpretiert.

unwahrscheinlich, da die seite äusserst wenig mit css zu tun hat - es ist eine div-suppe gewürzt mit grafiken

ich denke eher, dass es problem mit der display-eigenschaft ist (block vs inline-block)

[Joe]

kannst du bitte auch die entsprechenden CSS Zeilen posten. Bin auf der Arbeit und kann hier die CSS Datei nicht runterladen.
wtf?

Ja so kann das auch sein

Ich habe die Vermutung, dass es mit dem Boxmodell zusammenhängt. Und dieses wird bei den verschiedenen Browsern gern "anders" interpretiert.

unwahrscheinlich, da die seite äusserst wenig mit css zu tun hat - es ist eine div-suppe gewürzt mit grafiken

ich denke eher, dass es problem mit der display-eigenschaft ist (block vs inline-block)

Aha. Also ich hab mir eigene style gerade geschrieben und die Seite im IE6 nachgebaut. Ohne Probleme. Und du willst mir jetzt erklären, dass es nicht am css liegt???

[suit]

wtf?
Ja so kann das auch sein

was hindert dich daran, den pfad des css-files im browser einzugeben - ist doch nur eine textdatei

Aha. Also ich hab mir eigene style gerade geschrieben und die Seite im IE6 nachgebaut. Ohne Probleme. Und du willst mir jetzt erklären, dass es nicht am css liegt???

nein, so hab ich das nicht gemeint ;) natürlich ist die display-eigenschaft eine css-eigenschaft

ich meinte nur, dass die seite selbst das wesen von css nicht wirklich nutzt - die seite besteht aus divs und bildern (in img-elementen) - wenn du das css deaktivierst, wirst du feststellen, dass nicht viel unterschied zwischen mit und ohne css zu erkennen ist - von der seite ist äusserst wenig css für die eigentliche seitendarstellung verantwortlich

[Fabian]

ich meinte nur, dass die seite selbst das wesen von css nicht wirklich nutzt - die seite besteht aus divs und bildern (in img-elementen) - wenn du das css deaktivierst, wirst du feststellen, dass nicht viel unterschied zwischen mit und ohne css zu erkennen ist - von der seite ist äusserst wenig css für die eigentliche seitendarstellung verantwortlich

Ich bin für alles offen! Wie wäre es denn besser gemacht?

[suit]

Ich bin für alles offen! Wie wäre es denn besser gemacht?

in erster linie, wenn du mit semantisch vernünftigen markup beginnst

andererseits, wenn du sämtliche designelemente ins css verlagerst

grob zusammengefasst

• verfasse deine navigation als liste
• definiere jedes bild, welches nicht zum inhalt gehört NICHT mit <img /> sondern als hintergrundbild (eine verzierungsgrafik fürs menü ist zb kein inhalt)
• nutze sinnvolle klassen und kaskaden
• verzichte auf inline stylesheets

[Fabian]

in erster linie, wenn du mit semantisch vernünftigen markup beginnst

Was ist denn an meinem Markup falsch? Bzw welches wäre besser?

• verfasse deine navigation als liste
• definiere jedes bild, welches nicht zum inhalt gehört NICHT mit <img /> sondern als hintergrundbild (eine verzierungsgrafik fürs menü ist zb kein inhalt)

Klingt gut/sinnvoll.

• nutze sinnvolle klassen und kaskaden

Hab ich das nicht?

• verzichte auf inline stylesheets

Verwende ich welche?

[suit]

in erster linie, wenn du mit semantisch vernünftigen markup beginnst
Was ist denn an meinem Markup falsch? Bzw welches wäre besser?

falsch ist ansich nichts, es sind nur manche sachen etwas ungeschickt gemacht - zb dein seitenkopf

den würde ich so machen:
<h1><a href="/">Sunrise</a></h1>

h1 bekommt als hintergrund diese streifenzeug
der link drinnen erhalt als hintergrund den schriftzug, der text wird mit negativem text-indent ins nirvana geschossen (phark-methode)

im vergleich zu deiner methode spart das ungemein viel quelltext

das menü ebenfalls, wie schon gesagt - machs als liste, die einzelnen li-elemente bekommen dann die jeweiligen bilder als hintergrundbilder

du kannst zwar die standard menülösung (gmenü) von typo3 nicht verwenden, du musst dir selbst ein typoscript schreiben - aber das ist nicht so das problem - zudem lernst du in puncto typoscript einiges dazu

und offen gesagt, der code der standard-typo3-menüs ist eine frechheit

• nutze sinnvolle klassen und kaskaden
  Hab ich das nicht?

momentan nutzt du eigentlich noch garnichts - du hast bis auch ein paar ids ja noch nicht viel - das war als anmerkung gedacht ;)

.ueberschrift ist eine ziemlich sinnlose klasse - dafür sind die gliederungsüberschriften h1 bis h6 zuständig, diese lassen sich eindeutig nach ihrem namen selektieren - typo3 wird dich zudem mit class="bodytext" in jedem p-element belohnen (unsinnigerweise)

&nbsp; ist übrigens für die formatierung nicht geeignet (hast du im fuss) da wäre ein padding-right im fuss oder angebracht

• verzichte auf inline stylesheets
  Verwende ich welche?

nein, aber du wirst - typo3 macht das quasi per default, also versuch das so gut es geht zu unterbinden ;) codeschnipsel zum codecleaning findest du genug

und am rande bemerkt

nenne die subparts in typo3 so, wie die zugehörigen elemente

<!-- ###BODY_INHALT### --> verwirrt (aber jedenfalls besser wie das <!-- ###DOCUMENT### --> in den beispielen) - nenne das ganze einfach nur body, da es offensichtlich <!-- ###BODY### -->

die beiden marker ###MENU### und ###INHALT### bekommen dann wahrscheinlich ohnehin zugehörige containerelemente - du solltest aber auch hier subparts verwenden, da diese in der anwendung leicher sind und sich die templates leichter testen lassen

also einfach
<!-- ###MENU### -->
<div id="menu">
  <ul>
    <li><a hrer="/">Menupunkt</a></li>
    <li><a hrer="/">Menupunkt</a></li>
    <li><a hrer="/">Menupunkt</a></li>
  </ul>
</div>
<!-- ###MENU### -->

damit kannst du dein nacktes template testen und wenn du die subparts dann durch eigentlichen inhalt ersetzt, kannst du trotzdem mit dem template vergleichen obs noch passt

[Fabian]

Danke für die Tipps!

[Fabian]

das menü ebenfalls, wie schon gesagt - machs als liste, die einzelnen li-elemente bekommen dann die jeweiligen bilder als hintergrundbilder

Hierzu hab ich noch eine Frage: Wenn ich eine horizontale Liste will, dann muss ich ja mit display: inline; arbeiten. Das beschränkt mir mein li-Elemnent aber auf den Text der drin steht. Dann sieht man aber nicht das ganze Hintergrundbild, sondern nur den Ausschnitt.
height und width bringen mich auch nicht weiter.....

[suit]

Hierzu hab ich noch eine Frage: Wenn ich eine horizontale Liste will, dann muss ich ja mit display: inline; arbeiten. Das beschränkt mir mein li-Elemnent aber auf den Text der drin steht. Dann sieht man aber nicht das ganze Hintergrundbild, sondern nur den Ausschnitt.
height und width bringen mich auch nicht weiter.....

du kannst mit float arbeiten, damit hast du nebeneinanderliegende elemente, aber dennoch die eingeschaften von block-elementen

beispiele gibts bei listamatic

[Daniel unreg]

Hallo,

DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen und Images, Tables, and Mysterious Gaps sind die Erklärung.

Nebenbei solltest du die Zeichenkodierug auf UTF-8 umstellen, da du sonst eine XML-Deklaration benötigst, welche sich jedoch mit dem IE6 nicht verträgt.

Die Verwendung von zum Inhalt passendem Markup wäre sehr sinnvoll.

Gruß

[irgendwer]

Das Problem liegt irgendwie bei den Links im Menü. Und der IE hat sowieso ein Problem mit Pixeln...

Mach in den  Div mit dem Schatten kein <img> rein sondern mach das Bild einfach als Hintergrund.

#menu_schatten {style.css (line 37)
background-image:url(bilder/menu_schatten.jpg);
background-repeat: no-repeat;
height:8px;
}

Das müsste das Problem beheben, ich glaube es geht auch wenn du dem Div einfach font-size: 0; zuweist.

[suit]

Und der IE hat sowieso ein Problem mit Pixeln...

kannst du das irgendwie näher erklären, ich kann da nicht ganz folgen

[irgendwer]

Und der IE hat sowieso ein Problem mit Pixeln...
kannst du das irgendwie näher erklären, ich kann da nicht ganz folgen

Begründung kann ich dir leider nicht nennen, ist zu lange her dass ich damit ein Problem hatte, sorry... war vielleicht nur ein BUG, auch wenn ich mich daran erinnere irgendwo eine Erklärung bekommen zu haben...*grübel*

[Fabian]

Vielen Dank!

Das hat geholfen!