✔ Lightbox und IE7

Status
Nicht offen für weitere Antworten.
T

Teufelskerl1977

Mitglied
Hallo,

hoffe das ich in dieser Rubrik richtig bin. Wusste nicht ob ich in css der JS schreiben soll.

Habe auf dieser Seite: KLICK die Lightbox von HIER eingesetzt. Dazu habe ich den CSS Code vom lightbox in eine Kopie meines originalen CSS Codes angefügt. Auf diese neue CSS Datei greift nur diese ein HTML Seite zu.

IM FF2 klappt das auch ohne Probleme.

Wenn ich die Seite nun aber im IE7 anschaue, dann öffnet sich der halb transparente Hintergrund nur auf 2/3 der Fensterbreite von links beginend. Das letzte Drittel rechts ist ganz normal zu sehen.

Weiß jemand von euch dazu rat? Konnte einfach noch keine Lösung finden.
 
Es liegt wohl eher an der width:769px-Deklaration für das body-Element, dass der IE die Lightbox nicht über die komplette Fensterbreite aufzieht.
 
und was mache ich jetzt? Gibts dafür eine Lösung? Kann doch nicht wahr sein :-(

Hatte erst die Thickbox, da hat der mir nach dem Schließen alles linksbündig gesetzt...
 
Selbstverständlich gibt es hierfür eine Lösung:

Code: 
body {
        margin: auto;
        padding: auto;
        text-align: left;
        color:#FFFFFF;
        /*width: 769px;*/ /* auskommentiert = deaktiviert */
        background: #333333;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
}

#wrap {
width:769px;
margin:0 auto;
}

Code: 
<body>
    <div id="wrap">
        <!-- Hier folgt der Bestand -->
    </div>
</body>
Zudem solltest du noch das HTML-Dokument validieren -> http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
 
Also:
In meiner CSS Datei soll ich die Breite für den Body auskommentieren.
/*width: 769px;*/ /* auskommentiert = deaktiviert */
Zum Vergrößern anklicken....

Dann soll ich in der CSS Datei den Wrap erstellen. Ist das egal wo?
#wrap {
width:769px;
margin:0 auto;
}
Zum Vergrößern anklicken....

In meiner HTML soll ich dann den neuen DIV einfügen
<div id="wrap">
Zum Vergrößern anklicken....

Ist das soweit richtig?

Wo genau soll ich denn den #wrap hinpacken. Momentan isses so:
<body>

<div id="head">
<h1></h1>
</div>

<div id="nav">
<ul>
<li><a href="index.html" title=""><span>START</span>Seite</a></li>
<li><a href="interaktiv.htm" title=""><span>ÜBER</span> UNS</a></li>
<li><a href="news.htm" title=""><span>Letzte</span> News</a></li>
<li><a href="leistung.htm" title=""><span>Leis</span>tung</a></li>
<li><a href="gaestebuch.htm" title=""><span>Gäste</span>buch</a></li>
<li><a href="kontakt.htm" title=""><span>Kon</span>takt</a></li>
<li><a href="impressum.htm" title=""><span>impres</span>sum</a></li>
</ul>
</div>

<div id="main">


<p>
<img border=0 src="images/web/button-leistung-ref-print.jpg" width="736" height="37"></p>
<table border="0" width="700" id="table1" cellpadding="5">
<tr>
<td width="184" rowspan="2" align="center" bgcolor="#222222"><img src="images/web/leistungen-print-ref-iam.jpg" alt="Logo INTERAKT!V" width="160" height="42" longdesc="Logo" /></td>
<td height="36" colspan="3" align="left" valign="top" bgcolor="#222222"><div align="center"><strong>Gestaltung der INTERAKT!V Druckunterlagen </strong></div></td>
</tr>
<tr>
<td height="50" align="center" valign="top" bgcolor="#222222"><div align="center">
<a href="images/web/leistungen-print-ref-iam-logo.jpg" rel="lightbox" title="Logo von INTERAKT!V Design_Kommunikation">Logo-Design</a><br /></td>
<td align="center" valign="top" bgcolor="#222222"><div align="center"><a href="images/web/leistungen-print-ref-iam-vc.jpg" rel="lightbox" title="Business-Card von INTERAKT!V Design_Kommunikation">BusinessCard-Design</a><br /></td>
<td align="center" valign="top" bgcolor="#222222"><div align="center"><a href="images/web/leistungen-print-ref-iam-bb.jpg" rel="lightbox" title="Briefbogen von INTERAKT!V Design_Kommunikation">Logo-Design</a><br /></td>
</tr>
<tr>
<td width="184" align="center">&nbsp;</td>
<td colspan="3" align="left" valign="top">&nbsp;</td>
</tr>
</table>
<p><b><br>
&nbsp;</b></p></div>

<font color="#FFFFFF" size="4">

<div id="foot"></div>
</body>
Zum Vergrößern anklicken....
 
  1. Die width-Deklaration für das body-Element kannst du auskommentieren oder komplett entfernen, kommt beides aufs gleiche raus.

  2. Den Selektor #wrap nimmst du in der "styleLB.css" mit auf, wo du auch die übrigen Layout-DIVs notiert hast.

  3. Und wie ich es eben schon gezeigt habe, packst du das bestehende Layout, also alles was sich zwischen <body> ... </body> befindet, in das DIV #wrap.

  4. Fertig.
 
Saucool!
Danke tausendmal. Es funktioniert *freu*

Aber jetzt erkläre mir doch mal, warum ich die Bodybreite im CSS auskommentieren muss und warum ich nen extra DIV in dieser Breite anlegen muss?

Ich will ja auch noch was lernen...*g*
 
Zuletzt bearbeitet:
Du hast doch gesehen, wie der IE die Breitenangabe für das body-Element interpretiert, und was dabei herauskommt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück