Lightbox
0 
Felix Riesterer
2 
alfie
0 0 Felix Riesterer
0 0 alfie
Lightbox
Hallo, ich habe mir eine seite mit dem "Lightbox" Feature gebastelt, funktioniert sehr gut bei firefox, leider zeigt der ie auf der rechten seite einen grauen streifen, der von der overlay-grafik nicht mit ausgeblendet wird . . . vielleicht weiss ja jemand warum . .
hier sind die daten: www.ib-strassburger.de/lightbox
Danke . .
-
Liebe Klara,
Du verwendest einen 4.01 transitional Doctype, der den IE im Quirksmode laufen lässt. Das könnte eine Ursache sein.
Du hast kein CSS eingesetzt, um diverse Voreinstellungen wie Rand und Innenabstand des Browsers zu korrigieren... Das könnte eine weitere Ursache sein.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Klara & Felix!
Du verwendest einen 4.01 transitional Doctype, der den IE im Quirksmode laufen lässt. Das könnte eine Ursache sein.
Nein, das ist für Lightbox egal (gerade bei einer meiner Seiten getestet).
Du hast kein CSS eingesetzt, um diverse Voreinstellungen wie Rand und Innenabstand des Browsers zu korrigieren... Das könnte eine weitere Ursache sein.
Ja, das ist es.
Siehe dazu unter Troubleshooting.
Zitat:
The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add
body { margin: 0; padding: 0; }to your stylesheet.da du (noch) kein Stylesheet verwendest, in deiner bilder.htm also statt
alt:
<body bgcolor="#999999" link="#666666" vlink="#666666" alink="#666666">
neu:
<body [code lang=CSS] style="margin: 0; padding: 0;">[/code]Das ist sicher gleich ein guter Einstieg, dich mit CSS zu beschäftigen ;-)
mfg Alfie
-
Hallo Klara & Felix!
Du verwendest einen 4.01 transitional Doctype, der den IE im Quirksmode laufen lässt. Das könnte eine Ursache sein.
Nein, das ist für Lightbox egal (gerade bei einer meiner Seiten getestet).
Du hast kein CSS eingesetzt, um diverse Voreinstellungen wie Rand und Innenabstand des Browsers zu korrigieren... Das könnte eine weitere Ursache sein.
Ja, das ist es.
Siehe dazu unter Troubleshooting.
Zitat:
The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add
body { margin: 0; padding: 0; }to your stylesheet.da du (noch) kein Stylesheet verwendest, in deiner bilder.htm also statt
alt:
<body bgcolor="#999999" link="#666666" vlink="#666666" alink="#666666">
neu:
<body [code lang=CSS] style="margin: 0; padding: 0;">[/code]Das ist sicher gleich ein guter Einstieg, dich mit CSS zu beschäftigen ;-)
mfg Alfie
Hallo Alfie und Felix,
danke für die Tipps . . leider muss ich noch mal dumm nachfragen . . ich habe doch eine css-datei! die lightbox.css. Darin habe ich jetzt margin: 0 und padding: 0 eingesetzt, wie auf der verlinkten lightbox -seite empfohlen. Trotzdem habe ich immer noch einen Rand, der nicht abgedunkelt wird, er ist zwar jetzt kleiner geworden, aber immer noch da . . .-
Liebe Klara,
ich habe doch eine css-datei! die lightbox.css.
wir reden von http://www.ib-strassburger.de/lightbox/bilder.htm? Dort gibt es tatsächlich ein Stylesheet in einer Datei namens lightbox.css...
Darin habe ich jetzt margin: 0 und padding: 0 eingesetzt, wie auf der verlinkten lightbox -seite empfohlen.
Ich zitiere hier einmal den kompletten Inhalt von lightbox.css und Du zeigst mir, wo genau Du das mit dem margin und padding gemacht hast, ok?
#lightbox{ background-color:#eee; padding: 5px; } #lightboxDetails{ font-size: 0.8em; font: 10px Verdana, Helvetica, sans-serif; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #closeButton{ top: 5px; right: 5px; } #lightbox img{ border: none; clear: both;} #overlay img{ border: none; } #overlay{ background-image: url(images/overlay.png); } * html #overlay{ background-color: #000; back\ground-color: transparent; background-image: url(images/blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale"); }Bitte hilf einem blinden Huhn wie mir, die entsprechende Zeile zu finden; ich sehe sie einfach nicht!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Liebe Klara,
ich habe doch eine css-datei! die lightbox.css.
wir reden von http://www.ib-strassburger.de/lightbox/bilder.htm? Dort gibt es tatsächlich ein Stylesheet in einer Datei namens lightbox.css...
Darin habe ich jetzt margin: 0 und padding: 0 eingesetzt, wie auf der verlinkten lightbox -seite empfohlen.
Ich zitiere hier einmal den kompletten Inhalt von lightbox.css und Du zeigst mir, wo genau Du das mit dem margin und padding gemacht hast, ok?
#lightbox{
background-color:#eee;
padding: 5px;}
#lightboxDetails{
font-size: 0.8em;
font: 10px Verdana, Helvetica, sans-serif;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }#overlay{ background-image: url(images/overlay.png); }
- html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");
}
> > Bitte hilf einem blinden Huhn wie mir, die entsprechende Zeile zu finden; ich sehe sie einfach nicht! > > Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/), > > Felix Riesterer. Lieber Felix, hab ich doch grade erst gemacht und noch nicht hochgeladen, weil ich von zu hause aus nicht auf die büroadresse zugreifen kann :-) sorry, hätte ich vielleicht schreiben sollen. Aber offline ist es so wie vorhin geschildert . . .-
Hallo Klara,
du musst (wie in meinem 1. Posting bereits beschrieben) margin und padding des body-Elements der bilder.htm auf 0 setzen.
mfg Alfie
- html #overlay{
-
-
-
-