Lightbox und IE7 @ tutorials.de: Tutorials, Forum & Hilfe

Teufelskerl1977 · 29.08.07 17:56

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.

Maik · 29.08.07 18:00

Hi,

hast du es schon mit der seperaten "lightbox.css"-Datei versucht?

Teufelskerl1977 · 29.08.07 18:05

Ja, hatte ich. Da hats geklappt. Allerdings hatte ich da eine blanke HTML Seite, ich brauche ja aber meine CSS Datei....

Siehe hier: KLICK

Maik · 29.08.07 18:13

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.

Teufelskerl1977 · 29.08.07 18:30

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...

Maik · 29.08.07 18:37

Selbstverständlich gibt es hierfür eine Lösung:

Code :

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

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=ht...Inline&group=0

Teufelskerl1977 · 29.08.07 18:56

Also:
In meiner CSS Datei soll ich die Breite für den Body auskommentieren.

/*width: 769px;*/ /* auskommentiert = deaktiviert */

Dann soll ich in der CSS Datei den Wrap erstellen. Ist das egal wo?

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

In meiner HTML soll ich dann den neuen DIV einfügen

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"> </td>
<td colspan="3" align="left" valign="top"> </td>
</tr>
</table>
<p><b><br>
 </b></p></div>

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

<div id="foot"></div>
</body>

Maik · 29.08.07 19:01

Die width-Deklaration für das body-Element kannst du auskommentieren oder komplett entfernen, kommt beides aufs gleiche raus.
Den Selektor #wrap nimmst du in der "styleLB.css" mit auf, wo du auch die übrigen Layout-DIVs notiert hast.
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.
Fertig.

Teufelskerl1977 · 29.08.07 19:22

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*

Maik · 29.08.07 19:43

Du hast doch gesehen, wie der IE die Breitenangabe für das body-Element interpretiert, und was dabei herauskommt.

Teufelskerl1977 · 21.06.08 15:12

Bin wieder am rumfummeln und habe wieder ein lightbox Problem.

Hier der Link zur Seite: Link

Die Lightbox Funktion wird im Firefox 2 nicht richtig ausgeführt..beim IE7+IE6 passt das.

Im FF2 passt da garnix zusammen, aber das seht ihr ja...der Link zur Funktion liegt in der Überschrift des Contents

Bin mal wieder für jede Hilfe dankbar

Maik · 21.06.08 15:52

Hi,

wenn ich den CSS-Code der Lightbox aus dem Stylesheet main.css in ein seperates Stylesheet lightbox.css übertrage, gibt's bei mir im Firefox keine derartigen Probleme:

Code :

1 2	<link rel="stylesheet" href="css/main.css" type="text/css" /> <link rel="stylesheet" href="css/lightbox.css" type="text/css" />

mfg Maik

Teufelskerl1977 · 21.06.08 16:06

Hi Maik,

wollte es gerade machen wie Du gesagt hast, dabei ist mir der Fehler aufgefallen. Im main.css stand direkt vor dem light box Code eine doppelte }. Habs entfernet nun gehts. Der FF reagiert da wohl codesensibeler (oder engstirniger) als der IE...

Danke für die Hilfe

Maik · 21.06.08 16:16

Kurz nach dem Posten meiner Erkenntnis bin ich auch stutzig geworden, ob da in der main.css etwas nicht in Ordnung ist, und siehe da ..., der Grund entblößte sich als doppelt notierte }-Klammer.

Bevor ich dir das mitteilen konnte, warst du schon schneller am Zug

Und was hat es mit den losen *-Zeichen im ersten und letzten Regelblock auf sich?

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Lightbox V2

Lightbox

Lightbox als CMS Hilfe

Lightbox & Slideshow

Lightbox Gallerie

E-Mail:

Abonnieren Abbestellen