Ein Nachbar bat mich darum, Ihm eine Homepage aufzubauen. Ich habe mich für Wordpress entschieden, da ich damit recht gut umgehen kann und soweit schon weiss, wo ich was am besten einbaue. Nun hatte ich bisher nur fertige Templates verwendet und selten wirklich einschneidende Änderungen daran vorgenommen. 

Da mein Nachbar ein eigenes Design haben wollte musste also ein Template komplett neu aufgebaut oder ein vorhandenes komplett abgeändert werden. Ich entschloss mich also für ein vorhandenes und machte mich sogleich an die Arbeit. Da ich zu 99,999% NICHT den Internet Explorer (gleiches gilt für Windows), kam schnell das böse Erwachen Die Seite wart aufgebaut und auch mit Bildern und Texten gefüllt. Alles sah super aus und ging auch perfekt. Dann rief mich mein Nachbar an und meinte, es würden weder die Buttons im Header gehen, noch würde die Seite in irgendeiner erkennbaren Weise formatiert sein. Ich war sichtbar erschrocken, als ich mich selbst davon überzeugte.

Zwar ist der IE an vielen Problemen schuld, da Microsoft wie schon sooft einfach nur schludert in Sachen Softwareentwicklung und sich auf dem Quasimonopolstandardsetter ausruht, aber viele der Fehler kamen auch von meiner Seite!

Damit man auch weiss, wovon ich spreche: American-parts.de

Fangen wir mit der Positionierung an. 

Ich entschied mich dafür, die Sachen in die Stylesheet.css einzubauen um diese dann auf der Seite zu platzieren. Um auch die Positionierung auf die Seitenmitte zu erhalten verschachtelte ich alles in <div>.

#alignme {
     margin-left: 10%;
     border:         0;
     }

Danach baute ich die Kopfleiste (der große Schriftzug) ein:

#kopfleiste {
     padding-top; 15px;
     width: 777px;
     margin-left: 0px; 
     }

Dann ging ich daran, die Elemente anzuordnen:

#button_cars {
     width: 126px;
     height: 64px;
     margin-left: 179px;
     margin-top: -64px;
     }

(und so weiter ….)

Mein erster großer Fehler war es, dass ich mit negativen Werten gearbeitet hatte!

Anschließend habe ich dann im header.php die einzelnen Seiten auf die jeweiligen Buttons verlinkt:

<div id=”alignme”>
   <div id=”button_cars”>
      <a href=”?page_id=3″>
        <img src=”<?php bloginfo(’template_url’); ?>/images/button_cars.jpg” alt=”Cars” border=”0″ />
      </a>
   </div>
</div>

Hier finden sich also schon viele viele Fehler. Daher hier der Weg wie ich es anschließend gelöst habe:

#kopfleiste {
      background: url(’images/banner.jpg’) no-repeat top center;
      padding-top: 15px;
      height: 64px;
      width: 777px;
      position: absolute;
      left: 95px;
      top: 1px;
      }

#button_cars {
       background: url(’images/button_cars.jpg’) no-repeat top center;
       width: 126px;
       height: 64px;
       position: absolute;
       left: 274px;
       top: 77px; 
       }

1. Man kann schon hier einige Unterschiede erkennen.
2. Das Laden des img ist vom php in die css verfrachtet
3. Die Positionierung ist nun nicht mehr negativ
4. Es werden keine margin mehr verwendet
5. Die Positionierung findet nur noch über left und top statt

Schauen wir uns nun den Code an, in dem die Elemente in die header.php eingebunden wurden:

<div id=”button_parts” onclick=”location.href=’?page_id=270′;” style=”cursor: pointer;”></div>

Wie schon hier unschwer erkennbar ist, kann der Code viel besser gelesen werden. Ausserdem kann man hierdurch auch jederzeit die CSS “loslösen” vom eigentlichen Seitencode und immer wieder anpassen. Google freut sich als Suchmaschine auch darüber.

Was aber VIEL VIEL wichtiger ist! Durch diese Art der Positionierung konnte nun endlich auch der Internet Explorer die Buttons als solche erkennen, was vorher nicht der Fall war!

Soweit lief dann also alles ganz gut und der Header war da wo er sein sollte und er machte auch, was er machen sollte. Leider konnte ich das nicht vom #container und #content behaupten. Hier war noch immer ein Chaos Ich experimentierte ständig herum bis ich zumindest den Fehler lokalisieren konnte. Nun hatte ich einen Ansatz, aber: Lief es auf dem IE wollte Safari und Firefox nicht mehr, und umgekehrt genauso. Im Grunde genommen, war die Seite fertig und alles war perfekt, aber immer nur für einen Browser zur Zeit:

Läuft perfekt im FF und auch Safari aber nicht im IE:

#content { 
      width: 525px; 
      margin-top: 0px;
      margin-bottom: 20px;
      margin-left: 200px;
      margin-right: 0px;
      position:relative;
      padding: 5px 25px 15px 25px;
      border-right: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      min-height: 660px;
      }

Läuft perfekt im IE aber nicht im Safari und im FF:

#content { 
       width: 525px;
       position: relative;
       top: 0px;
       bottom: 20px;
       left: 0px;
       right: 0px;
       padding: 5px 25px 15px 25px;
       border-right: 1px solid #cccccc;
       border-left: 1px solid #cccccc;
       min-height: 660px;
      }

Was nun tun? Ich hatte doch alles soweit im Griff Google hat mir unzählige Ideen mit auf den Weg gegeben und ich habe Stunden damit verbracht um hier den idealen Weg finden zu können, von Hacks und rumexperimentieren war die Rede hier von sehr schwer, war die Rede da… Dann fand ich einen interessanten Beitrag und DEN Lösungsweg.

Warum nicht einfach 2 verschiedene stylesheet.css verwenden. Ich habe also eine stylesheet_ie.css angelegt und den inhalt der original stylesheet übernommen. Nur den Block, welchen ich eben vorher gezeigt habe, änderte ich ab.

Jetzt musste ich aber der header.php noch mitteilen, wann sie welche .css laden sollte. Dies habe ich dann über folgenden Weg gelöst:

<![if !IE]>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<![endif]>
<![if IE]>
<link rel=”stylesheet” href=”stylesheet_ie.css” type=”text/css” media=”screen” />
<![endif]>

Wenn der Browser als Internet Explorer (IE) erkannt wird, dann soll er die spezielle andere .css laden, ansonsten soll er immer die normale nehmen.

Das war es auch schon. Ich hoffe, dass ich mit diesem Beitrag anderen suchende Hilfe aufbauen konnte.

Stay tuned