Zur Navigation

positionierung in firefox und internet explorer

1 trudi

hallo,
ich komme wieder mit einem problem und zwar: ich hab verschiedene div boxen mit position absolute genau positioniert auf meiner webseite. nur mit firefox und IE kriege ich 2 verschiedene resultate der positionierung (bissel verschoben ). gibt es eine lösung dass beide firefox und IE die verschidene box elemente genau am selben platz auf der seite anzeigen?
vielen dank für jeden hinweis
saluti

trudi

08.01.2007 10:49

2 Jörg

Hallo trudi,

im Normalfall sollten IE und Firefox absolut positionierte Divs an der gleichen Stelle anzeigen. Inwiefern sind die divs verschoben: in Relation zum Fensterrand oder zu anderen Elementen? Um mehr zu dem Problem sagen zu können, müsste man aber den relevanten CSS- und HTML-Quelltext kennen

08.01.2007 11:31 | geändert: 08.01.2007 11:32

3 trudi

hallo,
ich denke im relation zum fensterrand...

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

h1 {
	color: #F23311;
	font-weight: bold;
	font-size: 20px;
}


#verdone {
	color: #D4ED2F;
	font-weight: bold;
	font-size:12px;
}

#blu {
	color: #AAC2C7;
	font-weight: bold;
	font-size: 12px;
}

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


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

.testo {
	padding-bottom: 8px;
}



.farbe {
	color: black;
} 

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




	
/*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;
	background-repeat: no-repeat;
	background-position: bottom left;
}

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


/*Top-Navigation*/


#topnavi ul {
	position: absolute;
	top : 170px;
	left: 236px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	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: #887869;
}

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

#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: #887869;
	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: #000000;
	width: 560px;
	float: left;
	text-align: left;
}

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


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;
	margin: 15px;
}	
		

#box3 {
	text-align: left;
	float: right;
	position: absolute;
	top: 0px;
	left: 560px;	
}


und der html code:
<!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_it.html">Attualit&agrave </a></li>
	<li><a href="anreise_it.html">Dove si trova </a></li>
	<li class="on">Cenni storici </li>
	<li><a href="projekt_it.html">Progetto di sviluppo </a></li>
	<li><a href="alpwirtschaft_it.html">Economia alpestre </a></li>
	<li><a href="natura_it.html" >Natura &amp; paesaggio </a></li>
	<li><a href="seen_it.html">Laghetti alpini </a></li>
	<li><a href="bergsteigen_it.html">Escursioni &amp; Alpinismo </a></li>
	<li><a href="unterkuft_it.html">Vitto &amp; Alloggio </a></li>
	</ul>
	</div>
	<!--end navigation -->
   
	<!-- start top navigation -->
	<div id="topnavi">
	<ul>
	<li><a href="index_it.html" class="erste">Home </a></li>
	<li><a href="kontakt_it.html">Contatto </a></li>
	<li><a href="impressum_it.html">Impressum </a></li>
	</ul>
	</div>	
	<!--end topnavigation -->
	
	<!-- start sprachwahl -->
	<div id="language">
	<ul>
	<li><a href="index_de.html">Deutsch </a></li>
	<li><a href="index_it.html">Italiano </a></li>
	</ul>
	</div>	
	<!--end sprachauswahl -->

	
	
<!--start titelbereich -->
	<div id="Schatten"></div>
	
 	<div id="box1">
	<h1>Cenni storici</h1>
	</div>
<!--end titelbereich -->	
	
	<!-- start content -->
	<div id="contentarea">
	<div id="box2">
	<h2 id="verdone">Le prime notizie storiche della Val Cama - 1384</h2>
	<p>I comuni di Cama e di Verdabbio furono a lungo in contrasto per il possesso dei territori della Val Cama. 
	Si giunse ad un accordo solo nel 1384 quando venne firmata una convenzione secondo cui Cama cedette a Verdabbio 
	parte della Val Cama (circa 2,7 km&sup2; di terreno) in cambio di vigneti e campi preziosi situati sul fondovalle mesolcinese. 
	I buoni rapporti durarono solo 250 anni, poi nel seicento e nel settecento le controversie per i confini 
	territoriali ripresero con vigore. Ma a parte piccole modifiche di confine, la situazione stabilita 
	il 1384 non venne cambiata.</p>
	<h2 id="verdone">La presenza e l&rsquo;attivit&agrave; dell&rsquo;uomo in Val Cama nel passato</h2>
	<p>La presenza e l&rsquo;attivit&agrave; dell&rsquo;uomo in montagna sono documentate dalle costruzioni ormai 
	in parte abbandonate che marcano tutto il territorio della Val Cama. Sappiamo che già nel 1577 un mastro Nicolao 
	da Valdort ha costruito una cascina con l&rsquo;aiuto dei suoi fratelli al piano del lago. Sappiamo anche che 
	un&rsquo;altra cascina venne costruita verso la met&agrave; del 1700 sull&rsquo;alpe di Broietta dagli abitanti di Verdabbio.</p>
	<p>Si cercava di sfruttare tutto il possibile.</p>
	<ul>
	<li class="testo"><span class="farbe"><em>Boschi</em>: I documenti dell&rsquo;archivio ci parlano della 
	vendita di legname dei boschi di Val Cama nel 1504 il cui ricavato &egrave; servito, molto probabilmente,
	 per la costruzione del ponte in pietra sopra la Moesa, andato distrutto con l&rsquo;alluvione del 1978.</span></li>
	 <li class="testo"><span class="farbe"><em>Genziana</em>: Il comune di Cama appalt&ograve; l&rsquo;estrazione 
	 delle radici di genziana ad un distillatore professionista che tra il 1862 e il 1865 ottenne il permesso all&rsquo;esercizio 
	  della sua arte di distillatore.</span></li>
	  <li class="testo"><span class="farbe"><em>Resina</em>: Nel 1862 lo stesso comune, appalt&ograve; per 20 franchi
	   il bosco di Besarden per &quot;cavar resina&quot;. La resina veniva poi venduta ai bottai, ai cordai e ai farmacisti.</span></li>
	<li class="testo"><span class="farbe"><em>Carbone</em>: Nel 19. secolo si sfruttava tutto, 
	persino il &quot;legno morto&quot;, quello portato a valle dalle valanghe. Era iniziata la trasformazione 
	del legname in carbone, combustibile indispensabile per la produzione di energia industriale. Ancora oggi, 
	passeggiando per la Val Cama, si incontrano spesso delle piccole piazzuole in luoghi impossibili. 
	Sono le carbonaie, il luogo dove veniva accatastato il legname per essere carbonizzato.</span></li>	 
	 </ul>
	 <p>fonte: Dante Peduzzi
	 </div>



	
	<div id="box3">
	<ul>
	<li class="testo"><span class="farbe"><a href="http://verdabbio.moesano.ch/" title="Verdabbio" target="_blank">
	Comune di Verdabbio</a></span></li>
	<li class="testo"><span class="farbe">Comune di Cama</span></li>
	</ul>
	</div>
	</div>


	<!--end content-->
	
</body>
</html>


der topnavi bereich und der sprachauswahl bereich rutschne wenn ich die seite in IE anschaue bisschen nach oben...

ich weiss nicht ob es dir dies hilft...

ciao trudi

08.01.2007 11:38

4 Jörg

ich denke im relation zum fensterrand...

Der liegt so weit darüber, das ich das optisch schlecht abschätzen kann - aber vielleicht liegt das am bei mir fehlenden Hintergrundbild

Vielleicht hilft es, wenn du dem Innen- und Außenabstand des body feste Werte zuweist:

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

Dann haben die Browser dort keinen Interpretationsspielraum mehr. (Anstelle von 0 kannst du dort natürlich auch andere Werte wählen)

08.01.2007 12:05

5 trudi

leider hat dies nichts gebracht ...vieleicht verstehst du es besser wenn du es mit hintergrundbild siehst...

Hab dir eine test version gemacht


http://www.alpdelagh.net/index_test.html

sollte funktionieren

saluti

trudi

08.01.2007 12:24

6 Jörg

Jetzt lässt es sich erkennen ;)

Die Navigationsliste benötigt auch noch die Angabe eines festen Wertes für den oberen Außenabstand:

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

... damit die Browser diesen einheitlich interpretieren. Die Topnavi sollte sich dann überall auf gleicher Höhe befinden

08.01.2007 12:35 | geändert: 08.01.2007 12:35

7 trudi

hallo jörg,

vielen vielen dank!!!!!!es hat geklappt!

08.01.2007 13:03

... 5 Jahre und 2 Monate später ...

8 Wim_TheRun (Gast)

Hallo, ich habe einen solchen Formatierungsfehler auf "http://www.apple.com/de/why-mac/better-hardware/" gesehen, Unten bei dem Text "Umweltschutz wird groß-geschrieben." im Firefox geht die Überschrift in den Text rein. im IE ist es sauber formatiert.
kann das einer bestätigen ?
gruß
Wim_TheRun

03.04.2012 08:13

9 Jörg

Ein Formatierungsfehler liegt da wohl nicht vor - Firefox trennt das Wort "groß-geschrieben" nicht automatisch, wie andere Browser, dadurch wird die Zeile bei dir möglicherweise zu lang. In meinem Firefox passt sie allerdings noch, hast du in deinem Firefox eine größere Schriftgröße eingestellt?

03.04.2012 08:48 | geändert: 03.04.2012 08:49

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]