✔ Innenrahmen mit padding

Status
Nicht offen für weitere Antworten.
M

m_topic

Mitglied
Hallo,

ich probiere seit mehreren Stunden einen Browsercrossover fehler zu lösen das Problem scheint aber für mein IQ unlösbar zu sein

IE6 interpretiert es wahrscheinlich falsch aber halt so wie ich es möchte alle andere Browser interpretieren es anders.

Link

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>


<style type="text/css">
.box {
	width:50%;
	height:200px;
	background-color:#000000;
}

.rechtsunten {
	width:100%;
	height:100%;
	background: url(img/rb.gif) no-repeat bottom right;
}

.linksunten {
	width:100%;
	height:100%;
	background: url(img/lb.gif) no-repeat bottom left;
}

.rechtsoben {
	width:100%;
	height:100%;
	background: url(img/rt.gif) no-repeat top right;
}

.linksoben {
	width:100%;
	height:100%;
	background: url(img/lt.gif) no-repeat top left;
	padding:10px;
}

.content {
	width:100%;
	height:100%;
	background-color: #000000;
	border:1px #CCCCCC solid;
}
</style>
</head>

<body>

<div class="box">
	<div class="rechtsunten">
		<div class="linksunten">
			<div class="rechtsoben">
				<div class="linksoben">
					<div class="content"></div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>
 
Hi,

versuch es mal folgendermassen.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<style type="text/css">
.box {
	width: 50%;
        min-height: 200px;
        height: auto !important;
	height: 178px;
	background-color: #000000;
}

.rechtsunten {
	height:100%;
	background: url(img/rb.gif) bottom right no-repeat;
}

.linksunten {
	height:100%;
	background: url(img/lb.gif) no-repeat bottom left;
}

.rechtsoben {
	height:100%;
	background: url(img/rt.gif) no-repeat top right;
}

.linksoben {
	height:100%;
	background: url(img/lt.gif) no-repeat top left;
	padding:10px;
}

.content {
        min-height: 178px;
        height: auto !important;
	height: 100%;
	background-color: #000000;
	border:1px #CCCCCC solid;
        color: #efefef;
}
</style>
</head>
<body>
<div class="box">
	<div class="rechtsunten">
		<div class="linksunten">
			<div class="rechtsoben">
				<div class="linksoben">
					<div class="content">Content</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
Die Box hat jetzt eine gesamte minimale Höhe von 200 Pixeln. Weiterhin passt sich das Element dem
Inhalt an.

Vielleicht hilft das weiter.

Ciao
Quaese
 
Hi,

es ging relativ flott - war allerdings nicht das erste Mal, dass ich eine derartige Box gestaltet habe.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück