✔ Lightbox 2 -> caption wird nicht angezeigt

Status
Nicht offen für weitere Antworten.
Y

yellowspam

Erfahrenes Mitglied
Hi@all:

Ich habe die Lightbox v2 in mein aktuelles Projekt ein gebunden.

Nun habe ich ein Bild eingebaut, welches zwar richtig angezeigt wird, jedoch erscheint dann rund um den bereich wo Caption und der Close-Button sind, scrollbars, weil das alles runtergedrückt wird.
Ich aheb es schon mitm CSS-File probiert, aber dass lässt sich so ned lösen, weiß einer wo und wie man das lösen kann?

Lg
Yellowspam
 
Hi,

kannst du hier auch den Link zu deiner Projektseite nennen, denn im "Blindflug" lässt sich wenig bis gar nichts zur Ursache sagen.

mfg Maik
 
Jetzt wissen wir zwar, wie sich das Problem konkret äußert, aber seine Ursache lässt sich aus dem Screenshot nicht ablesen :rolleyes:

mfg Maik
 
Also, hier ist der mal der Source vom HTML-File:

HTML: 
<html>
<head>
	<title>Site</title>
	<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<body id="general">
<!--MAIN DIV-->
<div align="center">
	<!--CONTENT-->
	<div id="Link_Oesterreich">
	        <a href="images/austria.gif" rel="lightbox" title="Österreich"><label>Österreich</label></a>
    </div>
	 <!--<div id="Content" >-->
	   <div id="Logo">
            <img src="images/logo.jpg" border="0"/><br />
       </div>
	<!--</div>-->
    <div id="Link_Rumaenien">
            <a href="images/rumenia.gif" rel="lightbox" title="Rumänien"><label >Rumänien</label></a>
    </div>
    <div id="Link_Bulgarien">
            <a href="images/bulgaria.gif" rel="lightbox" title="Bulgarien"><label >Bulgarien</label></a>
    </div>
</div>
</body>
</html>

Und hier die CSS-Einstlellungen für die Lightbox:

HTML: 
/*--------------------Lightbox--------------------*/

#lightbox
{	
	position:absolute;/*top: 10px !important;*/left: 0; width: 100%; z-index: 100; text-align: center; vertical-align:middle; line-height: 0;
}

#lightbox img
{ 
	width: auto; height:auto;
}

#lightbox a img
{ 
	border: none;
}

#outerImageContainer
{ 
	position: relative;top:40px;background-color: #fff; width: 250px; height: 250px; margin: 0 auto;
}

#imageContainer
{ 
	padding: 10px;
}

#loading
{ 
	position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;
}

#hoverNav
{ 
	position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;
}

#imageContainer>#hoverNav
{ 
	left: 0;
}

#hoverNav a
{ 
	outline: none;
}

#prevLink, #nextLink
{ 
	width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;
}

#prevLink
{ 
	left: 0; float: left;
}

#nextLink 
{ 
	right: 0; float: right;
}

#prevLink:hover, #prevLink:visited:hover 
{ 
	background: url(../images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover 
{ 
	background: url(../images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer
{ 
	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%;position:relative;top:40px;
}

#imageData
{	
	padding:0 10px; color: #666;
}

#imageData #imageDetails
{ 
	width: 70%; float: left; text-align: left;
}
	
#imageData #caption
{ 
	/*font-weight: bold;*/
}

#imageData #numberDisplay
{ 
	display: block; clear: left; padding-bottom: 1.0em;
}			

#imageData #bottomNavClose
{ 
	width: 66px; float: right;  padding-bottom: 0.7em; outline: none;
}	 	

#overlay
{ 
	position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;
}

Das blöde ist ja dass es im Firefox und in Opera korrekt angezeigt wird:

Mozilla

Im IE7 wird es nicht korrekt angezeigt, die Caption sollte ohne idese häßlichen Scrollbars zu sehen sein, die Caption wird ja noch größer weil ich da noch mehr Text reinhauen muss.
 
Hi,

möglicherweise reicht es aus, wenn du für das HTML-Dokument noch einen Dokumenttyp deklarierst, damit es den Browsern im "Standardsmode" übergeben wird, denn derzeit schalten die Browser ohne jegliche Doctype-Deklaration in den "Quirksmode", und in diesem Darstellungsmodus hält sich der IE noch weniger an die w3c-Spezifikationen, wie z.B. an das CSS-Boxmodell.

Zum Vergleich, im Original-Script kommt dieser Doctype zum Einsatz:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
und dort tauchen im IE7 keine derartigen Darstellungsfehler auf.

mfg Maik
 
Fein, dann verfrachte ich den Thread nachträglich ins HTML-Board, da es sich hierbei um kein JS-Problem handelte.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück