Positionierungs eines Bildes mit position:absolute

[nils.rochholl]

Hallo zusammen,

ich habe leider ein kleines Problem mit einer Positionierung.

im Folgenden der Code für die problematische Sache:

HTML:

<section class="contactbox ce_rsce_contactbox">
 
<img src="files/fotolia_62814684.jpg" width="500" height="350" alt="">
 
<p><h3></h3>
<h4>0176/65123789</h4>
Ihre Express-Schnittstelle</p>
</section>

CSS:

.contactbox,
#content .contactbox {
	position: relative;
	float: right;
	width: 39.13043%;
	margin: 36px 0 36px 4.34783%;
	padding: 4.34783%;
	text-align: center;
	background: white;
	-webkit-box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);
}
 
.modernizr-no-boxshadow .contactbox,
.modernizr-no-boxshadow #content .contactbox {
	border: 1px solid #dfdfdf;
}
 
.contactbox:before,
#content .contactbox:before {
	content: "";
	position: absolute;
	left: 11.11111%;
	top: 0;
	width: 77.77778%;
	height: 3px;
	background: #ec8624;
}
 
.contactbox img,
#content .contactbox img {
	/*position: absolute;*/
	left: 11.11111%;
	width: 77.77778%;
	height: auto;
	top: 3px;
	margin: 0 7.14286% 0 0; /* 0 7.14286% 0 0*/
}
 
.contactbox h3,
#content .contactbox h3 {
	margin: 6px 0 12px 0;
	font-size: 12px;
	font-weight: normal;
	color: gray;
}
 
.contactbox h4,
#content .contactbox h4 {
	/*margin: 0;*/
	font-size: 21px;
	font-weight: normal;
	letter-spacing: 0;
	word-spacing: 0;
	color: #ec8624;
	text-transform: uppercase;
}
 
.contactbox h4:before,
#content .contactbox h4:before {
	font: 40px/1 "RockSolid Icons";
	content: "\e0e6";
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	text-indent: 0;
 	display: inline-block;
 	position: relative;
 	display: block;
 	text-align: center;
}
  
.contactbox p,
#content .contactbox p {
	position: relative;
	margin: 0;
	font-size: 16px;
	color: gray;
}

Wenn ich bei contactbox img die "position: absolute" einblende, wird das Bild schön angezeigt, aber es liegt über dem Text. Die Position des Bildes nach oben soll genau so sein.

Wenn position: absolute deaktiv ist (siehe Code oben), dann sieht es so aus.

Kann mir hier jemand helfen?

VG Nils