✔ Transparenzproblem Firefox

Status
Nicht offen für weitere Antworten.
R

RaRu

Mitglied
Hoi. Habe ein Problem was ich nicht so ganz logisch finde:

Die Struktur soll wie folgt sein:
<div class="top">
-> <div class="animation"></div>
-> <div class="nav"></div>
</div>

<div class="content">
-> <div class="content_left">
-> <div class="content_right">
</div>

Firefox: In der top div geht das auch glatt. In der content div leider nicht, weil da kein hintergrundbild von content mehr angezeigt wird, sondern nurnoch das hintergrundbild von body.
IE: hier geht alles gut.

Code:
Code: 
body{
    background: url(../img/bg.png);
    background-repeat: repeat-x;
    background-color: #CFCFCF;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-top:0 !important;
    margin-top:-3px; /* fixt den "3px-Gap-Bug" im IE */
}

h1 {font-size: 14px; font-weight: bold; }
h2 {font-size: 12px; font-weight: bold; color: #9E1527;}

div.container{
    width: 927px;
    margin: auto;
    margin-top:0px !important;
    margin-top:-3px; /* fixt den "3px-Gap-Bug" im IE */
}

div.top{
    width: 927px;
    height: 193px;
    background: url(../img/bg_top.png);
    background-repeat: no-repeat;
    margin-top:0px !important;
    margin-top:-3px; /* fixt den "3px-Gap-Bug" im IE */
}

        div.animation{
            width: 927px;
            height: 168px;
        }

        div.nav{
            height: 16px; /* eigentlich 20 */
            margin: 0;
            text-align: center;
            word-spacing: 15px;
            font-size: 12px;
            padding: 2px;
        }

div.content{
    width: 927px;
    background: url(../img/bg_content.png);
    background-repeat: repeat-y;
    margin-top:0px !important;
    margin-top:-3px; /* fixt den "3px-Gap-Bug" im IE */
}

        div.content_left{
            width: 599px;
            float: left;
            background-color: transparent;
            filter:alpha(opacity=50); /* IE */
            -moz-opacity:0.5; /* Gecko-Browser */
            opacity:0.5; /* Opera 9+ */
        }

        div.content_right{
            width: 326px;
            float: left;
            background-color: transparent;
            filter:alpha(opacity=50); /* IE */
            -moz-opacity:0.5; /* Gecko-Browser */
            opacity:0.5; /* Opera 9+ */
        }

Code: 
<body>

    <div class="container">

    <div class="top">
      <div class="animation">
      </div>
      <div class="nav">
       ...
      </div>
    </div>

    <div class="content">
      <div class="content_left">
        <h1>Willkommen</h1>
        Text...
      </div>
      <div class="content_right">
        <h1>Links</h1><br>
        Links...
      </div>
    </div>

    <div class="bottom">
      ...
    </div>

  </div>
  
</body>

kann mir jemand weiterhelfen? ich vermute das das background-color: transparent hier nichts bringt.
 
Hi,

hast du mal einen Link zu der Seite, damit man sich das "Transparenzproblem" direkt anschauen kann, denn ohne die eingebundenen Grafiken (Hintergrundbilder) wäre davon mit deinem geposteten Quellcode in der lokalen "Testseite" wenig bis gar nichts zu erkennen.
 
Zur Erläuterung: Wenn du im DIV .content die Floatumgebung aufhebst, wird in den standardkonformen Browsern (Firefox, Netscape, Opera, Safari, usw.) sein Hintergrundbild angezeigt, respektive in der kompletten Boxenhöhe wiederholt.

Hierzu nimmst du die im Artikel erwähnten CSS-Regeln im Stylesheet auf, und rufst zusätzlich im class-Attribut die Klasse .clearfix auf:

Code: 
<div class="content clearfix"> ... </div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück