✔ Horizontale Element-Positionierung im IE

[luke_the_duke]

Hallo,

ich habe ein Problem: Ich habe den Auftrag gefasst, eine XHTML 1.1 zu erstellen, bin damit aber noch recht unerfahren, vor allem was die Tücken bei den Browsern angeht. Ich arbeite aufgrund besserer Debugging-Möglichkeiten mit Firefox, wo die Chose auch so aussieht, wie sie sollte, im unsäglichen IE wird das Layout aber (für meine bescheidenen Kenntnisse) bar jeder Logik komplett zerrissen.

Das Layout besteht aus einem sich wiederholenden Template, dass sich aus drei Elementen zusammensetzt:
1. Einem Überschriften-Block, der über eine fixe Höhe verfügt.
2. Einem einzeiligen Inhaltsblock, ebenfalls mit festen Höhenangaben und Hintergrundbild versehen.
3. Einem Inhaltsblock, der sich aus einer Kopfgrafik, einem in der Höhe variablen Mittelteil und aus einer Fussgrafik zusammensetzt (Layout mit runden Ecken *seufz*).

Nummer zwei und drei beinhalten zusätzlich noch zwei nebeneinander angeordnete Layer, der eine steht für die Blockbeschriftung, die andere für den Block-Inhalt.

Mein Problem ist vor allem die horizontale Ausrichtung der Inhalte.

Relevanter CSS-Code:

div.text {
	margin-left:		85px;
	color:			  #111;
	margin-right:	      5px;
	width:			411px;
}


div.bg_top {
	margin-top:		     2px;
	width:				496px;
	height:				10px;
	background-image:	url(../pics/bg_top.png);
	background-repeat:	no-repeat;
	color:				#f7f6eb;
}

div.bg_bottom {
	font-size:			0px;
	margin-bottom:		   2px;
	width:				496px;
	height:				10px;
	background-image:	url(../pics/bg_bottom.png);
	background-repeat:	no-repeat;
	line-height:		      1px;
	color: 				#f7f6eb;
}

div.head {
	margin:				auto;
	margin-top:			10px;
	width:				  496px;
	height:				  32px;
	background-image:	  url(../pics/bg_head.png);
	background-repeat:	   no-repeat;
	color:				  #f7f6eb;
	line-height:		        36px;
	text-indent:		       10px;
}

div.container {
	position: 		relative;
	width: 			 496px;
	margin:			auto;
	margin-bottom:	    20px;
	display:		none;
}

div.date {
	margin-top:			2px;
	position: 			  relative;
	width: 				  496px;
	background-image:	   url(../pics/bg_entry.png);
	background-repeat: 	   no-repeat;
	line-height:		         33px;
	padding:			0px 5px 0px 5px;
}

div.title {
	margin-top:			2px;
	position: 			relative;
	width: 				496px;
	background-image:	url(../pics/bg_entry.png);
	background-repeat: 	no-repeat;
	line-height:		      33px;
	padding:			0px 5px 0px 5px;
}


div.description {
	position: 			relative;
	width: 				496px;
	background-image:	url(../pics/bg_middle.png);
	background-repeat:	repeat-y;
	padding:			0px 10px 0px 5px;	
}

Mein HTML-Code:

<!--START TEMPLATE-->

<div id="head_6" class="head" onclick="expand(this);">
	<img id="head_img_6" src="pics/arrow.png" alt="" /><span style="margin-left: 20px;">Epsum factorial non deposit, 2007-02-24 Uhr</span>
</div>
<div id="ct_6" class="container">
	<div id="date_6" class="date"><div class="label">Datum:</div><div class="text" id="date_text_6">2007-02-24</div></div>
	<div id="title_6" class="title"><div class="label">Titel:</div><div class="text" id="title_text_6">Epsum factorial non deposit</div></div>
	<div class="bg_top" id="bg_top_6">&nbsp;</div>
	<div id="description_6" class="description"><div class="label">Beschreibung:</div><div class="text" id="description_text_6">Epsum factorial non deposit usw.</div></div>

	<div class="bg_bottom" id="bg_bottom_6">&nbsp;</div>
	<div id="edit_6" class="editContainer">
		<div id="edit_edit_6" class="editButton_1" onclick="initEdit (this)">Edit</div>
		<div id="add_edit_6" class="editButton_2"  onclick="initAdd (this)">Add</div>
		<div id="delete_edit_6" class="editButton_3" onclick="initDelete (this)">Delete</div>
	</div>
</div>
<!--END TEMPLATE-->

Zusätzlich habe ich noch zwei Screens angehängt, die die Ansicht der Seite im FF und im IE zeigen.

Wäre schön, wenn sich jemand Zeit nehmen würde.

gruss

 

[Maik]

Hi,

probier es mal ohne die Breitenangabe für die Klasse .text.

Zudem musst du gemäß dem Boxmodell in den Klassen .date, .title und .description die horizontalen padding-Angaben von der Breitenangabe abziehen, damit ihre Addition die Breitenangabe des umschliessenden DIVs .container ergibt:

div.date {
        
        width:                          486px;
        padding:                        0px 5px 0px 5px;
}

div.title {
        width:                          486px;
        padding:                        0px 5px 0px 5px;
}


div.description {
        width:                          481px;
        padding:                        0px 10px 0px 5px;
}

 

[luke_the_duke]

Hallo,

vielen herzlichen Dank für die Hilfe!

gruss