# Problem mit IE und Firefox



## kerstel (26. Mai 2008)

Hallo,

unter der Seite http://entwicklung.welt-der-werbemittel.de/ stehen auf der Startseite 2 Bilder. Einmal mit einer Frau und einmal mit einer Zange 

Im IE stehen diese 2 direkt nebeneinander, im FF überlagert das rechte Bild das linke. Woran liegt das?

Das 2. Problem ist, das ich die 4 grauen Boxen weiter unten, immer nebeneinander haben will. Im IE klappts im FF nicht?!

Gruß
Kerstel


----------



## Maik (26. Mai 2008)

Hi,

wenn du, wie von mir schon mal darauf hingewiesen, in deinem umfangreichen Stylesheet für eine chronologische Reihenfolge der Selektoren sorgst, bin ich gerne bereit, darin nach der Ursache Ausschau zu halten.

In dieser Form ist es aber die reinste Zumutung, sich als Außenstehender darin zurechtzufinden, und wird von mir definitiv verweigert.


----------



## kerstel (26. Mai 2008)

Hi,

was meinst Du mit chronologisch? Man kann doch einfach nach der id etc suchen?

Oder was meinst Du?

Gruß
kerstel


----------



## Maik (26. Mai 2008)

http://de.wikipedia.org/wiki/Chronologie

Sorry, du erwartest von uns Hilfe, und präsentierst ein ellenlanges Stylesheet, in dem es zugeht, wie bei "Hempels unter dem Sofa", und ich habe wirklich keine Zeit und Lust, mir darin erstmal die einzelnen Selektoren zusammenzusuchen, um mir dann einen Überblick verschaffen zu können.


----------



## kerstel (26. Mai 2008)

mir war schon klar was chronologie bedeutet, aber ich verstehe den Sinn hier nicht?

Ich kopier mir immer die klasse mit STRG+C und drück in meinem Editor STRG+F und dann STRG+V und schon hab ich alles...

Sachen die ich ändere stehen übrigens alle im Kommentarbereich INDIV.

Oder versteh ich irgendwas falsch?


----------



## kerstel (26. Mai 2008)

hab jetzt mal die zuletzt geänderten ganz nach oben, vlt. ist es das was Du meintest.

Kann aber durchaus sein, das es styles gibt die das Problem machen und weiter unten sind weil ich sie noch nie angefasst habe (die css kommt so vom hersteller, bis auf den Bereich indiv).

Hoffe das hiflt Dir weiter.

Gruß
Kerstel


----------



## Maik (26. Mai 2008)

kerstel hat gesagt.:


> Ich kopier mir immer die klasse mit STRG+C und drück in meinem Editor STRG+F und dann STRG+V und schon hab ich alles...


Wie ich mir die Codeschnipsel zusammensuchen könnte, weiß ich selber, aber es ist meiner Ansicht nach nicht mein/unser Job, dies erstmal machen zu müssen, um sich überhaupt zurechtzufinden.


----------



## kerstel (26. Mai 2008)

ich bin da voll Deiner Meinung, deswegen frage ich nach was Du von mir haben willst, damit ich das machen kann.


----------



## kerstel (26. Mai 2008)

ist die jetzige css den so wie du sie möchtest?


----------



## Loomis (26. Mai 2008)

3400 Zeilen Stylesheet? Das ist echt heftig.
Deine erste div-Klasse heisst wrapper, also schreibe das ganz oben im Sylesheet. Aktuell ist das irgendwo mittendrin.


----------



## kerstel (26. Mai 2008)

das wäre aber nicht chronologisch


----------



## Maik (26. Mai 2008)

Wenn du dir für Firefox "Firebug" einrichtest, erkennst du auf Anhieb, weshalb die rechte Grafik nicht dort sitzt, wo du sie gerne hättest. Im übrigen wird sie nicht nur im Firefox, sondern in allen standardkonformen Browsern "falsch" positioniert.

Kleiner Tip: die 50%-Breite des DIVs *containerhalfrow* dürfte hier die Ursache sein.


----------



## Maik (26. Mai 2008)

Und hier mal der entsprechende "Firebug"-Schnappschuss zu dem Problem:


----------



## kerstel (26. Mai 2008)

ah ok, demnach ist mein css jetzt ok?

Wie sieht das bei den grauen boxen unten aus?


----------



## Maik (26. Mai 2008)

Wähle für das HTML-Dokument mal einen Doctype, der das Dokument den Browsern im "Standardsmode" übergibt, denn derzeit laufen die Browser im "Quirksmode", und in diesem Darstellungsmodus hält sich der IE noch weniger an die w3c-Spezifikationen - bzgl. der grauen Boxen wäre dies das "CSS-Boxmodell".

Was er also deiner Meinung nach richtig darstellt, ist nämlich überhaupt nicht der Fall!

Man könnte den Eindruck gewinnen, dass du die Seite im IE entwickelt, und anschliessend in den standardkonformen Browsern betrachtet hast.

Gewöhn dir also an, eine Website standardkonform zu entwickeln, und sie zu guter letzt im IE zu überprüfen, was er an Bugs zu bieten hat.


----------



## kerstel (26. Mai 2008)

Dein Eindruck ist richtig, ich hab auf 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

umgestellt. Geändert hat sich aber nix. Im Gegenteil die Boxen sehen bei beiden gleich blöd aus. Die Produkt boxen und die grauen boxen sollen nebeneinander stehen. Dann hab ich noch gesehen wenn man auf eine Kategorie oben klickt (z.b. Neuheiten) steht der mittlere Teil nicht mittig zwischen den rechten und linken Block.


----------



## Maik (26. Mai 2008)

Wenn die grauen Boxen nun in allen Browsern "gleich blöd" aussehen, bist du doch schon mal einen bedeutenden Schritt weiter, und musst nun nur noch an der Breitenangabe in der Klasse *containerquarterrow* und/oder Innenabstandangabe in der Klasse *cmscontainer* etwas feilen, da beide zusammenaddiert die tatsächliche Breite der  Box ergeben - siehe hierzu meinen zuletzt genannten Link - und sie somit zu breit für vier Boxen nebeneinander ist.


----------



## kerstel (26. Mai 2008)

sowas in die richtung hab ich mir auch schon gedacht, aaaaber:

im IE stehen die Boxen kreuz und quer da (liegt wahrscheinlich an der Breite der Artikelboxen)

Ich hab da mal am abstand rumgebastelt, aber wenn ich z.b. im nen abstand von 17px habe passt das im IE und im FF macht er einen umbruch.


----------



## kerstel (27. Mai 2008)

*wiedermal ie vs. ff*

Hallo,

folgende Probleme habe ich im IE und FF und komme nicht weiter.

Auf der Seite http://entwicklung.welt-der-werbemittel.de/

1. Das Feld "mein Konto" stehe im FF richtig, im IE nicht
2. In den Kategorien oben, fehlt bei "Leder und mehr" ein Pixel zum Randabschluß. Das ganze wird über Smarty dynamisch erzeugt, irgendwie müsste man also am Abstand was machen?
3. Wenn man auf eine Kategorie klickt, verhaut es die Boxen total. z.b. Ist der Pfad (sie sind hier) weit rechts, sollte aber am linken rand sein. "Mein Konto" rutscht rüber

Danke und Gruß
Kerstel


----------



## Maik (27. Mai 2008)

Hi.


Die Passage funktionierte gestern noch im IE und lautete da so:



```
<div class="slider">
                                        <div style="width: 70%; float: left;">

                                                </div>
                        <div class="myaccount">
                                                                        <a href="http://entwicklung.welt-der-werbemittel.de/index.php?sid=dfb2f20c0e9b38974581b8d547e7184a&cl=account" class="myaccount_a">Mein Konto</a>
                                                        </div>
                        <div class="clear"></div>
                </div>
```

Deine Rechenkünste solltest du mal etwas auffrischen, denn 950px - 10*93px = 20px. Und 20px dividiert durch 9 (Fugenabstände zwischen 10 DIVs) ergibt 2.222222222px - und nicht blos 2px.

Zur Erinnerung: http://www.tutorials.de/forum/1618984-post8.html


Sag ich erstmal nichts dazu, da die Seiten ja grundsätzlich im IE falsch angezeigt werden.


----------



## kerstel (27. Mai 2008)

wieso verschoben? sind doch neue probleme


----------



## Maik (27. Mai 2008)

