Antworten auf deine Fragen:
Neues Thema erstellen

Layout Probleme mit Firefox und IE

DiVaO

DiVaO

PSD-Fan

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)

Bitte kostenlos registrieren, damit du die Links siehst.


Firefox:

Bitte kostenlos registrieren, damit du die Links siehst.


IE:

Bitte kostenlos registrieren, damit du die Links siehst.



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!
 

AW: Layout Probleme mit Firefox und IE

Hhmmm, was willst du jetzt für Antworten? Oder willst du vielleicht Hilfe? Lies mal:
 
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.
 
AW: Layout Probleme mit Firefox und IE

Riddick schrieb:
Ich will wissen wie ich die Teile der Boxen so positionieren oder ausrichten kann...
Zum Vergrößern anklicken....
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.
 
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"
 
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.
 
AW: Layout Probleme mit Firefox und IE

Riddick schrieb:
Meinste ich hab nicht schon jede Möglichkeit probiert?
Zum Vergrößern anklicken....

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..
Zum Vergrößern anklicken....

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.
 
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.
Zum Vergrößern anklicken....

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>
 
Zuletzt bearbeitet:
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 ;)
 
Zuletzt bearbeitet von einem Moderator:
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;
 
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 ;)
Zum Vergrößern anklicken....

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;
Zum Vergrößern anklicken....

Okay danke ihr beiden. Ich werd mich morgen nochmal ransetzen ;)
 
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 :(
 
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...
 
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">
          &nbsp;
       </div>
</td>
zwei divs in einer td geöffnet, wovon du aber nur einen wieder schließt...
Zum Vergrößern anklicken....

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.
 
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.
 
Zuletzt bearbeitet von einem Moderator:
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??
 
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.
Zum Vergrößern anklicken....

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??
Zum Vergrößern anklicken....

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..
 
Zuletzt bearbeitet:
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 :)
 
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
Bitte kostenlos registrieren, damit du die Links siehst.

Ach ja, und nochmal schnell durch den Validator gejagt - 225 Errors sind definitiv zu viel...
Bitte kostenlos registrieren, damit du die Links siehst.
 
Zuletzt bearbeitet:
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] ;-)
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 1.429 (Mitglieder: 1, Gäste: 1.428)

Statistik des Forums

Themen
118.962
Beiträge
1.540.121
Mitglieder
68.139
Neuestes Mitglied
Achim84
Oben