suit: Unterschiedliche Abstände von div in IE und FF

Beitrag lesen

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