Aber noch immer auf der gleichen Seite


----------



## kerstel (27. Mai 2008)

Maik hat gesagt.:


> Die Passage funktionierte gestern noch im IE und lautete da so:


Ja, gestern hab ich aber auch auf den standard doctype umgestellt



Maik hat gesagt.:


> Deine Rechenkünste solltest du mal etwas auffrischen, denn 950px - 10*93px = 20px. Und 20px dividiert durch 9 (Fugenabstände zwischen 10 DIVs) ergibt 2.222222222px - und nicht blos 2px.


schon klar, nur muss es ja ne möglichkeit die rechte Box weit genug rüberzuschieben. und 2.222222px zeigt ja kein Browser an, wenn dann 2


Maik hat gesagt.:


> Sag ich erstmal nichts dazu, da die Seiten ja grundsätzlich im IE falsch angezeigt werden.


Und was kann ich dagegen tun?


----------



## kerstel (27. Mai 2008)

Maik hat gesagt.:


> Aber noch immer auf der gleichen Seite


 
rechthaber


----------



## Maik (27. Mai 2008)

kerstel hat gesagt.:


> In den Kategorien oben, fehlt bei "Leder und mehr" ein Pixel zum Randabschluß. Das ganze wird über Smarty dynamisch erzeugt, irgendwie müsste man also am Abstand was machen?





kerstel hat gesagt.:


> Maik hat gesagt.:
> 
> 
> > Deine Rechenkünste solltest du mal etwas auffrischen, denn 950px - 10*93px = 20px. Und 20px dividiert durch 9 (Fugenabstände zwischen 10 DIVs) ergibt 2.222222222px - und nicht blos 2px.
> ...


Dann verringere die Breite auf 948px, damit es rechnerisch aufgeht.


----------



## kerstel (27. Mai 2008)

is n argument. hast du ne idee bei den anderen problemen?


----------



## Maik (27. Mai 2008)

kerstel hat gesagt.:


> hast du ne idee bei den anderen problemen?


Sicherlich, aber nicht in fünf Minuten, denn da liegt doch einiges im argen.

Solange in deiner "extrem-umfangreichen" CSS-Datei aber noch immer alles kreuz und quer umherschwirrt, seh ich es nicht ein, mich darin einzulesen und zurechtzufinden. Das hatte ich dir aber schon gestern in meiner ersten Antwort mitgeteilt.


----------



## kerstel (27. Mai 2008)

und ich sagte das ich da Deiner Meinung bin. Aber sage mir bitte wie Du es haben willst. Ich stell Momentan alles was ich änder nach oben, gestern fragte ich 2x ob das so OK ist. Wenn nicht sag mir bitte wie ich es anders machen soll.


----------



## Loomis (27. Mai 2008)

Das habe ich dir auch gestern schon gesagt.
Dein erstes <div> ist wrapper, also kommt als erstes im Stylesheet #wrapper (und nicht in Zeile 138, wie das aktuell bei dir ist), danach .boxheader ...uswusf.
Und das ist dann sehr wohl Chronologisch


----------



## kerstel (27. Mai 2008)

chronologisch bedeutet das es nach der Zeit sortiert ist, also z.B. aktuellste nach oben. wrapper ist aber nicht die aktuellste. Zudem wird die Seite dynamisch aufgebaut, d.h. auf der einen Seite ist "containerfullrow" ganz oben, auf der nächsten ganz unten...


----------



## kerstel (28. Mai 2008)

ist es so schwer mir zu sagen wie ihr das css haben wollt? Wenn ich euch falsch verstehe dann bitte mal mit beispiel etc.


----------



## Maik (28. Mai 2008)

kerstel hat gesagt.:


> ist es so schwer mir zu sagen wie ihr das css haben wollt?


Sollen wir es dir hier noch detailiert aufschreiben, oder was ist daran so schwer zu verstehen, die im HTML-Code existierende Reihenfolge der Blöcke im Stylesheet zu übernehmen, Stichwort: "Chronologie"?


----------



## kerstel (28. Mai 2008)

ja dann antworte doch wenigstens mal. Es geht so nicht, weil die seite dynamisch aufgebaut wird! und chronologie kommt von zeit, was hat Deine sortierung mit Zeit zu tun?


----------



## Loomis (28. Mai 2008)

Ich glaube Maik, du hättest den Wikipedia-Link weglassen sollen. 
Ist doch völlig egal was das mit Zeit zu tun hat. Tu es einfach so.


----------



## kerstel (28. Mai 2008)

den link hab ich nicht mal angeschaut.

nochmal: es geht so nicht weil, wenn auf der ersten Seite z.B. die Klasse containerfullrow ganz oben steht, steht sie auf einer anderen seite ganz unten. Weil die Seiten dynamisch sind. Und eventuell stellt man was um un schwups ist die Klasse auch auf der ersten Seite woanders. Erklär mir bitte wie ich hier die Sachen entsprechend anordnen soll!


----------



## Maik (28. Mai 2008)

Loomes hat gesagt.:


> Ich glaube Maik, du hättest den Wikipedia-Link weglassen sollen.


Scheint so, ich konnte ja nicht ahnen, dass kerstel sich an der _zeitlichen_ Abfolge so aufhängt.


----------



## kerstel (28. Mai 2008)

dann hättest gleich mal richtig geantwortet 

was soll ich nun tun, damit das css passt für euch. Ich denke so wie ihr meintet geht ja nicht


----------



## Maik (28. Mai 2008)

Wenn du dich bis zum Wochenende gedulden kannst, werde ich mir das mal näher anschauen, vorher hab ich nicht ausreichend Zeit, um mich durch das umfangreiche Stylesheet zu wühlen.

Auf jeden Fall kannst du dich schon mal mit dem "Conditional Comment" näher beschäftigen, denn der wird auf jeden Fall für die älteren IE-Versionen benötigt, um in einem gesonderten Stylesheet die Korrekturen vorzunehmen, und deine ersten selbständigen Versuche starten, das Layout für den IE <7 zu optimieren.


----------



## kerstel (28. Mai 2008)

gar kein problem

ich schau mir die sachen an


----------



## Maik (28. Mai 2008)

Achja, begeh bitte nicht den Fehler, das vollständige Stylesheet in das IE-spezifische zu übernehmen, sondern nimm darin nur die Selektoren mit den Eigenschaften auf, die vom IE falsch interpretiert werden.


----------



## Maik (31. Mai 2008)

Hi,

hier folgt dann mal die erste "Wasserstandsmeldung", nachdem ich die letzte dreiviertel Stunde auf Tauchstation im Quellcode der Startseite war  

Der Grund, dass der IE6 die vier Boxen *.artquarter* nicht in einer Reihe nebeneinander anordnet, liegt an der  Kombination der width:100%- und padding:5px-Deklaration, denn gegenüber den anderen Browsern dimensioniert er diese Boxenbreite auf 190 anstelle der gewünschten 180px.

Block-Elemente bringen von Hause aus eine 100%-Breite mit, sofern sie nicht aus dem normalen Textfluss herausgenommen werden, also ist diese Angabe hier absolut überflüssig und kann getrost "auskommentiert" werden:


```
.artquarter {
        /*width: 100%;*/
        height: 100%;
        padding: 5px;
}
```
Dann würde mich mal brennend interessieren, weshalb du eigentlich im Markup der rechten Spalte ständig dieses  inhaltsleere  DIV verwendest:


```
<div style="height: 15px;"></div>
```
wo es doch die margin-top-Eigenschaft gibt, mit der sich ganz bequem zwischen zwei Elementen ein vertikaler Außenabstand einrichten lässt?


```
<div style="background-color: #008193; width: 160px;" class="clearfix">
        ...
</div>

<!--<div style="height: 15px;"></div>-->

<div style="margin-top:15px" class="headerright clearfix">
        ...
</div>

<!--<div style="height: 15px;"></div>-->

<img style="margin-top:15px" src="http://entwicklung.welt-der-werbemittel.de/out/1/html/0/images/ks_catalog.jpg" border="0" alt="Katalog bestellen" />

<!--<div style="height: 15px;"></div>-->

<a style="margin-top:15px" href="http://entwicklung.welt-der-werbemittel.de/index.php?sid=a2be700b1f522fb2e9bf5b7ced55adf8&cl=newsletter"><img src="http://entwicklung.welt-der-werbemittel.de/out/1/html/0/images/ks_newsletter.gif" border="0" alt="Katalog bestellen" /></a>

<!--<div style="height: 15px;"></div>-->

<div style="margin-top:15px" class="headerright clearfix">
        ...
</div>
<div style="background-color: #ffff00; width: 160px;" class="clearfix">
        ...
</div>

<!--<div style="height: 15px;"></div>-->

<div style="margin-top:15px;background-color: #798084; width: 160px;" class="clearfix" >
        ...
</div>
```

