✔ Webseite auf verschiedene Browser optimieren

Hi,
also das Problem mit dem Umbruch beim Menü habe ich immer noch nicht hinbekommen.
Für mich sieht es so aus als ob der IE einfach das Clear nicht auf das Element anwendet bei dem es gesetzt ist, sondern auf das Nachfolgende.
Ich hab nämlich das gleiche Problem schon wieder bei einem anderen Menü/Gallerie auf der Seite (http://www.bueroexit.de/neues).

Gruß
 
Hi,

die float:left-Regel für das <li>-Element, sowie die clear:left-Regel für li.break innerhalb des Listenmenüs thumb sind im CSS auskommentiert, und somit wirkungslos :confused:

mfg Maik
 
Okay, hab mir mal das Listenmenü isoliert vom übrigen Seitenquelltext in der IE-Familie mit den beiden "aktivierten" CSS-Eigenschaften betrachtet.

Mein Fazit: Die Liste kurzerhand um eine weitere <ul>-Ebene erweitern, dann klappt's auch mit dem Clearing an gewünschter Stelle :)

HTML: 
<ul class="thumb">
    <li>
        <ul>
            <li class="firstcell"><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
            <li><a ...><img .../></a></li>
        </ul>
    </li>
    <li class="break">
        <ul>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
        </ul>
    </li>
    <li class="break">
        <ul>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
        </ul>
    </li>
    <li class="break">
        <ul>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
            <li><a ...><img ... /></a></li>
        </ul>
    </li>
    <li class="break">
        <ul>
            <li><a ...><img ... /></a></li>
        </ul>
    </li>
</ul>
CSS: 
ul.thumb {
        float: left;
        list-style: none;
        width: 360px;
        margin-left: -10px;
}
ul.thumb li ul li {
        float: left;
        display: inline;
        position: relative;  /* Set the absolute positioning base coordinate */
        margin: 10px;
        width: 50px;
        height: 50px;
}
ul.thumb li ul li img {
         width: 50px; height: 50px; /* Set the small thumbnail size
        -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
         border: 1px solid #000;
        background: #fff;
        position: absolute;
        left: 0; top: 0;
}
ul.thumb li.break {
        clear: left;
        float: none;
        display: block;
}

mfg Maik
 
Hi Maik,
da haste die Seite noch im falschen Moment angeschaut. Ich hab da etwas rumexperimentiert wie den der IE dadrauf reagiert, wenn ich gewisse Kombinationen von Float und display:inline etc. verwende.
Sozusagen im dunkeln rumstochern.

Viele Grüßebuer
 
Hi,
natürlich taucht jetzt der "Double Float-Margin Bug" im IE auf.
Ich ahb den Code jetzt auf:
CSS: 
ul.thumb {
        float: left;
        display: inline;
        list-style: none;
        width: 360px;
        margin-left: -10px;
}
ul.thumb li ul li {
        float: left;
        display: inline;
        position: relative;  /* Set the absolute positioning base coordinate */
        margin: 10px;
        width: 50px;
        height: 50px;
}
ul.thumb li ul li img {
         width: 50px; height: 50px; /* Set the small thumbnail size
        -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
         border: 1px solid #000;
        background: #fff;
        position: absolute;
        left: 0; top: 0;
}
ul.thumb li.break {
        clear: left;
        float: none;
        display: block;
}
umgestellt.
Nur das display: block; bei .break kann ich nicht rausnehmen da sonst der FF den Umbruch killt.
Gibts noch eine andere Möglichkeit den "Double Float-Margin Bug" rauszubekommen?
 
Der "Doubled Float-Margin Bug" liegt hier überhaupt nicht vor, weil dieser sich nur im IE6 (und älter) ausschließlich auf der X-Achse ereignen würde, wenn da nicht schon die display:inline-Regel für den Selektor "ul.thumb li ul li" existieren würde, die seinen Bug fixt.

Hier sind die vertikalen Abstände zwischen den Elementen (Grafiken) im IE6 und IE7 zu groß, die sich mit diesen beiden Regelerweiterungen verringern lassen:

CSS: 
ul.thumb li.break {
        clear: left;
        float: none;
        display: block;
        overflow: hidden; /* Für IE7 */
}
* html ul.thumb li.break { /* Star-HTML-Hack wird in der IE-Familie im standardkonformen Modus  nur vom IE6 und älter interpretiert */
        height: 1%; /* Für IE6 */
}

Selbstverständlich hast du hier auch die Möglichkeit, die beiden hinzugekommenen Regeln stattdessen mittels zweier Conditional Comments in seperaten CSS-Dateien den beiden IE-Versionen zuzuführen ;)

mfg Maik
 
Hi,
okay. Ist schon immer wieder so eine Sache die richtigen IE-Bugs zu identifizieren.
Ich habs grad selber teilweise gelöst, wenn auch etwas unsauber:
ul.thumb li.break *
{
display: inline;
list-style: none;
}
Zum Vergrößern anklicken....
Aber da bleibt dann immer noch die -5px links.
Da werd ich dann doch wohl deine version nehmen :).

Viele Grüße und gute Nacht!
 
Hi,
ich wüßte jetzt nicht wie mir die Seite weiterhelfen kann Bugs zu identifizieren.
Ih kann mir ja nur Webseiten unter verschiedenen Browsern anschauen.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück