Problem mit IE und Firefox

[Maik]

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]

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]

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]

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