{HTML} Eine Website in Firefox und Internet Explorer gleich anzeigen zu lassen

Delequar · 6. April 2010

Hallo liebe Community,

kurze Vorgeschichte:

Ich arbeite zur Zeit an einer Homepage. Das Template, das Grundgerüst ist komplett fertig.
Nun arbeite ich mich nach und nach durch die ganzen Inhalte, die ich leider im CMS Joomla 1.0 erstellen muss. Je nach Link werden dann die entsprechenden Inhalte in das Template reingeladen. Bis jetzt habe ich all meine Ergebnisse in Firefox getestet und bin mit dem Design sehr zufrieden. Genauso wie der Kunde auch.

Nun kam die bitte, dass ich die Homepage auch für den Windows Internet Explorer 6 - 7 optimieren soll. Den die Darstellung der Seite ist leider ne andere als die im Firefox.
Sprich, die vielen Elemente sind entweder verschoben oder werden nicht so angezeigt wie sie es hätten angezeigt werden sollen. Im Gegensatz zu Firefox.

Nun ist meine Frage an euch:

Wie gehe ich da am Besten und Sichersten vor?
Muss ich eine zweite CSS-Template Datei erstellen? Quasi 2 Versionen; eine für Firefox und eine für Internet Explorer?

Ich möchte nur ungern mein fertiges Template beschädigen oder sogar verzehren...

Vielen Dank im voraus!!!

Kausalat · 6. April 2010

Ja, am sinnvollsten wäre eine zweite CSS-Datei für den Internet Explorer.

Damit regelkonforme Browser wie Firefox, Opera, Safari etc. das IE-Stylesheet nicht abbekommen, solltest du die CSS-Datei mittels conditional comments einbinden.

Da der IE 6 von der Darstellungsleistung her schlechter ist als der IE 7, würde ich dir sogar ein weiteres Stylesheet für IE "kleiner gleich" 6 empfehlen.

Beispiel:

Code:

<!--[if lte IE 6]>
** Einbindung des IE-"kleiner gleich"-6-Stylesheets **
<![endif]--> 

<!--[if IE 7]>
** Einbindung des IE-7-Stylesheets **
<![endif]-->

Delequar · 6. April 2010

Kausalat!!!! Du bist ein Genie

Vielen Dank für deinen schnellen Lösungsweg.
Ich werde gleich ende der Woche es mal testen! :-)

Wie verweise ich aber den Explorern, welches CSS für welchen Explorer ist?
Erkennt es das Windows dann von allein?

verstehst du was ich mein? - Wie also weiss zB Firefox, dass dieses CSS für ihn ist und das andere dann für den IE >/6 /7 ?

Ich bin da leider noch ein Noob

und wüsste auch nicht genau wonach man da googelt.

Liebe Grüße

Kausalat · 6. April 2010

Wie schon gesagt, bekommen Firefox und Co. nichts mit von den IE-Stylesheets.

Etwas veranschaulicht:
style-normal.css sei deine bestehende CSS-Datei. Die wird in diesem Zustand von allen Browsers gelesen und mehr oder weniger (beim IE) gut verarbeitet.

Fügst du die conditional comments hinzu, ändert sich für Firefox etc. nichts, da sie die Anweisung einfach überlesen (weil sie mit  endet).

Die IEs erkennen allerdings die comments und nehmen zuerst die style-normal.css an und "korrigieren" diejenigen Elemente, die du in den IE-Stylesheets explizit neu "gestylet" hast.

Kleiner Tipp: Falls die IEs die Extra-Stylesheets nicht anwenden wollen, empfehle ich hinter jedem Konflikt-Wert den Ausdruck "! important".

Beispiel:

Code:

body { 
margin: 25px auto ! important;
background: url(der-ie-ist-der-beste.jpg) no-repeat ! important;
}

Janitor · 6. April 2010

Hier nochmal was zum nachlesen:
http://de.selfhtml.org/css/layouts/browserweichen.htm

Die Conditional Comments sind nur für die IEs da, alle anderen Browser ignorieren diese und nehmen die normale CSS-Datei.

Allerdings musst du nicht nochmal eine komplette neue CSS-Datei schreiben, nur die wichtigsten änderungen kommen in die zusätzliche datei.

Also wenn bei #container1 das padding um 2px nicht stimmt, gibst du es in der extra IE-CSS-Datei an.

Delequar · 6. April 2010

Leute! Ihr seit die Besten!

Danke! Ich werde es mal testen.
Sollten noch dann fragen bestehen, so werde ich mich nochmals an euch wenden.

Noch nen schönen Tag!
LG
Dele

Delequar · 8. April 2010

Funtzt leider net oder ich übersehe da was.

Also - Da habe ich meinen Homepage Ordner. Startseite ist klar: index.php (php wegen Joomla), und einen CSS Ordner für die CSS`s.

Kleine doofe Frage, wenn in meinem Index-Quelltext steht:



müsste der IE 6ser meine bestimmten CSS Definitionen wie der:

#header_logo {
background: url(../images/logo.jpg) repeat-x ! important;
width: 252px ! important;
height: 95px ! important;
text-indent: –5000px ! important;
float: left ! important;

funktionieren oder nicht?

Janitor · 8. April 2010

1. Probier es mal so:

HTML:

<head>
  <title>CSS-basiertes Layout</title>
  
  <link rel="stylesheet" type="text/css" href="basis.css">

  <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css">
  <![endif]-->

</head>

2. Das Important wird so geschrieben:

!important

Kausalat · 8. April 2010

Nitronnet schrieb:
2. Das Important wird so geschrieben:

!important

Nicht zwingend, es funktioniert auch wie oben geschrieben

Die "<link rel..."-Variante müsste vom IE verstanden werden.

Delequar · 8. April 2010

Danke!

Shit, irgendwie klappt es immer noch net :/

Im IE 6 wird komischerweise nix verändert :/

Janitor · 8. April 2010

Ist die Seite online? Wenn ja gib mal einen Link, da man so nicht genau sagen kann woran es liegt.

Delequar · 8. April 2010

Würde ich sehr gern. Kann es aber net

Es ist nämlich ein Intranet-Projekt und quasi nur fürs LAN.

ich hatte soeben rumgestet und zB die größen in meiner "ie6.css" verändert.
Dabei habe ich halt festgestellt, dass der Internet Explorer sich die Informationen aus dem IE-Stylesheet erst gar nicht rausnimmt.

Seine Quellen werden also doch nur aus der origenalen "template_css.css" umgesetzt.

Woran kanns den liegen?

So sieht mein "head" aus

-----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



<head>
<title>XXX | Intranet</title>
<?php mosShowHead(); ?>
<?php if ( $my->id ) initEditor(); ?>
<meta http-equiv="Content-Type" content="text/html;ð
<?php echo _ISO; ?>" />

<link href="<?php echo $mosConfig_live_site;?>/templates/bw_efb2/css/template_css.css" rel="stylesheet" type="text/css" />









</head>
----------------------------

Die "href" alternative geht auch net...

Kausalat · 8. April 2010

Prüfe einmal, ob der IE wirklich sein Stylesheet nicht annimmt oder ob die template_css.css irgendwie daran schuld ist, indem du die letztgenannte Datei vorübergehend auskommentierst.

Delequar · 8. April 2010

Ne, macht er leider net.

Vllt wegen dem PHP-Befehl?

<link href="<?php echo $mosConfig_live_site;?>/templates/bw_efb2/css/template_css.css" rel="stylesheet" type="text/css" />

Ne oder?
Die 4 IE-Stylesheet Dateien liegen in dem selben Ordner wie die Index.php, von der ihr gerade den "head" gelesen habt.

Ergänzung (9. April 2010)

Kann ich ggfs eine Private Nachricht zuschicken, mit dem Quelltexten?

Könntet ihr es vllt kurz überüprüfen?

Wäre euch dafür sehr sehr Dankbar! Das Land Deutschland dann auch!

Warum? Würdet ihr aus dem Quelltext erkennen!

Janitor · 10. April 2010

Es geht nicht um den Quelltext ansich, es geht eher um das Sehen und teste können.

Dazu bräuchte man halt das Layout von der Seite.

Kausalat · 10. April 2010

Hast du schon deine Stylesheets über den CSS-Validator prüfen lassen? Möglicherweise liegt der Fehler an irgendeinem kleinen Tippfehler ...

PuppetMaster · 10. April 2010

@import funktioniert nicht im IE7 und älter. Probier die andere Variante, die dir in #8 vorgeschlagen wurde.

Delequar · 12. April 2010

@Kausalat - Danke für den Link. Den werde ich mir mal schön merken, kann es aber da net prüfen weil ich hier aufm Netzwerk arbeite.

@Nitronnet - ich habe eben schnell 2 Screenshots erstellt, nachdem ich meinen "Kunden / Chef" gefragt habe.

Screenshots wurden entfernt

@PuppetMaster - Auch dir 'nen Dank für diese Info.
Ausprobiert - funzt aber leider immer noch nicht.

Schaut -  - die CSS Datei ist wie gesagt, in dem selben Ordner wie die Index.php

IE 6 - müsste sich ja dann url(ie6.css) die Infos da rauspicken, oder net?

Beispiel: Der Anfang der CSS...

* {
margin: 0;
}
body {
font-size: 83% !important;
line-height: 100% !important;
color: #000000;
background: url(../images/nav_bg.jpg) top left repeat-y z-index: 15 !important;
}
#header {
background: url(../images/banner_bg.jpg) repeat-x !important;
padding: 0em !important;
margin-top: 0px !important;
border-top:5px solid #BAAB5A !important;

PuppetMaster · 12. April 2010

Hmm, nach etwas weiterer Recherche zufolge können auch ältere IE-Versionen die Importversion, solange nicht ne Medienangabe folgt -- was hier aber nicht der Fall ist.

Probiers nochmal mit Hochkommas:

@import url("ie6.css");

Ansonsten bin ich auch ratlos.

Janitor · 12. April 2010

Lass mal den ganzen quatsch mit den "conditional comments" und schreibe dein IE6 fix ans Ende der normalen CSS-Datei.

HTML:

/* IE 6 Fix */
* html #header {}

/* IE 7 Fix */
*+ html #header {}

Btw.

Guck mal ob du auch überall jedes einzelne #DIV, ul, li oder was sonst noch zwischen dem body-tag und dem div liegt - was du verändern möchtest - eingetragen hast!

Nur zur veranschaulichung:

HTML:

<div #page>
   <div #header>
       <div #bla1>
           <div #bla3>
              <ul>
                 <li class3>

z. B. so:

HTML:

* html #header #bla1 #bla3 ul li.class3{width:610px !important;}

{HTML} Eine Website in Firefox und Internet Explorer gleich anzeigen zu lassen

Lieutenant

Kausalat

Gast

Lieutenant

Kausalat

Gast

Ensign

Lieutenant

Lieutenant

Ensign

Kausalat

Gast

Lieutenant

Ensign

Lieutenant

Kausalat

Gast

Lieutenant

Ensign

Kausalat

Gast

Admiral

Lieutenant

Admiral

Ensign

Ähnliche Themen