✔ IE zeigt Bild komisch an, FF dafür Linkfarbe nicht (immer)

Khyrsanth · 6. Juli 2009

Dieser Internet Explorer bringt mich irgendwann noch zur Verzweiflung

Ich habe eine Lightbox mit Visual-Lightbox gemacht (Sprich: Einfach Code in head und body-Bereich einkopieren und die Ordner mit CSS usw. hochladen).

Beim IE ist das Bild an der linken Seite zur Hälfte nicht sichtbar, beim FF sieht man das Bild wenigstens vollständig, auch wenn es nicht ganz rechtsbündig ist wie es sein sollte.

Hier mal der Code von der Spalte in der das Bild ist:

CSS:

#kasten4 /*a:link, a:visited, a:active */{
font-size: 10px;
line-height: 13px;
font-family: verdana, arial, helvetica, sans-serif;
color:#422F16;
text-decoration:none;
padding:0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
}

/*links in Kasten */
#kasten4 a:link, #kasten4 a:visited, #kasten4 a:active{
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
color:#AF772F
}
 
#kasten4 a:hover {
font-size: 10px;
background-color:#CE9D63;
color:#422F16;
text-decoration:none;
}

Daran sollte es eigentlich nicht liegen oder?

Hier der Code von der Lightbox in der HTML-Seite:

Code:

<!-- Start VisualLightBox.com HEAD section -->
				<link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
		<script src="engine/js/prototype.js" type="text/javascript"></script>
		<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
		<script src="engine/js/lightbox.js" type="text/javascript"></script>

		<style>
			.gallery {
				zoom:1;
				width:auto;				
			}
			.gallery a {
				display:block;
				float:left;
				margin:5px; 
				opacity:0.87;
				text-align:center;
			}
			.gallery a:hover {
				opacity:1;
			}
			.gallery a img {
				border:none;
				display:block;
			}
			.gallery a#vlightbox{display:none}
		</style>
		<!-- End VisualLightBox.com HEAD section -->



<!-- Start VisualLightBox.com BODY section -->	
	<div class="gallery">
		<a href="./data/images/buchcover.jpg" rel="lightbox[sample]" title="Die Antikdogge - Das Buch"><img src="./data/thumbnails/buchcover.png" /></a>

	<!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
	<a id="vlightbox" href="http://visuallightbox.com/">Photoalbums by VisualLightbox.com</a>
	</div>
	<!-- End VisualLightBox.com BODY section -->

und hier der CSS-Code der VisualLightBox:

CSS:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #151410;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

#lightbox{
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	color:#151410;
	line-height:0;
}

#lightbox a, #lightbox a:hover {
	border-bottom:none;
	color:#151410;
	text-decoration:underline;
}

#lightbox a img{ border: none; }

#outerImageContainer{
	width: 250px;
	height: 250px; /* without this line error in IE8 detected */
	margin: 0 auto;
	position: relative;
}


#imageContainer{
	width:100%;
	
	background-color: #fff;
	position: relative;
/*	border-style:solid;
	border-color:#fff;
	border-width:1px;*/
	font-size:0;/* ie fix - big info bar*/
}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#loadingLink {
	display:block;
	margin:0 auto;
	padding:0;
	width:32px;
	height:32px;
	background:url("../images/loading.gif") center center no-repeat;
	text-indent:-9999px;
}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLinkImg, #nextLinkImg{
	width: 49%;
	height: 100%;
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
	display: block;
	text-indent:-9999px;
	}
#prevLinkImg { left: 0; float: left;}
#nextLinkImg { right: 0; float: right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover { 
	background: url("../images/prev.png") 5% center no-repeat; 
	_background-image:url("../images/prev_ie6.gif")
}
#nextLinkImg:hover, #nextLinkImg:visited:hover { 
	background: url("../images/next.png") 97% center no-repeat; 
	_background-image:url("../images/next_ie6.gif")
}


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	font-family: "Lucida Grande",tahoma,verdana,arial,sans-serif;
	font-size:13px;
	background-color: #fff;
	width:100%;
}

#imageData{
	overflow:hidden;
	width:100%;
}
#imageDetails{ width: 70%; float: left; text-align: left; 	padding:10px 10px 0 0;}
#caption{ font-weight: bold; display:block;}
#numberDisplay{ display: block; float: left; padding:3px 10px 0 0;}
#detailsNav{display:block; float:left;   padding:0; }	
#prevLinkDetails { margin:3px; margin-top:0px; display:block; width:22px;height:22px; background: url("../images/prevlabel.gif") left center no-repeat; float:left; }
#nextLinkDetails { margin:3px; margin-top:0px; display:block; width:22px;height:22px; background: url("../images/nextlabel.gif") right center no-repeat; float:left; }

#slideShowControl.started{
	background-image:url("../images/pause.gif");
}

#slideShowControl{
	display:block;
	width:22px; 
	height:22px; 
	float:left;
	background:url("../images/start.gif");
	background-position:center center;
	background-repeat:no-repeat;
	}

#close{
	padding:16px 0 0;
	float:right;
}
#closeLink {
	display:block;
	margin:0;
	padding:0px;
	text-decoration:none;
	width:32px;
	height:32px;
	background:url("../images/close.gif") no-repeat;
}

		
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}	
	

#outerImageFrame{
	border:solid 1px red;
	height:100%;
	width:100%;
	position:absolute;
}


#outerImageContainer{
	overflow:visible;
}
#outerImageContainer td{
	text-align:center;
	padding:0;
}

#lightboxFrameBody{
	background-color: #fff;
	border:solid 1px #fff; /* hack for opera table small cell width */
	_vertical-align:top;
	_height:90%;
	//vertical-align:top;
	//height:90%;
}

#outerImageContainer td{
	font-size:0;
}
/* frame style */
#outerImageContainer td.tl, #outerImageContainer td.br{
	height:21px;
	width:21px;
}

#outerImageContainer td.tl{
	background-image:url(../images/borderTopLeft.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderTopLeft.png', sizingMethod='scale');
}
#outerImageContainer td.tc{
	background-image:url(../images/borderTopCenter.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderTopCenter.png', sizingMethod='scale');
}
#outerImageContainer td.tr{
	background-image:url(../images/borderTopRight.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderTopRight.png', sizingMethod='scale');
}
#outerImageContainer td.ml{
	background-image:url(../images/borderMiddleLeft.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderMiddleLeft.png', sizingMethod='scale');
}
#outerImageContainer td.mr{
	background-image:url(../images/borderMiddleRight.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderMiddleRight.png', sizingMethod='scale');
}
#outerImageContainer td.bl{
	background-image:url(../images/borderBottomLeft.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderBottomLeft.png', sizingMethod='scale');
}
#outerImageContainer td.bc{
	background-image:url(../images/borderBottomCenter.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderBottomCenter.png', sizingMethod='scale');
}
#outerImageContainer td.br{
	background-image:url(../images/borderBottomRight.png);
	_background-image: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderBottomRight.png', sizingMethod='scale');
}

Link zur Seite

Es ist auch seltsam dass die Bilder bei IE geordnet in Spalten angezeigt werden und beim FF den comment umfliessen, aber das ist jetzt nicht so gravierend.

Maik · 6. Juli 2009

Hi,

versuch's mal hiermit:

Code:

.gallery a {
				display:block;
				float:left;
				margin:5px; 
				opacity:0.87;
				text-align:center;
				width:100%;
			}

mfg Maik

Maik · 6. Juli 2009

Okay, das hilft hier nicht weiter :-(

Dafür aber das hier

CSS:

#kasten4 .gallery a {
float:none;
}

mfg Maik

Khyrsanth · 6. Juli 2009

nee klappt leider nicht.

Man sieht nach wie vor nur die Hälfte vom Bild (als ob da automatisch irgendwie rechts nen Rand gemacht wird?

) und die anderen Bilder sind auf einmal eins in jeder Zeile

das geht garnicht.

Khyrsanth · 6. Juli 2009

Huch bist Du schnell

hmmm das mit dem Code sieht bei mir irgendwie noch nicht OK aus, krieg das bei Dreamweaver ja immer hübsch mit Farben angezeigt aber da nimmt es mir das irgendwie nicht an *grübel* hab ich da was falsch geschrieben? Geändert hat sich dadurch jedenfalls in der Anzeige noch nix.

CSS:

#kasten4 /*a:link, a:visited, a:active */{
font-size: 10px;
line-height: 13px;
font-family: verdana, arial, helvetica, sans-serif;
color:#422F16;
text-decoration:none;
padding:0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
}

/*links in Kasten */
#kasten4 a:link, #kasten4 a:visited, #kasten4 a:active{
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
color:#AF772F
}
 
#kasten4 a:hover {
font-size: 10px;
background-color:#CE9D63;
color:#422F16;
text-decoration:none;

#kasten4 .gallery a {
float:none;
}

Maik · 6. Juli 2009

Du hast die Regel im falschen Stylesheet notiert, womit sie wieder überschrieben wird

Code:

.gallery a {
                                display:block;
                                float:left;
                                margin:5px;
                                opacity:0.87;
                                text-align:center;
                        }
#kasten4 .gallery a {
                                float:none;
}

Desweiteren hast du nun durch diesen Arbeitsschritt die schliessende }-Klammer im Regelblock (#kasten4 a:hover) zuvor entfernt.

mfg Maik

Khyrsanth · 6. Juli 2009

Es klappt, Danke Dir Maik! (hier fehlt definitiv ein Smilie zum Jubeln und Danke sagen *lach*)

Ich glaube wenn ich Dich hier nicht hätte würde ich da manchmal verzweifeln an diesem CSS-Wirrwarr, da bin ich oft noch zu blind dafür die Fehler zu finden

Khyrsanth · 7. Juli 2009

Ah hab noch ne Kleinigkeit gefunden:

Das Bild im Comment (der sollte rechtsbündig sein) wird scheinbar trotzdem linksbündig angezeigt.

Hab mal versucht den Code im Head-Bereich analog zu dem Problem beim kasten4 zu ändern aber leider ändert sich da nichts, woran könnte das noch liegen?

comment-Code:

CSS:

#sp1 {text-align:justify; padding-left: 20px;padding-right:20px;padding-top: 30px;padding-bottom: 30px;
background-color:#E4D1AF;width:100%;
}

.comment{
width:160px;
float:left;
line-height:28px;
letter-spacing:-1px;
text-align: right;
color:#AF772F;
margin-top:20px;
margin-bottom:10px;
margin-right:20px;
padding-bottom:10px;
font-family:verdana, arial, helvetica, sans-serif;
font-size: 14px;
}

Mein Versuch im Head Bereich:

CSS:

#comment .gallery a {
                               		align:right;
            }

Ich vermute irgendwie dass es damit zusammenhängt dass ich noch nicht ganz kapiert habe was/wofür # oder ein Punkt vorne dran gesetzt werden, aber auch mit Punkt vor dem comment funktioniert das rechtsbündige nicht

Maik · 7. Juli 2009

Khyrsanth hat gesagt.:
Das Bild im Comment (der sollte rechtsbündig sein) wird scheinbar trotzdem linksbündig angezeigt.

Mein Versuch im Head Bereich:

CSS:

#comment .gallery a { align:right; }

Eine CSS-Eigenschaft namens "align" gibt es nicht, dafür aber text-align.

Desweiteren besitzt der Block keinen ID-Bezeichner sondern einen Klassenbezeichner:

CSS:

.comment .gallery a {
                               		text-align:right;
            }

mfg Maik

Khyrsanth · 7. Juli 2009

Ah ok, dachte das wäre dann wirklich nur für Text.

Klappt aber leider trotzdem nicht

(zur Not isses auch nicht so schlimm, ist nur ein kleiner Schönheitsfehler aber da könnte ich mit leben)

✔ IE zeigt Bild komisch an, FF dafür Linkfarbe nicht (immer)

Khyrsanth

Mitglied

Maik

Maik

Khyrsanth

Mitglied

Anhänge

Khyrsanth

Mitglied

Maik

Khyrsanth

Mitglied

Khyrsanth

Mitglied

Maik

Khyrsanth

Mitglied

Neue Beiträge