✔ Darstellungsproblem im IE

Biergamasda · 22. April 2006

Hi Leute, es ist echt dringend, da ich mit dem Kram bis spätestend Dienstag fertig sein muss, ich stell morgen auch mal das ganze online, schaffs heute leider nicht mehr.

also, folgender Code

HTML:

<p class="vorsch_h" id="filmvorschaudatum">22.04.2006</p> 
<p class="vorsch_prev" onclick="changeDate('prev',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">zurück</p> 
<p class="vorsch_next" onclick="changeDate('next',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">vorwärts</p> 
<p class="clear"></p>
<div id="filmcontainer">
    <div class="filmcontainer">
        <div class="zeitspalte">10:15</div>
        <div class="infospalte">
            <div class="filmbild"><img src="./filmbilder/ich.jpg"></div>
            <div class="filmtitel">Underworld</div>
            <div class="filmprod">USA 2006</div>
            <div class="filmdauer">Dauer: 80 min</div>
            <div class="filmregie">Regie: Beckingsale</div>
            <div class="beschreibung">Krieg zwischen Werw?lfen und Vampieren</div>
        </div>
    </div>
    <div class="filmcontainer">
        <div class="zeitspalte">15:10</div>
        <div class="infospalte">
            <div class="filmbild"><img src="./filmbilder/pic.jpg"></div>
            <div class="filmtitel">Filmy</div>
            <div class="filmprod">Aut 1999</div>
            <div class="filmdauer">Dauer: 80 min</div>
            <div class="filmregie">Regie: Sitter</div>
            <div class="beschreibung">Das ist ein Film</div>
        </div>
    </div>
</div>
<div class="clear"></div>
<p class="vorsch_prev" onclick="document.body.appendChild(document.createTextNode(document.getElementById('Inhalt').innerHTML));changeDate('prev',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">zurück</p>
<p class="vorsch_next" onclick="changeDate('next',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">vorwärts</p><p class="clear"></p>

wird mit folgendem CSS

CSS:

.clear
{
    visibility: hidden;
    clear: both;
}
p.vorsch_next
{
    float:right;
    margin: 0 150px 0 0;
    text-align: right;
    vertical-align: bottom;
}
p.vorsch_prev
{
     float:left;
     margin: 0 0 0 150px;
     text-align: left;
     vertical-align: bottom;
}
p.vorsch_h
{
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
}
div#filmcontainer
{
    margin: 0;
    padding: 0;
}
div.filmcontainer
{
    width: 450px;
    margin: 20px auto 20px auto;
    overflow: hidden;
    border: 1px solid black;
    padding: 0;
}
div.zeitspalte
{
    float: left;
    width: 80px;
    font-weight: bold;
}
div.infospalte
{
    width: 370px;
    margin-left: 83px;
    border-left: 1px solid black;
    padding: 0;
}
div.filmbild
{
    float: right;
    width: 100px;
    height: 100px;
    margin-right: 2px;
    overflow: hidden;
}
div.filmtitel
{
    margin-right: 102px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: bold;
    border-bottom: 1px solid black;
}
div.filmprod
{
    text-align: left;
    margin-left: 10px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    float: left;
    width: 115px;
}
div.filmdauer
{
    margin-left: 175px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    width: 90px;
    text-align: left;
}
div.filmregie
{
    margin-right: 102px;
    padding-left: 10px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    text-align: left;
    border-top: 1px solid black;
}
div.beschreibung
{
    clear: both;
    padding: 5px 10px;
    text-align: left;
    border-top: 1px solid black;
}

formatiert.

Im Firefox passt alles, nur im IE lässt sich das ganze nicht sehen, ich dachte dabei, dass es sich um den bekannten 3px bug handelt, doch irgendwie hats mit der Sternchenkorrektur auch nicht hingehaun, hoffe mir kann da jemand helfen

lg Masda

Maik · 22. April 2006

Meine Tipps, um die Darstellungsprobleme im IE zu beheben:

Die Rahmenstärke von der rechten Spaltenbreite (370 Pixel) abziehen, Stichwort: Boxmodell, und die Spalte mit float:right rechtsbündig ausrichten.

Code:

div.infospalte
{
    width: 369px;
    float:right;
    border-left: 1px solid black;
    padding: 0;
}

