Dominik: Erhebliche Unterschiede im Layout Explorer und Firefox

Hallo zusammen,

dank dieser Seite habe ich es geschafft meinen Background so zu gestalten wie von mir gewünscht...Allerdings nur im Firefox Browser.

Ich benutze Joomla und habe dort das CSS modifiziert, welches 3 Dateien beinhaltet:

template_explorer.css
template_firefox.css
template_css.css

Alle 3 Dateien habe ich mit dem gleichen Inhalt modifiziert:

  
body {  
  
  color     : #333333;  
  
  margin-top    : 0px;  
  
  padding    : 0px;  
  
  
   background    : transparent url(../images/waka1.jpg)  top center no-repeat ;  
  
  
   background-position:-160px 10px;  
  
   background-color:#000000;  
  
   font-family    : Geneva, Arial, Helvetica, sans-serif;  
  
   font-size    : 12px;  
  
}  
  
.squirell {  
  
  color     : #333333;  
  
  
  
  
   background    : transparent url(../images/squirell.jpg)  no-repeat ;  
  
  
   background-position: -5px bottom;  
  
  
}  
  
.salti {  
  
  color     : #333333;  
  
  
  
  
   background    : transparent url(../images/salti.jpg)  no-repeat ;  
  
  
   background-position: -48px 800px;  
  
  
}  

##########################################################

In der Index.php vom Theme findet zunächst eine Auswahl statt, um welchen Browser es sich handelt, demzufolge wird das die passende CSS zugeordnet.

Die relevaten Daten der Index sehen folgendermaßen aus:

[code lang=german]

.....

if ( navigator.appName=="Microsoft Internet Explorer" )

document.write('<?php echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/tgf_malavista/css/template_explorer.css" type="text/css"/>" ; ?><?php echo "<link rel="shortcut icon" href="$GLOBALS[mosConfig_live_site]/images/favicon.ico" />" ; ?>')

else

document.write('<?php echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_firefox.css" type="text/css"/>" ; ?><?php echo "<link rel="shortcut icon" href="$GLOBALS[mosConfig_live_site]/images/favicon.ico" />" ; ?>')

.....

<body>

<div style="position:absolute" class="salti">

<div style=" position: relative" class="squirell">

......

[/body]

Wie bereits erwähnt wird die Seite (www.fishing-for-men.de) im Firefox super dargestellt und im Explorer allerdings absolut unakzeptabel...

Würde mich freuen, wenn mir jemand helfen könnte!
Danke!

Dominik

  1. Browserweichen per Javascript sind eine Unsitte, weenn es ssich nicht gerade um CSS-Definitionen handelt, die ohne Javascript sowieso nicht angezeigt werden.
    Es gibt genug Personen, die ohne JavaScript surfen, die haben dann gar kein CSS.
    Deswegen würde ich das Firefox-CSS als Standard verwenden und per Conditional Comments das Stylesheet für den IE einbinden.

    Hier der Link zu Conditional Comments:
    http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative