Tag,

meine Seite ist fertig und ich stelle fest dass sie nur in Safari super ist und in Firefox und IE das Layout ganz anders ist..

Safari: (alles super)



Firefox:



IE:




In Safari richtet er alles richtig aus, in FF und IE richtet er Boxheads und Boxcontents nicht nach der css aus, sondern nach der länge des Contentbereichs.

Wie schaffe ich es dass Firefox und IE schnallen dass sie die divs im Boxbereich nicht auf die Länge der Seite verteilen sollen sondern direkt untereinander machen sollen? Hab schon alles probiert und ja ich weiß dass die Browser das falsch interpretieren.

Die ganze css:

tr 
		{

			font-family: Verdana;
			font-size: 10px;

		}


		#content
		{

		background: url(include/designs/neu/images/content.jpg);
			min-height: 1500px;
			width: 710px;
			float: right;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #c3c3c3;
		
		}

		#box
		{
			

			background: url(include/designs/neu/images/boxcontent.gif);
			min-height: 212px;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #c3c3c3;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #c3c3c3;	
			
		}

		


		


		#wrapper 
		{

			background: url(include/designs/neu/images/left_space.gif) repeat-y left top;

		}


		#left
		{
			
			
			float: left;
			width: 56px;
			
		}


		#main
		{

			background-color: #e3e3e3;
			border-left-width: 1px;
			border-right-width: 1px;
			border-color: #871f00;
			border-style: solid;

		}


		#explode_content
		{

			margin-top: 8px;
			margin-left: 8px;
			margin-right: 8px;

		}


		#explode_box
		{

			margin-left: 6px;
			margin-right: 6px;
			padding-top: 6px;
			
		}


		#head-leiste-right 
		{

			background: url(include/designs/neu/images/head_leiste_right.jpg) no-repeat;
			min-height: 34px;
			margin-top: -1px;

		}


		#end
		{

			background: url(include/designs/neu/images/footer_bottom.jpg) no-repeat;
			width: 1100px;
			height: 80px;

		}

			
		#end-content 
		{

			
			margin-left: 20px;
			margin-bottom: 20px;
			margin-right: 20px

		}

		#boxhead
		{

			

			background: url(include/designs/neu/images/box2head.gif) no-repeat;
			width: 252px;
			height: 29px;


		}

		#boxhead-content
		{

			font-family: Verdana;
			font-size: 14;
			margin-left: 6px;
			padding-top: 5px;
		
		
		}


		#headright
		{

			background: url(include/designs/neu/images/head_right.jpg);
			width: 334px;
			height: 140px;

		}

		#headright-content
		{

			margin-right: 20px;
			padding-top: 20px;

		}


		#headright-content a
		{

			color: #fff;

		}


		
		
		.clear 
		{

			clear:both
		}


		

		#top-space 
		{ 
			height: 11px;
		}

		#mid-space
	       	{
			width: 26px;
			height: 856px;
		}

		#right-space 
		{
			width: 56px;
			height: 856px;
		}

		#box-mid-space 
		{
			width: 252px;
			height: 8px;
		}
	
		#box-b-space 
		{
			width: 252px;
			height: 19px;
		}

die html:

<td colspan="3">
			<div id="head-leiste-right">
		
			</div></td>
	</tr>
	<tr>
		<td colspan="5">
			<div id="top-space"></div></td>
	</tr>

	<tr>

		<td rowspan="12">

			<div id="wrapper">

			<div id="left">
				
				&nbsp;	

			</div>	
	                </div>
			
						
		
		</td>

		<td rowspan="12">

			<div id="content">
				<div id="explode_content">


					{EXPLODE}
					


				</div>
			</div>
		
		</td>

			<div style="clear: both;">
		
			</div>

	

		<td rowspan="12">
				<div id="mid-space"></div></td>
		<td>
			<div id="boxhead">

				<div id="boxhead-content">

					<font color="white">Aktuelles</font>

				</div>
		
			</div>
	
		</td>
		<td rowspan="12">
			<div id="right-space"></div></td>
	</tr>
	<tr>
		<td>
			<div id="box-mid-space"></div></td>
	</tr>
	<tr>
		<td>
			<div  id="box">

				<div id="explode_box">
					

					Aktuelle News<br />
				
					{_boxes_LASTNEWS}

					<br /><hr><br />

					Aktuelle Forenposts<br />

					{_boxes_LASTFORUM}

					<br />

				</div>
			
			</div>

		</td>
	</tr>
	<tr>
		<td>
			<div id="box-b-space"></div></td>
	</tr>
	<tr>
		<td>
			<div id="boxhead">

				<div id="boxhead-content">

					<font color="white">Statistik</font>

				</div>

			</div>
	
		</td>
	</tr>
	<tr>
		<td>
			<div id="box-mid-space"></div></td>
	</tr>
		<tr>
		<td>
			<div  id="box">

				<div id="explode_box">
			
				
					{_boxes_STATISTIK}
					

				</div>
			
			</div>

		</td>
	</tr>
	<tr>
		<td>
			<div id="box-b-space"></div></td>
	</tr>
		<tr>
		<td>
			<div id="boxhead">

				<div id="boxhead-content">

					<font color="white">Shoutbox</font>

				</div>

			</div>
	
		</td>
	</tr>
	<tr>
		<td>
			<div id="box-mid-space"></div></td>
	</tr>
		<tr>
		<td>
			<div  id="box">

				<div id="explode_box">
			
					{_boxes_SHOUTBOX}

					<br /><br />
				
				

				</div>
			
			</div>

		</td>
	</tr>
	<tr>
		<td>
			<div id="box-b-space"></div></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="include/designs/neu/images/footer_top.gif" width="1100" height="139" alt=""></td>
	</tr>
	<tr>
	
		<td colspan="5">

			<div id="end">
				
				<div id="end-content">

									
		
				</div>

			</div>
		</td>
	</tr>

Zuletzt modifiziert von LittleBIGFan am 29.05.2010 - 12:03:27