Die horizontalen margin-Angaben für den IE halbieren, da er sie bei fliessenden bzw. umflossenen Elementen verdoppelt.

Code:

div.filmbild
{
    float: right;
    width: 100px;
    height: 100px;
    margin-right: 2px;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
}
* html div.filmbild { /* Für IE */
margin-right: 1px;
}

div.filmprod
{
    text-align: left;
    margin-left: 10px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    float: left;
    width: 115px;
}
* html div.filmprod { /* Für IE */
margin-left: 5px;
}

Da die Box .filmprod im IE um 5px nach links verschoben wird, verringert sich auch der linke Außenabstand für das nachfolgende DIV .filmdauer um 5px.

Code:

div.filmdauer
{
    margin-left: 175px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    width: 90px;
    text-align: left;
}
* html div.filmdauer { /* Für IE */
margin-left: 170px;
}

Biergamasda · 23. April 2006

so, jetz hab ichs mal hochgeladen auch...
http://biergamasta.bi.ohost.de/schule/home.htm
auf Vorschau und ein paar Tage zurückblättern - am 10.4. sind 2 Filme drin, hab noch nicht mehr in der DB

Hab mir zu Herzen genommen was du gesagt hast und es auch gleich mal ausprobiert. Als ich mit den Änderungen fertig war, und mal den IE gestartet habe, war das Ergebnis zwar um Welten besser als zuvor, jedoch noch lange nicht so wie ich es mir erhofft habe.

Weiters habe ich auf einmal im Firefox bei dem Rahmen über "Regie" auf der linken Seite einen Abstand von ein paar Pixel, welchen ich auch nicht wegbekomme, da ich weder padding im umschließenden Div, noch margin im aktuellen habe.

Im IE wird die Zeile mit Regie - so wie ich das vermute - unter das Bild geschoben, da sie, denke ich mal, zu breit ist. Dieses Problem konnte ich durch eine geringere Breite für den IE jedoch auch nicht ausmerzen.

Als Quelltext kann der zuvor gepostete als Beispiel angesehen werden, da die Inhalte dynamisch in die Seite kommen läuft das über die Quelltextanzeige des Browsers nicht.

Schonmal im Voraus danke für eure Hilfe

lg

Maik · 23. April 2006

Vielleicht solltest du einfach mal die Schriftgröße kleiner formatieren, denn meine gestrigen Tipps funktionieren bei mir einwandfrei und ergeben eine einheitliche Darstellung in den Browsern.

Maik · 23. April 2006

Nachtrag: erweitere den CSS-Code noch mit folgenden Star-HTML-Hacks für den IE:

Code:

p.vorsch_next
{
    float:right;
    margin: 0 150px 0 0;
    text-align: right;
    vertical-align: bottom;
}
* html p.vorsch_next { /* Für IE */
margin: 0 75px 0 0;
}
p.vorsch_prev
{
     float:left;
     margin: 0 0 0 150px;
     text-align: left;
     vertical-align: bottom;
}
* html p.vorsch_prev { /* Für IE */
margin: 0 0 0 75px;
}

Und hier der komplette Quelltext der Testseite:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
* {
font-size: 11px;
}

.clear
{
    visibility: hidden;
    clear: both;
}

p.vorsch_next
{
    float:right;
    margin: 0 150px 0 0;
    text-align: right;
    vertical-align: bottom;
}
* html p.vorsch_next {
margin: 0 75px 0 0;
}

p.vorsch_prev
{
     float:left;
     margin: 0 0 0 150px;
     text-align: left;
     vertical-align: bottom;
}
* html p.vorsch_prev {
margin: 0 0 0 75px;
}

p.vorsch_h
{
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
}

div#filmcontainer
{
    margin: 0;
    padding: 0;
}
div.filmcontainer
{
    width: 450px;
    margin: 20px auto 20px auto;
    overflow: hidden;
    border: 1px solid black;
    padding: 0;
}

div.zeitspalte
{
    float: left;
    width: 80px;
    font-weight: bold;
}
div.infospalte
{
    width: 369px;
    float:right;
    border-left: 1px solid black;
    padding: 0;
}
div.filmbild
{
    float: right;
    width: 100px;
    height: 100px;
    margin-right: 2px;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
}
* html div.filmbild { /* Für IE */
margin-right: 1px;
}

div.filmtitel
{
    margin-right: 102px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    text-decoration: underline;
    font-weight: bold;
    border-bottom: 1px solid black;
}
div.filmprod
{
    text-align: left;
    margin-left: 10px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    float: left;
    width: 115px;
}
* html div.filmprod { /* Für IE */
margin-left: 5px;
}

div.filmdauer
{
    margin-left: 175px;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    width: 90px;
    text-align: left;
}

* html div.filmdauer {
margin-left: 170px;
}

div.filmregie
{
    margin-right: 102px;
    padding-left: 10px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    text-align: left;
    border-top: 1px solid black;
}
div.beschreibung
{
    clear: both;
    padding: 5px 10px;
    text-align: left;
    border-top: 1px solid black;
}
-->
</style>

</head>
<body>

<p class="vorsch_h" id="filmvorschaudatum">22.04.2006</p>
<p class="vorsch_prev" onclick="changeDate('prev',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">zur&uuml;ck</p>
<p class="vorsch_next" onclick="changeDate('next',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">vorw&auml;rts</p>
<p class="clear"></p>

<div id="filmcontainer">
    <div class="filmcontainer">
        <div class="zeitspalte">10:15</div>
        <div class="infospalte">
            <div class="filmbild"><img src="./filmbilder/wieimhimmel.jpg"></div>
            <div class="filmtitel">Underworld</div>
            <div class="filmprod">USA 2006</div>
            <div class="filmdauer">Dauer: 80 min</div>
            <div class="filmregie">Regie: Beckingsale</div>
            <div class="beschreibung">Krieg zwischen Werw?lfen und Vampieren</div>
        </div>
    </div>

    <div class="filmcontainer">
        <div class="zeitspalte">15:10</div>
        <div class="infospalte">
            <div class="filmbild"><img src="./filmbilder/pic.jpg"></div>
            <div class="filmtitel">Filmy</div>
            <div class="filmprod">Aut 1999</div>
            <div class="filmdauer">Dauer: 80 min</div>
            <div class="filmregie">Regie: Sitter</div>
            <div class="beschreibung">Das ist ein Film</div>
        </div>
    </div>
</div>
<div class="clear"></div>

<p class="vorsch_prev" onclick="document.body.appendChild(document.createTextNode(document.getElementById('Inhalt').innerHTML));changeDate('prev',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">zur&uuml;ck</p>
<p class="vorsch_next" onclick="changeDate('next',document.getElementById('filmvorschaudatum').firstChild.nodeValue)">vorw&auml;rts</p>
<p class="clear"></p>

</body>
</html>

Biergamasda · 23. April 2006

Hab jetzt rausgefunden wieso's nicht gegangen ist.
Nochmal danke für die Tipps

lg

Maik · 23. April 2006

Könntest du dann bitte auch sagen, woran es (noch) gelegen hat?

Biergamasda · 23. April 2006

klar, kein Problem

- das mit den <p>'s hab ich schon gemacht, nur noch nicht in der Form hochgeladen.

Also, das 1. war, dass das Bild selber einen Rand hatte und somit die Zeilen im IE etwas zur Seite drückte, dadurch der Hohlraum.

Korrigiert durch:
beim Bild

CSS:

* html div.bild
{
    margin-left: -3px;
}

bei den Zeilen selbst

CSS:

* html div.zeile
{
    margin-right: -3px;
}

Auf der anderen Seite war exakt das selbe Problem, welches ich mit demselben Verfahren behoben habe.

Außerdem habe ich die margin Angaben durch padding ersetzt, da ansonsten der Rahmen zu weit nach "innen" gedrückt wurde, und daher nie bündig mit dem umgebenden div sein konnte.

Hoffe das ist Erläuterung genug

lg

//edit
ach ja, die Screenshots hast zu ner schlechten Zeit erwischt

da waren die eigentlichen Probleme großteils schon weg...

✔ Darstellungsproblem im IE

Biergamasda

Erfahrenes Mitglied

Maik

Biergamasda

Erfahrenes Mitglied

Maik

Maik

Biergamasda

Erfahrenes Mitglied

Maik

Biergamasda

Erfahrenes Mitglied

Neue Beiträge