Zur Navigation

wieder unterschiede firefox und IE?

1 trudi

hallo!
hab eine frage wieder um thema firefox und IE. wieso wenn man alles schön passend beim firefox programmiert, schiebt sich dann viel beim vorstellung im IE (abstände passend nicht mehr, bei einer liste rückt es das wort ein,...)?

was kann man dagegen tun, mache ich was falsch?

soll ich ein beispiel schicken?

saluti

trudi

31.01.2007 09:23

2 Jörg Kruse

Hallo trudi,

die Browser zeigen verschiedene Abstände an, wenn diese nicht eindeutig definiert sind. Es kann aber auch andere Ursachen für unterschiedliche Darstellungen geben, z.B. Fehlinterpretationen eines Browsers. Lösungswege hängen auch vom Einzelfall ab, von daher wäre ein konkretes Beispiel hilfreich

31.01.2007 10:46

3 trudi

ok, hier eine seite wo in firefox gut alles passt und in IE verschiebungen gibt (z.b. neben das bild passt das text nicht mehr sondern rutsch weiter unter das bild, aber auch andere sachen....)

ich hoffe man kann was erkennen...

hier der xhtml text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="Description" content="val cama e le sue bellezze in italiano e tedesco" />
  <meta name="Keywords" content="val cama, alp de lagh, ProSpecieRara, mesolcina, escursionismo" />
  <title>val cama</title>
  <link rel="stylesheet" type="text/css" href="styles/basic1.css" />

  </head>

<body style="background-image: url('images/geschichte4.jpg'); ">

	

	<!-- start main navigation -->
	<div id="navcontainer">
	<ul>
	<li><a href="aktuelles_de.html">Aktuelles </a></li>
	<li><a href="anreise_de.html">Standort &amp; Anreise </a></li>
	<li><a href="geschichte_de.html">Geschichte </a></li>
	<li><a href="projekt_de.html">Entwicklungskonzept </a></li>
	<li class="on2"><a style="background:none; color: #f23311" href="alpwirtschaft_de.html">Alpwirtschaft</a><ul>
		<li><a href="alpdelagh_de.html">Alp de Lagh</a></li>
		<li class="on3">&raquo; Unbewirtschaftete Alpen</li></ul></li>
	<li><a href="waldreservat_de.html">Waldreservat </a></li>
	<li><a href="natura_de.html" >Natur &amp; Landschaft </a></li>
	<li><a href="seen_de.html">Seen </a></li>
	<li><a href="alpinismus_de.html">Wandern &amp; Bergsteigen </a></li>
	<li><a href="unterkuft_de.html">Unterkunft &amp; Verpflegung </a></li>
	</ul>
	</div>
	<!--end navigation -->
   
	<!-- start top navigation -->
	<div id="topnavi">
	<ul>
	<li><a href="index_de.html" class="erste">Home </a></li>
	<li><a href="kontakt_de.html">Kontakt </a></li>
	<li><a href="impressum_de.html">Impressum </a></li>
	</ul>
	</div>	
	<!--end topnavigation -->
	
	<!-- start sprachwahl -->
	<div id="language">
	<ul>
	<li><a href="alpen_de.html">Deutsch </a></li>
	<li><a href="alpen_it.html">Italiano </a></li>
	</ul>
	</div>	
	<!--end sprachauswahl -->

	
	
<!--start titelbereich -->
	<div id="Schatten"></div>
	
 	<div id="box1">
	<h1>Alpen im Val Cama: zwischen Zerfall und Wiederbelebung</h1>
	</div>
<!--end titelbereich -->	
	
	<!-- start content -->
	<div id="contentarea">
	<div id="box2">
	
	<p><a name="Durch">Durch</a> sanfte angepasste Restaurierung soll der Zerfall der alten Alpgeb&auml;ude gestoppt werden.	<br /> Das <a style="text-decoration:none; font-weight:bold; color: #887869" href="projekt_de.html">Landschaftsentwicklungskonzept</a> des Val Cama sieht vor, dass die ehemaligen Alpgeb&auml;ude nach und nach renoviert werden und dann als Unterkunft dem Wanderer zur Verf&uuml;gung stehen.</p>
 <p>Ein Beispiel f&uuml;r den gelungenen Wiederaufbau ist die <a href="#Albion" style="text-decoration: none; color:#6F6256">Alp d'Albion</a> (1600 m). Sie wurde Dank dem Einsatz der Gemeinde Verdabbio und vieler freiwilliger Helfer als besonders sch&ouml;ne und komfortable Schutzh&uuml;tte hergerichtet. Die Er&ouml;ffnung der <a href="#Vec" style="text-decoration: none; color:#6F6256">Alp Vec</a> (1794 m) steht bald bevor und wird dann auch dem Wanderer als Unterkunft dienen.</p>
	 
	<h2 class="marrone">Die Alpgeb&auml;ude im Val Cama im Überblick:</h2>
	

	

	<h5 style="padding-top:4px">Alp de Besarden (970 m)</h5>
	<div class="alpwirtschaft"><img src="images/besarden.jpg" width="200" height="170" alt="besarden" /></div>
	Das ehemalige Alpgeb&auml;ude liegt direkt auf dem Weg zum Cama Bergsee. 
	Es steht dem Wanderer offen als einfache Notunterkunft.
	<p>Die Alpfl&auml;chen sind stark eingewachsen, nur im Bereich der Alpgeb&auml;ude noch offen.</p>
	<h3>Wanderung</h3> 
	<p>Wanderung zum Cama Bergsee. Siehe <a style="color:#f23311" href="alpinismus_de.html">Wandern &amp; Bergsteigen</a></p>
	<p style="clear:left">&nbsp;</p>
	
	<h5>Alp de Lumegn (1276 m)</h5>
	<div class="alpwirtschaft"><img src="images/lumegn2.jpg" width="200" height="170" alt="lumegn" /></div>
	Das renovierte Alpgeb&auml;ude liegt im Val Cama Kessel unweit vom Cama-Bergsee. 
	F&uuml;r die H&uuml;tte vergibt "Pro Val Cama" den Schl&uuml;ssel an Wanderer. 
	Mehr info zur <a style="color:#f23311" href="unterkunft_de.html">Unterkunft</a>.
	<p>Im Kessel weiden Ziegen und K&uuml;he, was nicht nur unseren kleineren Besuchern viel Freude macht.</p>
	<h3>Vorschl&auml;ge zum Wandern:</h3> 
	<p>Über die Bocchetta del Notar ins Val Bodengo, verschiedene Gipfelm&ouml;glichkeiten usw.; siehe <a style="color:#f23311" href="alpinismus_de.html">Wandern &amp; Bergsteigen</a></p>
	<p style="clear:left">&nbsp;</p>
	
	
	<h5>Alp d&rsquo;<a name="Albion">Albion</a> (1600 m)</h5>
	<div class="alpwirtschaft">
	<a href="albion_de.html" onclick="window.open('albion_de.html', 'Popup', 'width=900, height=700, left=200, top=100'); return false;">
	<img src="images/albion_schnee.jpg" width="200" height="170" alt="albion" style="border:none" /></a></div>
	Sie liegt &uuml;ber dem Cama Bergsee in 1600 m H&ouml;he auf dem Wanderweg zum Sambrog Bergsee. Dank dem Einsatz 
	der Gemeinde Verdabbio und vieler freiwilliger Helfer wurde die Alp d`Albion als besonders sch&ouml;ne und 
	komfortable <a style="color:#f23311" href="unterkunft_de.html">Unterkunft</a> hergerichtet.
	Bilder zum Wiederaufbau  <a style="color:#f23311" href="albion_de.html" target="_blank">hier.</a>
	<p>Die noch offenen Weiden werden mit Schafen und Eseln beweidet.</p>
	<h3>Vorschl&auml;ge zum Wandern:</h3> 
	<p>Sambrog Bergsee, Überschreitung ins Val D'Arbola usw.; siehe <a style="color:#f23311" href="alpinismus_de.html">
	Wandern &amp; Bergsteigen</a></p>
	<p style="clear:left">&nbsp;</p>

 
	<h5>Alp<a name="Vec"> Vec</a> (1794 m)</h5>
	<div class="alpwirtschaft">
	<a href="alpvec.html" onclick="window.open('alpvec.html', 'Popup', 'width=400, height=400, left=200, top=100'); return false;">
	<img src="images/vec2.jpg" width="200" height="170" alt="vec" style="border:none" /></a></div>
	Sie liegt oberhalb der Alp d'Albion auf 1794 m H&ouml;he. Der Wanderweg f&uuml;hrt von dort weiter zum Sambrog Bergsee. 
	Die Alp wird mit viel freiwilligem Engagement und Unterst&uuml;tzung der Gemeinde Verdabbio hergerichtet 
	<a style="color:#f23311" href="alpvec.html">(siehe Bilder).</a> Nach der Er&ouml;ffnung, voraussichtlich im Jahr 2007 oder 2008,
	 steht sie dem Wanderer als Unterkunft offen.
	<p>Im Kessel der Alp Vec weiden gen&uuml;gsamen Engadiner Schafe, eine alte Rasse.</p>
	<h3>Vorschl&auml;ge zum Wandern:</h3> 
	<p>Sambrog Bergsee, Überschreitung ins Val D'Arbola usw.; siehe <a style="color:#f23311" href="alpinismus_de.html">
	Wandern &amp; Bergsteigen</a></p>
	<p style="clear:left">&nbsp;</p>
	
	
	<h5>Alp de Sambrog (1993 m)</h5>
	<div class="alpwirtschaft"><img src="images/sambrog2.jpg" width="200" height="170" alt="sambrog" /></div>
	Die Alp liegt &uuml;ber der Waldgrenze auf 1993 m H&ouml;he. Von hier aus erreicht man in ca. 
	15 Minuten den malerischen Sambrog Bergsee (2076 m). Das Geb&auml;ude steht als Notunterkunft offen.
	 Es sch&uuml;tzt lediglich vor schlechtem Wetter und bietet keinerlei Komfort.
	<br />Es ist geplant, die wundersch&ouml;ne Alp zu restrukturieren und touristisch zu nutzen.
	<p>Die Alpfl&auml;chen sind Heute vorwiegend unternutzt.</p>
	<h3>Vorschl&auml;ge zum Wandern:</h3> 
	<p>Sambrog Bergsee, Piz de Sambrog, Überschreitung ins Val d'Arbola usw.; 
	siehe <a style="color:#f23311" href="alpinismus_de.html">Wandern &amp; Bergsteigen</a></p> 
	<p style="clear:left">&nbsp;</p>
	
	
	<h5>Alp Broieta (1935 m)</h5>
	<div class="alpwirtschaft"><img src="images/broieta.jpg" width="200" height="170" alt="broieta" /></div>
	Aufgrund ihrer Abgelegenheit wurde die Alp schon fr&uuml;h aufgegeben. 
	Sie ist ge&ouml;ffnet und bietet dem Wanderer lediglich Schutz vor schlechtem Wetter.
		<h3 style="padding-top: 10px">Wanderung:</h3> 
	<p>Nur erfahrenen Bergg&auml;ngern empfohlen. 
	Siehe <a style="color:#f23311" href="alpinismus_de.html">Wandern &amp; Bergsteigen</a></p>
	<p style="clear:left">&nbsp;</p>
	
	
	
	<h5>Alp Vazzola (1804 m)</h5>
	<div class="alpwirtschaft"><img src="images/vazzola1.jpg" width="200" height="170" alt="vazzola" /></div>
	Die Alp erreicht man vom Cama Bergsee aus nach einem steilen Aufstieg durch den Wald.
	 Das ehemalige Alpgeb&auml;ude dient heute dem Wanderer als einfache Schutzh&uuml;tte. 
	 Mehr Info zur <a style="color:#f23311" href="unterkunft_de.html">Unterkunft.</a>
	
	<p>Der gr&ouml;ßte Teil der Weidefl&auml;che ist verloren gegangen. Heute weiden noch Schafe auf der Alp Vazzola.</p>
	<h3>Vorschl&auml;ge zum Wandern:</h3> 
	<p>Überschreitung ins Val Leggia (&uuml;ber den Passo del Segnale di Vazzola) usw.; siehe <a style="color:#f23311" href="alpinismus_de.html">Wandern &amp; Bergsteigen</a></p>
	<p style="clear:left">&nbsp;</p>
	
	
	<h5>Alp d&rsquo;Agnon (1905 m)</h5>
	<div class="alpwirtschaft"><img src="images/agnon2.jpg" width="200" height="170" alt="agnon" /></div>
	Die Alp liegt auf 1905 m H&ouml;he und wird normalerweise &uuml;ber die Alp de Vazzola erreicht. 
	Die direkteste Route von den oberen Weiden der Alp de Lumegn ist dem normalen Wanderer abzuraten.
	 Das kleine Alpgeb&auml;ude ist offen und bietet dem Wanderer lediglich Schutz vor schlechtem Wetter.
	
		<p>Durch die nordexponierte Lage der Weidefl&auml;chen bleibt das Futter l&auml;nger frisch.
		 Einst soll die Butter der Alp d'Agnon von bester Qualit&auml;t gewesen sein. Die Alp
		  wird Heute noch mit Schafen bestossen.</p>
	<h3>Vorschl&auml;ge zum Wandern:</h3> 
	<p>Siehe <a style="color:#f23311" href="alpinismus_de.html">Wandern &amp; Bergsteigen</a></p>
	
	<p><a href="#Durch" style="text-decoration: none">
<span style="color:#f32211">&raquo; &raquo; nach oben</span></a></p>

	

	
	 </div>
	 </div>

	<!--end content-->
	
	<!--start seitenbalken-->

	
	<div id="box3">
	<ul>
	<li style="color: #887869; font-weight: bold; list-style-type:none; padding-bottom: 6px">Wandern im Val Cama</li>
	<li class="testo"><span class="farbe"><a href="alpinismus_de.html" title="wandern" target="_blank">
	Wandern &amp; Bergsteigen</a></span></li>
	</ul>
	<ul>
	<li style="color: #887869; font-weight: bold; list-style-type:none; padding-bottom: 6px">Standort der H&uuml;tten</li>
	<li class="testo"><span class="farbe"><a href="pernottamenti_map.html" title="map" target="_blank">
	Lageplan der Sch&uuml;tzh&uuml;tten</a></span></li>
	<li class="testo"><span class="farbe"><a href="unterkunft_de.html">Unterk&uuml;nfte des Val Camas</a></span></li>
	</ul>
	</div>


</body>
</html>


und hier der css text:
body {
	margin: 0;
	padding: 0;
	font: 80%  Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background: transparent none no-repeat;
	width: 100%;
	overflow: hidden;
}


	
/*Main-Navigation*/

 #navcontainer li a:link, #navcontainer li a:visited, #navcontainer li a:hover, #navcontainer li.on {
	background-image: url(../images/hor_linie_rot1.jpg);
}

 
#navcontainer {
	position: absolute;
	top: 230px;
	left: 10px;
	width: 195px;
	text-align: left;
	margin-left: 12px;
	margin-right: 0;
	padding-bottom: 2px;
}

#navcontainer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navcontainer li a:link, #navcontainer li a:visited {
	display: block;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 5px;
	padding-top: 5px;
	color: #6F6256;
	background-position: bottom left;
	background-repeat: no-repeat;
}


#navcontainer li a:hover {
	color: #C4C4C4;
	background-repeat: no-repeat;
}


#navcontainer li.on {
	list-style-type: disc;
	color: #F23311;
	font-weight: bold;
	font-size: 11px;
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 5px;
	padding-top: 5px;
}



/*Main-Navigation Ebene 2*/


#navcontainer ul li.on2 {
	list-style-type: disc;
	color: #F23311;
	font-weight: bold;
	font-size: 11px;
	padding-bottom: 2px;
	padding-top: 2px;
	background-image:none;
}

#navcontainer ul li.on2 ul li a:link, #navcontainer ul li.on2 ul li a:visited {
	font-weight: normal;
	display: block;
	text-decoration: none;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-top: 2px;
	color: #6F6256;
	background-image:none;
}

#navcontainer ul li.on2 ul li a:hover {
		color: #C4C4C4;
		font-weight: normal;
		background-image:none;
}
	

#navcontainer ul li.on2 ul li.on3 {
	font-weight: normal;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-top: 2px;
	color: #6F6256;
	background-image:none;
}



/*Top-Navigation*/


#topnavi ul {
	position: absolute;
	top : 170px;
	left: 236px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 0;
}

#topnavi li {
	display: inline;
	font-weight: bold;
	font-size: 11px;	
}
 
#topnavi li a:link, #topnavi li a:visited {
	text-decoration: none;
	border-left: 2px solid #F23311;
	padding: 3px 6px;
	color: #6F6256;
}

#topnavi li a.erste {
	border-left: none;
}

#topnavi li a:hover {
	color: #F23311;
}

/*End Top-Navigation*/


/*Sprachauswahl*/
#language ul {
	position: absolute;
	top : 195px;
	left: 850px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 0;
}

#language li {
	display: inline;
	padding: 3px 3px;
	border-left: 1px solid #F23311;
	font-size: 11px;	
}
 
#language li a:link, #language li a:visited {
	text-decoration: none;
	color: #6F6256;
}

#language li a:hover {
	color: #F23311;
}


/*Inhalt*/

#Schatten {
	padding: 0;
	margin: 0;
	position: absolute;
	width: 21px;
	top: 0;
	left: 1016px;
	height: 100%;
	background: url(../images/schatten_verlauf.jpg) repeat-y top left white; 
}


#box1 h1 {
	position: absolute;
	top: 230px;
	left: 250px;
	margin: 0;
	padding-bottom: 20px;
	text-align: left;
}


#contentarea {
	overflow: auto;
	font-size: 11px;
	color: #6F6256;
	position: absolute;
	top: 265px;
	left: 250px;
	width: 766px;
	height: 350px;
	padding-bottom: 10px;
}
	

#box2 {
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6F6256;
	width: 560px;
	float: left;
	text-align: left;
}

#lagocama img {
	float: left;
	margin: 3px;
}


.alpwirtschaft img {
	float: left;
	margin-right: 5px;
	padding-right: 5px;
}


table {
	padding: 4px;

} 

captation {
	font-weight: bold;
	margin-left: 15px;

}

th {
	padding-right: 8px;
	padding-bottom: 6px;
}

td {
	padding-right: 8px;
	padding-bottom: 6px;
}
	

.cl {
	clear: left;
}


.bilder {
	float: left;
	text-align: left;
	margin: 15px;
}	

.lista {
	list-style-type:none;
	color:#6F6256;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 2px;
	margin-left: 0;
}

#lista_posizione {
	display:inline;
	padding: 0;
	margin: 0;
}

h1 {
	color: #F23311;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 10px;
}

h2 {
	font-weight: bold;
	font-size: 14px;
}



h3 {
	color: #6F6256;
	font-weight: bold;
	font-size: 11px;
	padding: 0;
	margin:0;
}

h4 {
	color: #9EC2E3;
	font-weight: bold;
	font-size: 14px;
	padding-bottom: 20px;
	margin:0;
}

h5 {
	color: #6F6256;
	font-weight: bold;
	font-size: 12px;
	padding-bottom: 10px;
	margin: 0;
}	



.marrone {
	color: #EDC702;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}

.verdone {
	color: #D4ED2F;
	font-weight: bold;
	font-size:12px;
	padding-top: 6px;
}

.rosa {
	color:#DD9F7B;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}	

.blu {
	color: #7FB1DF;
	font-weight: bold;
	font-size: 12px;
	padding-top: 10px;
}

#blu2 {
	color: #AAC2C7;
	font-weight: bold;
	font-size: 12px;
	padding-top: 20px;
}






/*Seitenspalte*/
		

#box3 {
	text-align: left;
	font-size: 11px;
	float: right;
	position: absolute;
	top: 265px;
	left: 850px;
	margin-left: 0;
	width: 150px;	
}


ul {
	list-style-type: disc;
	color: #F23311;
	display: inline;
	text-decoration: none;
	text-align: left;
}

.testo {
	padding-bottom: 8px;
}



.farbe {
	color: #6F6256;
} 

.testo a {
	text-decoration: none;
	color: #6F6256;
}


hilft dir das....

danke vielmals

saluti

trudi

31.01.2007 11:01

4 Jörg Kruse

Du hast die Listenpunkte mit display:inline eingerückt, ich würde dies stattdessen mit margin-left und margin-left machen. Damit dann auch die roten Punkte zu sehen sind, sollte die umgebende Box vergrößert und entsprechend nach links verschoben werden. Hiermit kommt auch der IE klar:

#box3 {
text-align: left;
font-size: 11px;
float: right;
position: absolute;
top: 265px;
left: 830px;
margin-left: 0;
width: 170px;
}

ul {
list-style-type: disc;
color: #F23311;
/*display: inline;*/
margin-left:0;
padding-left:20px;
text-decoration: none;
text-align: left;
}

31.01.2007 13:22 | geändert: 31.01.2007 13:24

5 trudi

danke schön, stimmt. sorry wenn ich mit so banale einzelpunkte komme....

noch einen punkt.
bei der hauptnavigation (navcontainer), sollte es auch wenn man in einen bestimmten menu drin ist, dies rot erscheinen und auch einen disc auf der seite erscheinen (in firefox geht dies ganz gut). in IE macht es nur rot aber kein disc...wieso....


und noch was....kann man nichts machen dass ein paragraph mit <p></p> andere abstände verursacht in firefox und in IE?


danke schön

saluti

trudi

31.01.2007 14:14

6 Jörg Kruse

bei der hauptnavigation (navcontainer), sollte es auch wenn man in einen bestimmten menu drin ist, dies rot erscheinen und auch einen disc auf der seite erscheinen (in firefox geht dies ganz gut). in IE macht es nur rot aber kein disc...wieso....

... weil der Punkt wegen des margin:0 und padding:0 von #navcontainer ul außerhalb von #navcontainer liegt (das wird sichtbar, wenn dem Container testweise eine border zugewiesen wird). Statt margin-left für #navcontainer, könntest du besser ein padding-left benutzen - und wenn dies nicht ausreicht, den padding Wert noch erhöhen und den Container weiter nach links verschieben

#navcontainer {
position: absolute;
top: 230px;
left: 6px;
width: 195px;
text-align: left;
margin-left:0;
padding-left: 16px;
margin-right: 0;
padding-bottom: 2px;
}

kann man nichts machen dass ein paragraph mit <p></p> andere abstände verursacht in firefox und in IE?

Du kannst die Werte für padding und margin explizit festlegen, dann haben die Browser dort keinen Interpretationsspielraum mehr.

31.01.2007 15:07 | geändert: 31.01.2007 15:09

7 trudi

danke schön hat gut geklappt!!!!


grazie e saluti

trudi

31.01.2007 15:41

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]