Ebenso kannst du diese beiden "DIV-Typen" vollständig aus dem Quellcode verbannen:


```
<div class="clear_r"></div>

<div class="clear"></div>
```
da du eigens zum Aufheben der Floatumgebungen im Stylesheet die *.clearfix*-Klasse notiert hast, die du einfach zusätzlich in den jeweiligen Parent-Boxen aufrufst. 

Bei der ersten Box *.boxheader* würde sich das dann so darstellen:


```
<div class="boxheader clearfix">
    <div style="float: left;">
             ...
    </div>
    <div style="float: right;">
             ...
    </div>
    <!--<div class="clear_r"></div>-->
</div>
```
Und noch ein grundsätzlicher Tipp: bei einem Seitenquelltext, in dem offensichtlich die "Divitis" ausgebrochen ist, empfiehlt es sich, den Quellcode im Editor konsequent vom Anfang bis zum Ende mit Tabulatoren sauber ein- und auszurücken, und die einzelnen Blöcke / Seitenbereiche zusätzlich mit Start- und End-Kommentaren auszustatten, damit man gleich auf den ersten Blick erkennt, wo sie beginnen und enden.

In dieser Qualität ist es für einen Außenstehenden mit sehr viel Arbeit verbunden, sich darin zurechtzufinden und einen Überblick zu gewinnen, und wie ich schon eingangs des Thermas schrieb, ist es nicht unser Job, den Quelltext in eine passable Form zu bringen.

So, ich werde jetzt erstmal mit meiner Süßen in aller Ruhe frühstücken und anschliessend ins Städtle zum Shoppen gehen, bevor ich mich wieder in deinen "CSS-Dschungel" begebe, um zu erkunden, weshalb der IE6 eigentlich auf der Startseite die deklarierte Breite von 948px für das DIV *#wrapper* um stolze 160px überschreitet, und es stattdessen 1108px breit darstellt.

Aber vielleicht fällt dir ja zu diesem Punkt auch selber mal was ein, und ich kann mir dann den Arbeitsaufwand ersparen. ;-)


----------



## kerstel (1. Juni 2008)

ok, vielen Dank.

Du glaubst gar nicht was ich alles grad lese  hab ja denk ich auch viele Probleme schon selber gelöst, also glaub ich 

Das mit der verbreiterung ist glaub ich nicht nur im IE6, wenn Du mal in den Kategorien rumklickst, dann sieht man das sich der Shop immer ein bisschen hin und her bewegt, also sich nicht immer zentriert.

Ich hab auch zu Anfang gesagt, das ich es genau so sehe, dass es nicht Eure Aufgabe ist die Sachen auseinander zu nehmen. Aber ich sagte ja auch warum Eure sortierung so nicht funktioniert. Der Shop besteht aus Templates, und die Startseite allein aus 13 Stck.

Gruß
Kerstel


----------



## kerstel (11. Juni 2008)

sooo, ich bins mal wieder 

Hab denk ich soweit alles hinbekommen bis auf eine Kleinigkeit.

Wenn man auf eine Kategorie klickt, erscheint eine Artikelliste. diese hat rechts einen größeren Abstand wie links zum seitenrand. Wie kann ich das noch beheben?

Danke und Gruß
Kerstel


----------



## Maik (11. Juni 2008)

Hi,

ist die Artikelliste evtl. in einem übergeordneten Element mit Breitenangabe eingebettet?

Wenn ja, zeichne dieses mal mit margin:0 auto aus, damit es horizontal zentriert wird.

Wenn nein, schau dir die angewandte Technik für das zweite Beispiel "a centered floated left menu (unknown width)" in dem Experiment Centering Float Left Menus an, da es sich hierbei ja anscheinend auch um floatende Boxen handelt.

mfg Maik


----------

