Layout Probleme mit Firefox und IE

DiVaO · 28.05.2010

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 und in IE zusätzlich mein superfish Menü nicht geht.

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.

Das Menü das in IE nicht geht ist ein jquery superfish Menü (unverändert). Es handelt sich bei allen 3 Browsern um aktuellste Version!

cebito · 28.05.2010

AW: Layout Probleme mit Firefox und IE

Hhmmm, was willst du jetzt für Antworten? Oder willst du vielleicht Hilfe? Lies mal:

DiVaO · 28.05.2010

AW: Layout Probleme mit Firefox und IE

Ich will wissen wie ich die Teile der Boxen so positionieren oder ausrichten kann dass es wieder passt so wie in Screen 1. Und wegem dem Menü is doch wohl klar was ich suche.. ne Lösung wie es funtkioniert. Alle Foreposts usw. die ich gefunden hab bzgl. Superfish Problemen sind wegen dem IE6.

cebito · 28.05.2010

AW: Layout Probleme mit Firefox und IE

Riddick schrieb:
Ich will wissen wie ich die Teile der Boxen so positionieren oder ausrichten kann...

Indem du sie so positionierst oder ausrichtest :rolleyes:

Sorry, meine Glaskugel ist grad beim TÜV. Hättest du meinen obigen Post beherzigt und gelesen, könnte dein Problem vielleicht schon jetzt erledigt sein.

AlexanderBo · 28.05.2010

AW: Layout Probleme mit Firefox und IE

hmmm... zum "raten" sind wir wohl kaum hier...
insofern geb ich cebito recht ;-)
also quoting codes "würde" das "raten etwas vereinfachen"

DiVaO · 28.05.2010

AW: Layout Probleme mit Firefox und IE

Meinste ich hab nicht schon jede Möglichkeit probiert?

Mein css:

HTML:

#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;	
			
}


....


#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;
	
}

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

Mein html:

HTML:

	<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>

Das wiederholt sich 3 mal für 3 Boxen..

vertical align oder position setzen verändert garnichts.

cebito · 28.05.2010

AW: Layout Probleme mit Firefox und IE

Riddick schrieb:
Meinste ich hab nicht schon jede Möglichkeit probiert?

Jede? Dann hättest die Tabellen schon lange rausgekickt. Imho ist der Codeschnipsel auch ein bisschen wenig um da wirklich was genaues zu sagen, jedoch

Riddick schrieb:
Das wiederholt sich 3 mal für 3 Boxen..

Meinst du das so, wie du es schreibst? Wenn ja, hast du ID's mehrfach im Dokument vergeben, die sollten jedoch nur einmal vorkommen.

Poste entweder den gesamten Quellcode oder (Äonen besser) einen Link zur Seite, wie es jackprince in dem von mir verlinkten Thread auch ausführlich erklärt.

DiVaO · 28.05.2010

AW: Layout Probleme mit Firefox und IE

cebito schrieb:
Jede? Dann hättest die Tabellen schon lange rausgekickt. Imho ist der Codeschnipsel auch ein bisschen wenig um da wirklich was genaues zu sagen, jedoch

Meinst du das so, wie du es schreibst? Wenn ja, hast du ID's mehrfach im Dokument vergeben, die sollten jedoch nur einmal vorkommen.

Poste entweder den gesamten Quellcode oder (Äonen besser) einen Link zur Seite, wie es jackprince in dem von mir verlinkten Thread auch ausführlich erklärt.

Die IDs hab ich mehrfach benutzt ja weil es immer der gleiche Header und immer der gleiche content-hintergrund ist nur jweils mit anderem Inhalt. Die Tabelle hab ich so gelassen weil die ganze Seite darauf aufgebaut ist.. ich hab sozusagen drumherum gecoded aber viel hats wohl nicht gebraucht

Die ganze css:

HTML:

                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:

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>		
			
						
		
		</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>

para · 28.05.2010

AW: Layout Probleme mit Firefox und IE

also das ganze musst du im css einstellen. ie und safari sind ein wenig eigen in der interpretation!

zum beispiel wird dein width als max-width interpretiert (ie) also schreib mal aus prinzip immer max-width.

da du nun weisst woran es liegt, kannst du den rest gerne in internet suchen

Sinane · 28.05.2010

AW: Layout Probleme mit Firefox und IE

Also für das Menü, was in IE nicht geht, würde ich mal float: left; probieren.

Sowas wie

Code:

border-top-width: 1px; border-top-style: solid; border-top-color: #c3c3c3;

kannst du übrigens zusammenfassen als

Code:

border-top: 1px solid #c3c3c3;

DiVaO · 28.05.2010

AW: Layout Probleme mit Firefox und IE

para schrieb:
also das ganze musst du im css einstellen. ie und safari sind ein wenig eigen in der interpretation!

zum beispiel wird dein width als max-width interpretiert (ie) also schreib mal aus prinzip immer max-width.

da du nun weisst woran es liegt, kannst du den rest gerne in internet suchen

Sinane schrieb:
Also für das Menü, was in IE nicht geht, würde ich mal float: left; probieren.

Sowas wie

Code:

border-top-width: 1px; border-top-style: solid; border-top-color: #c3c3c3;

kannst du übrigens zusammenfassen als

Code:

border-top: 1px solid #c3c3c3;

Okay danke ihr beiden. Ich werd mich morgen nochmal ransetzen

DiVaO · 29.05.2010

AW: Layout Probleme mit Firefox und IE

Naja ich hab jetzt nochmal einiges ausprobiert.. funzt nichts. Selbst wenn ich z.B. den ersten Boxheader fest mache mit X und Y position ist er in Firefox ganz woanders

cebito · 29.05.2010

AW: Layout Probleme mit Firefox und IE

Mal abgesehen davon, das ich es eigentlich als sinnloses Unterfangen sehe hier zu stückwerkeln sondern die Seite lieber neu und zeitgemäß aufgesetzt sehen würde, hast du hier

HTML:

<td rowspan="12">
    <div id="wrapper">
       <div id="left">
          &nbsp;
       </div>
</td>

zwei divs in einer td geöffnet, wovon du aber nur einen wieder schließt...

DiVaO · 29.05.2010

AW: Layout Probleme mit Firefox und IE

cebito schrieb:
Mal abgesehen davon, das ich es eigentlich als sinnloses Unterfangen sehe hier zu stückwerkeln sondern die Seite lieber neu und zeitgemäß aufgesetzt sehen würde, hast du hier

HTML:

<td rowspan="12"> <div id="wrapper"> <div id="left">   </div> </td>

zwei divs in einer td geöffnet, wovon du aber nur einen wieder schließt...

Danke für den Tipp, hat aber nichts verändert.. und die Seite neu aufsetzen dauert zu lang wiel sie muss bis morgen abend komplett fertig sein.

para · 29.05.2010

AW: Layout Probleme mit Firefox und IE

bei iE vermute ich mal du verwendest den iE 6, hier kannst du eh nichts verbessern und musst bescheissen. d.h. du erstellst also ein iE eigene css datei. dies würde dann in deinem code so aussehen:

HTML:

<!–[if IE]>
<style type=”text/css”>@import url(ie.css);</style>
<![endif]–>

oder bei iE6 (wobei ich den komplett vergessen würde!

HTML:

<!–[if IE 6]>
<style type=”text/css”>@import url(ie6.css);</style>
<![endif]–>

zusätzlich würde ich das ganze für den firefox optimiert darstellen, sorry an alle mac user aber der safari ist genauso proprietär wie der iE und spielt von der menge her eh keine rolle!

da du dir nun aber schon die arbeit gemacht hast, gibst du den oben genannten hack einfach auch für safari ein:

HTML:

<!–[if safari]>
<style type=”text/css”>@import url(safari.css);</style>
<![endif]–>

dies ist zwar keine hübsche lösung, da sie dein problem zwar löst aber deine homepage echt überarbeitet werden sollte, aber immerhin eine schnelle lösung.

hubspe · 29.05.2010

AW: Layout Probleme mit Firefox und IE

gleich die ersten Antworten wiesen den Fragesteller drauf hin, am besten einen Link oder den kompletten Code zu posten.

Er hats ignoriert. Infolgedessen setzte ein lustiges Rumraten ein.
Geholfen hat das niemand, am wenigsten dem Fragesteller.

Hey riddick, entweder ein Link zum Problem oder du mußt wie bei jeder guten Quizsendung einen Preis für richtige Antworten ausssetzen (Kasten Bier o.ä. :mrorange: ).

@para Watt soll datt den mit <!-- [if safari]> ??
Wußte gar nicht das sowas funktioniert. Steht auch nirgendwo beschrieben.
Bist du sicher das es geht??

DiVaO · 29.05.2010

AW: Layout Probleme mit Firefox und IE

para schrieb:
bei iE vermute ich mal du verwendest den iE 6, hier kannst du eh nichts verbessern und musst bescheissen. d.h. du erstellst also ein iE eigene css datei. dies würde dann in deinem code so aussehen:

HTML:

<!–[if IE]> <style type=”text/css”>@import url(ie.css);</style> <![endif]–>

oder bei iE6 (wobei ich den komplett vergessen würde!

HTML:

<!–[if IE 6]> <style type=”text/css”>@import url(ie6.css);</style> <![endif]–>

zusätzlich würde ich das ganze für den firefox optimiert darstellen, sorry an alle mac user aber der safari ist genauso proprietär wie der iE und spielt von der menge her eh keine rolle!

da du dir nun aber schon die arbeit gemacht hast, gibst du den oben genannten hack einfach auch für safari ein:

HTML:

<!–[if safari]> <style type=”text/css”>@import url(safari.css);</style> <![endif]–>

dies ist zwar keine hübsche lösung, da sie dein problem zwar löst aber deine homepage echt überarbeitet werden sollte, aber immerhin eine schnelle lösung.

Nein, ich verwende kein IE 6. Ich hab viel gegoogelt und das Dutzend Forenthreads über CSS Probleme bei IE beschränkt sich eigentlcih nur auf IE6. Ich hab IE 8, genauer gesagt die neueste Version.

Kann auch sein dass das Boxlayout bei IE prinzipiell funktionieren würde aber da das Menü das Design komplett auseinander reißt kann ih das nicht sagen.

Den Vorschlag mit den Browserweichen und den verschiedenen styles würde ich ja gerne machen. Da gibts nur das Problem dass ich leider noch immer keine Ahnng habe wie ich das Design für Firefox optimieren kann. Selbst wenn ich sämtliche Div aus dem Design rausschmeiße und durch die Hintergrundbilder ersteze bleibt der Fehler. Was ich bräuchte wäre ein Stichwort irgendwas das ich nicht kenne/ nicht verwende womint Firefox endlich checkt dass er die Boxen nach dem css stylen soll, stattdessen orientiert er sich nur an der Länge der Seite und teilt die divs auf die Länge auf..

hubspe schrieb:
gleich die ersten Antworten wiesen den Fragesteller drauf hin, am besten einen Link oder den kompletten Code zu posten.

Er hats ignoriert. Infolgedessen setzte ein lustiges Rumraten ein.
Geholfen hat das niemand, am wenigsten dem Fragesteller.

Hey riddick, entweder ein Link zum Problem oder du mußt wie bei jeder guten Quizsendung einen Preis für richtige Antworten ausssetzen (Kasten Bier o.ä. :mrorange: ).

@para Watt soll datt den mit <!-- [if safari]> ??
Wußte gar nicht das sowas funktioniert. Steht auch nirgendwo beschrieben.
Bist du sicher das es geht??

Ich hab dne kompletten Code der Seite gepostet schau mal den zweiten Post an wo ich code drin hab. Und Link posten würde nichts bringen wiel da ein htaccess drauf is, damit die Seite für Besucher nicht zugänglich ist. Falls es aber wirlklich nötig ist lad ich die Seite auf einer meiner anderen Webseiten drauf und shcick dann den Link..

Gebt mir 2 min dann schick ich nen Link..

DiVaO · 29.05.2010

AW: Layout Probleme mit Firefox und IE

So das ist die Seite

Schaut ecuh um.. hab keine externe css verwendet sondenr hab das im Quelltext mit drin ihr habt also alles was ihr braucht. Hoffentlich hat jemand einen Plan

cebito · 29.05.2010

AW: Layout Probleme mit Firefox und IE

Ganz schnelle erste Analyse - du verwendest keinen Doctype, das veranlasst die Browser in den Quirksmode zu schalten.
Kleine Erklärung http://carsten-protsch.de/zwischennetz/doctype/einleitung.html#quirks
Ach ja, und nochmal schnell durch den Validator gejagt - 225 Errors sind definitiv zu viel...
[Invalid] Markup Validation of http://gotr-clan.de/show/ - W3C Markup Validator

AlexanderBo · 29.05.2010

AW: Layout Probleme mit Firefox und IE

doctype is nich da...
woher soll der browser nu wissen was er machen soll¿
lass es mal validieren...
grauenhaft...

//edit: cebito war schneller... @cebito [rechtgeb] ;-)