✔ Bild wird ohne Grund versetzt...

[tobm_knows_best]

Hallo zusammen,

Ich habe hier 3 Bilder in DIVs nebeneinander gestellt. Soweit so gut - Gem. der Anzeige von diversen HTML-Edioren, und meiner Layoutansicht (auf die man eh nix geben kann) ist auch alles schön nebeneinander ausgerichtet.

Der entsprechende Code hierfür wäre:

<p>…Imagetext…<br />
<br />
<style type="text/css">

.div_index_offer_1 {
	height: auto;
	width: 300px;
	float: left;
	line-height: 10px;
}
.div_index_offer_2 {
	height: auot;
	width: 300px;
	float: left;
	margin-left: 9px;
	margin-right: 10px;
	line-height: 10px;
}
.div_index_offer_3 {
	height: auto;
	width: 300px;
	float: left;
	clear: nne;
	line-height: 10px;
}
.div_index_offer_complete {
	text-shadow: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	height: 175px;
	width: 920px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.image-wrapper {
	border:3px solid #EEE;
	position:relative;
	float:left;
	width:290px;
	height:150px;
	overflow:hidden;
}

.image-wrapper > img {
	display:block;
}

.image-wrapper {
	box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
	-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
	-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	height:30px;
	line-height:30px;
	background:#000;
	color:#fff;
	opacity:.7;
}

</style>

<div class="div_index_offer_complete" id="div_offer_all">
<div class="div_index_offer_1" id="div_index_offer_1">
<div class="image-wrapper">
<img src="" alt="" />
<p class="image-details">
*<a href="#"> » Blindtext</a>
</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-50px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 250);
}, function() {
$(this).find('.image-details').animate({'bottom': '-50px'}, 250);
});
});
/* ]]> */
</script></div>
<div class="div_index_offer_2" id="div_index_offer_2">
<div class="image-wrapper">
<img src="" alt="" />
<p class="image-details">
*<a href="#"> » Blindtext</a>
</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-50px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 250);
}, function() {
$(this).find('.image-details').animate({'bottom': '-50px'}, 250);
});
});
/* ]]> */
</script></div>
<div class="div_index_offer_3" id="div_index_offer_3">
<div class="image-wrapper">
<img src="" alt="" />
<p class="image-details">
*<a href="#"> » Blindtext</a></p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-50px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 250);
}, function() {
$(this).find('.image-details').animate({'bottom': '-50px'}, 250);
});
});
/* ]]> */
</script></div>
</div>

Allerdings zeigt es mir in meine Browsern (Safari & Firefox) folgendes an:
(siehe letztes Bild...)



Mich macht das noch kirre - wo kann ich noch gucken um zu sehen woran das liegen kann?
Wieder mal so ein *Float*-Ding vielleicht?

VG

 

[SpiceLab]

Mich macht das noch kirre - wo kann ich noch gucken um zu sehen woran das liegen kann?

Evtl. diese Tippfehler.

.div_index_offer_2 {
	height: auot;
	...
}
.div_index_offer_3 {
	...
	clear: nne;
	...
}

 

[tobm_knows_best]

Alles klar - hat sich erledigt - danke trotzdem für den Hinweis
Ich hatte im vorhergehenden DIV ein Bild, welches etwas größer, als in der Layout-Ansicht ersichtlich, war...