Ergebnis 1 bis 5 von 5

Thema: Cross-Browser Probleme mit DIV

  1. #1
    HTML Newbie
    Registriert seit
    27.11.2010
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Cross-Browser Probleme mit DIV

    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: www.localmusic.de/scs

    Und hier noch die verwendeten Styles:
    HTML-Code:
       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;
       }
    Vielleicht hat ja jemand eine Idee!? Würde mich freuen.

    Viele Grüße
    Tarcon
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Cross-Browser Probleme mit DIV

    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    27.11.2010
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Cross-Browser Probleme mit DIV

    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.

  4. #4
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Cross-Browser Probleme mit DIV

    Zitat Zitat von Tarcon Beitrag anzeigen
    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.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    27.11.2010
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Cross-Browser Probleme mit DIV

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

Ähnliche Themen

  1. Probleme bei der Darstellung im Browser
    Von Coco-Darstellung... im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 08.03.2009, 00:10
  2. Probleme Browser Hijacker
    Von Michael37 im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 17.01.2009, 00:25
  3. iframe + Browser Probleme
    Von dVs im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.06.2007, 19:42
  4. Browser Probleme mit Sound und Mouseover
    Von Highlander im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.08.2005, 00:59
  5. Brauche Hilfe bei manuellem "Cross sellng"
    Von Jonas_HH im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 07.07.2004, 23:21

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •