Cross-Browser Probleme mit DIV

Tarcon

Hallo Foris,

ich baue gerade an einer Seite, die mich momentan in den Wahnsinn treibt. Der derzeitige Stand funktioniert korrekt im IE, Chrome, Safari und Opera. Allerdings zickt der Firefox herum und ich finde nicht heraus, warum es so ist.

Ich habe innerhalb eines TDs ein DIV platziert, welches eigentlich nur die Höhe des TDs annehmen und alles darüber hinaus - mittels scrolling: auto; - scrollen soll.

Ich habe es alternativ auch schon mit absolut platzierten Divs probiert, da allerdings zickt dann der IE herum, denn das Problem ist, dass ich ein Design gewählt habe, welches sich immer der Browsergröße anpassen soll und rundum immer ein Margin hat.

Die Seite findet Ihr unter: http://www.localmusic.de/scs

Und hier noch die verwendeten Styles:

HTML

body {
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    background-image: url(../_img/background_image.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center center;
   }
   #background_paper {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow:visible;
    z-index:2;
    filter:alpha(opacity=85);
    -moz-opacity:0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
   }
   #content_canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow:auto;
    z-index:6;
   }
   #main_menu_3d {
    position: absolute;
    top: 27px;
    left: 19px;
    margin: 0px;
    padding: 0px;
    width: 10px;
    height: 9px;
    overflow:hidden;
    z-index:6;
    filter:alpha(opacity=80);
    -moz-opacity:0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;
   }
   #main_menu_canvas {
    position: absolute;
    top: 36px;
    left: 16px;
    margin: 0px;
    padding: 0px;
    width: auto;
    height: 33px;
    overflow:hidden;
    z-index:100;
    filter:alpha(opacity=80);
    -moz-opacity:0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;
   }
   .naviitem {
    font-family: Arial;
    font-size: 13px;
    color: #ffffff;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url(../_img/button_bg.png);
    cursor: auto;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;
   }
   .naviitemhl {
    font-family: Arial;
    font-size: 13px;
    color: #ccae56;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url(../_img/button_bg_hl.png);
    cursor: pointer;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;
   }
   .homebutton {
    width: 33px;
    height: 33px;
    background-image: url(../_img/home.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_img/home.png', sizingMethod='scale');
    cursor: auto;
   }
   .homebuttonhl {
    width: 33px;
    height: 33px;
    background-image: url(../_img/home_hl.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_img/home_hl.png', sizingMethod='scale');
    cursor: pointer;
   }
   #scslogo {
    position: absolute;
    bottom: 46px;
    right: 40px;
    width: 190px;
    height: 104px;
    z-index: 5;
   }


   .subnaviitem {
    font-family: Arial;
    font-size: 13px;
    color: #ffffff;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url(../_img/tbutton_bg.png);
    cursor: auto;
   }
   .subnaviitemhl {
    font-family: Arial;
    font-size: 13px;
    color: #ccae56;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url(../_img/tbutton_bg_hl.png);
    cursor: pointer;
   }
 
   #firstsubnavi {
    position: absolute;
    left: 49px;
    top: 69px;
    width: auto;
    height: auto;
    visibility: hidden;
    z-index: 90;
   }
   #secondsubnavi {
    position: absolute;
    left: 156px;
    top: 69px;
    width: auto;
    height: auto;
    visibility: hidden;
    z-index: 90;
   }
   #thirdsubnavi {
    position: absolute;
    left: 234px;
    top: 69px;
    width: auto;
    height: auto;
    visibility: hidden;
    z-index: 90;
   }
   #fourthsubnavi {
    position: absolute;
    left: 302px;
    top: 69px;
    width: auto;
    height: auto;
    visibility: hidden;
    z-index: 90;
   }
   #fifthsubnavi {
    position: absolute;
    left: 396px;
    top: 69px;
    width: auto;
    height: auto;
    visibility: hidden;
    z-index: 90;
   }
   #sixthsubnavi {
    position: absolute;
    left: 475px;
    top: 69px;
    width: auto;
    height: auto;
    visibility: hidden;
    z-index: 90;
   }
   a.tickerlink:link {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    color: #003d7d;
    text-decoration: none;
   }
   a.tickerlink:visited {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    color: #003d7d;
    text-decoration: none;
   }
   a.tickerlink:focus {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    color: #003d7d;
    text-decoration: none;
   }
   a.tickerlink:hover {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    color: #003d7d;
    text-decoration: underline;
   }
   a.tickerlink:active {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    color: #003d7d;
    text-decoration: none;
   }
   .hidepics {
     width:0px;
     height:0px;
     display:none;
   }
   .transpic {
    filter:alpha(opacity=80);
    -moz-opacity:0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;
   }
   .commentpic_left {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 15px;
    margin-bottom: 5px;
    padding: 0px;
    font-family: Arial;
    font-size: 10px;
    font-style: italic;
    color: #000;
    line-height:12px;
    align: center;
   }
   .commentpic_right {
    margin-top: 0px;
    margin-left: 15px;
    margin-right: 0px;
    margin-bottom: 5px;
    padding: 0px;
    font-family: Arial;
    font-size: 10px;
    font-style: italic;
    color: #000;
    line-height:12px;
    align: center;
   }
   .standardtext {
    font-family: Arial;
    font-size: 12px;
    color: #000;
   }

Alles anzeigen

Vielleicht hat ja jemand eine Idee!? Würde mich freuen.

Viele Grüße
Tarcon

sejuma

Gib der Seite einen standardkonformen Doctype und dann zeigt sie vermutlich auch der IE richtig falsch an.
Wozu die Tabellenkonstruktion gut ist, erschließt sich mir nicht.

Tarcon

Mit dem Doctype magst Du wohl Recht haben. Allerdings ist die Angabe des Selben immer wieder Träger der vielfältigsten Probleme, weshalb ich ihn grundsätzlich weg lasse.

Das Tabellenkonstrukt im Hintergrund baut das Papier für den Hintergrund zusammen. Das Konstrukt davor habe ich nur gebaut, weil es mit einer DIV-Lösung bisher noch nicht geklappt hat. Gebe ich z. B. für ein Content-Div top-, right-, bottom- und left-margin an, dann funktioniert es im Internet Explorer nicht mehr. Das Div wird entweder nicht komplett aufgezogen, oder - wenn width und height auf 100% stehen - wird der Content einfach komplett nach unten aufgezogen. Er hält sich dann überhaupt nicht an irgendwelche Margins. Wenn ich dem Div irgendwie beibringen könnte, dort zu stehen, wo ich es möchte und die Größe auch bei mehr Content beizubehalten und eben zu scrollen, dann würde ich gerne auf das Tabellenkonstrukt verzichten. Da beides nicht klappt, bin ich eben auch mit meinem Latein gerade am Ende. Und mit dem doppelten "Margin-Bug" des IE hat das ja nun wohl auch weniger zu tun. Entscheidend ist halt wirklich die Größenanpassung.

koslowski

Zitat von Tarcon

Mit dem Doctype magst Du wohl Recht haben. Allerdings ist die Angabe des Selben immer wieder Träger der vielfältigsten Probleme, weshalb ich ihn grundsätzlich weg lasse.

Das liegt daran weil dein Code vorsichtig ausgedrückt unglaublicher Schrott ist.
Ohne Doctype rendern die Browser im Quirksmodus, da ist die Darstellung von Browser zu Browser reine Glückssache.

Tu dir selber einen Gefallen arbeite Little Boxes durch, dann klappts auch mit dem Code.

Tarcon

Okay, auch wenn nich "Schrott" für übertrieben halte... An Darstellungszufälle kann ich in diesem Zusammenhang durchaus glauben und werde Little Boxes durcharbeiten.

Cross-Browser Probleme mit DIV

Tags

Benutzer online in diesem Thema