Zur Navigation

Positionierungsunterschiede Firefox und Internet Explorer

1 trudi

hallo,

ich hab einen problem mit der seite www.spadinisa.ch
ich möchte wie man es in explorer sieht, dass der hauptnavi (hat eine dunklere hellblau farbe als hintergrund als der content) genau oben anfängt und nicht einen kleinen abstand von oben von content macht wie man es in firefox sieht. wie kann ich das lösen?

hier noch meinene css code:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

body {
font: 70%  Verdana, Arial, Helvetica, sans-serif;
color:#43125F;

text-align:center; 
background: url(../images/body_back.gif) repeat ;

}

a, a:link {
	text-decoration:none;
}

a:hover {
	color:#2b7687;
	text-decoration:underline;
}

#capopagina-navi a
#capopagina-navi a:link, 
#capopagina-navi a:hover  {
	color:#2b7687;
}


	
ul, ol {
	list-style-type:none;
	list-style-position:outside;
}

.clearer {
	display:block;
	clear:both;
	line-height:0;
	height:1px;
	font-size:0;
	visibility:hidden;
}

.clear {
	clear:both;
}


h1 {
	font: bold 16px arial, helvetica, verdana, sans-serif;
}

h2 {
	margin:1.5em 0 1.5em 13px;
	font: bold 1.2em/1 arial, helvetica, verdana, sans-serif;
	color:#2b7687;
}

h3 {
	font: bold 1.6em/1.5 arial, helvetica, verdana, sans-serif;
	color:#2b7687;
}

h4 {
	font: bold 1.3em/1.5 arial, helvetica, verdana, sans-serif;
	color:#2b7687;
}


/*	Struttura della pagina web ************************************/

#pagina {
	margin:20px auto;
	width:989px;
	border:2px solid #DF2111;
	text-align:left;
	background:#D8E5E7 url(../images/bg_website.gif) repeat-y;
}


#capopagina {
	position:relative;
	height:100px;
	background:#ffffff;
	border-bottom:1px solid #DF2111
}

#meta {
	float:left;
	width:100%;
}

#meta #content {
	margin:0 187px 0 327px;
	height:340px;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
}

html>body #meta #content {
	height:auto;
	min-height:340px;
}

#content #testo {
	margin-left:20px;
	margin-top: 20px;
	margin-bottom:-1px;
	padding:0px;
	border:0px none;
}

#col-sinistra {
	position:relative;
	float:left;
	margin-left:-989px;
	padding-top:60px;
	width:327px;
	height:360;
	background-color:#9999FF;
}

html>body #col-sinistra {
	height:auto;
	min-height:360px;
}


#col-destra {
	float:left;
	margin-left:-187px;
	padding-top:60px;
	width:187px;
	background: url(../images/bg_rcol1.gif) no-repeat;
}


/*	width-Angabe fuer IE */
#footer {
	clear:both;
	float:left;
	width:100%;
	background: #D8E5E7 url(../images/bg_ftr1.gif) no-repeat ;
	border-top:1px solid #DF2111;
	text-align:center;
	height: 50px;
}


/*	capopagina*******/

#capopagina-navi {
	position:absolute;
	top:70px;
	left:755px;
	color:#2b7687;
}
#capopagina-navi li {
	display: inline;
	padding: 3px 6px;
	font-size: 11px;
	color:#2b7687;	
}

#logo {
	display:inline;
	position: absolute;
	top: 5px;
	left: 0px;
	width:327px;
	height: 40px;
	background:#ffffff;
}
#titolo {

	position: absolute;
	top: 30px;
	left:390px;
	width:473px;
	height: 40px;
	background:#ffffff;
}

.farbe {
	color:#43125F;
	}
	
/*	Navigation *****************************************************************
*******************************************************************************/
#hauptnavi {
	margin: 0px;
	width:473px;
	height: 39px;
	background:#99ABCD;
	border-bottom:1px solid #DF2111;
}

#rot {background-color:#FC284C;
	}
	
#orange {background-color:#FCA044;
	}
	
#gelb {background-color:#FFFF00;
	}
#grün {background-color:#00CC00;
	}
#blau {background-color:#0000FF;
	}


#hauptnavi li {
	display:inline;
	padding: 10px;
	border-right:2px solid #DF2111;
	font-size:12px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
	display:inline;
	text-decoration:none;
	color:#2b7687;
	padding: 5px 5px;
}

#hauptnavi li a:hover {
	text-decoration:none;
	background-color:#D8E5E7;
	padding:10px;
	
}




/*	col-sinistra***********/

#col-sinistra ul {
	display:inline;
	float:left;
	width:287px;
	margin:0 20px;
}

#col-sinistra ul li {
	clear:both;
	list-style:none;
}


/*	col-destra ******************************************************************
*******************************************************************************/
#col-destra p, 
#col-destra ul, 
#col-destra table {
	margin:0 7px 0 13px;
	padding-bottom:1em;
	font-size:1.1em;
	line-height:1.4em;
}

#col-destra ul li {
	background-image:url('lsi_arrow_blue.gif');
	background-repeat:no-repeat;
	background-position: 0% 50%;; padding-left:15px; padding-right:0; padding-top:5px; padding-bottom:5px;
}

#col-destra ul li a.current {
	font-weight:bold;
}

body #col-destra table {
	margin:0 7px 0 13px;
	width:160px;
	border-spacing:1x;
	border-collapse:collapse;
	font-size:1em;
}
#col-destra table td {
	padding:5px;
	background-color:#dcd8d1;
	border:1px solid #e6e3dc;
}

#col-destra p img.brd {
	border:1px solid #DF2111;
}


und der xhtml 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">




<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="impresa pittura" />
<meta name="Keywords" content="verniciature, intonaci, pittura, antonio spadini" />
<title>Spadini SA</title>
<link rel="stylesheet" type="text/css" href="styles/spadini.css" />

<script type="text/javascript">
</script>
	<style type="text/css">
			/*<![CDATA[*/
			#left-col {
				height:200px;
			}

			html>body #left-col {
				height:auto;
				min-height:200px;
			}
		
			/*]]>*/
		</style>
		
		

		


</head>

<body>


<div id="pagina">

<!-- start capopagina -->

<div id="capopagina">
	<div id="logo">
	 <a href="index.html" title="ritorno home"><img src="images/logo3.gif" height="95" width="327" border="none" alt="logo" /></a>    </div>

	<div id="titolo">
	<span style="font-size:30px; color:#DF2111; font-weight:bold">IMPRESA DI PITTURA</span>	</div>
	
	<div id="capopagina-navi">
		<ul>
		<li><span class="farbe"><a href="index.html">&raquo; &raquo; Home</a></li>
		<li><span class="farbe"><a href="index.html">&raquo; &raquo; Impressum</a></li>
		</ul>
	</div>
</div>
<!-- fine capopagina -->
	
<!-- start web -->	
	<div id="meta">
	<div id="content">
	
		<div id="hauptnavi">
		<ul>
		<li id="rot"><a href="impresa.html">Azienda</a></li>
		<li id="orange"><a href="servizi.html">Servizi</a></li>
		<li id="gelb"><a href="contatto.html">Contatto</a></li>
		<li id="grün"><a href="contatto.html">Foto</a></li>
		<li id="blau"><a href="contatto.html">Links</a></li>
		</ul>
	    </div>
	
		<div id="testo">
	 	<img  src="images/benvenuti.gif" alt="benvenuto"  />

		<p style="padding-bottom:10px">sul sito dell'impresa di pittura Spadini SA!</p>
	 	<p>La nostra impresa si tiene costantemente aggiornata sulle nuove tipologie di materiale e sistemi per la tinteggiatura di stabili grandi e piccoli, interni ed esterni e soprattutto molto attenta alla salute delle persone ed alla salvaguardia dell'ambiente.</p>
		<p>Non esitate a contattarci, siamo a vostra disposizione con compentenza e professionalità per qualsiasi esigenza.</p>
		</div>
	</div>
	</div>
<!-- fine web -->		
	
	<div id="col-sinistra" style="background-image:url('images/home1.jpg');">	</div>
	
	<div id="col-destra">
	<p>Spadini SA<br />
	Impresa pittura<br />
	CP 2544<br />
	6500 Bellinzona - Svizzera</p>
	<p>&nbsp;</p>
    <p><span style="font-size:10px">
     Ufficio: 091 835 48 66  <br />Natel: 079 445 48 26<br />
	 Fax: 091 835 48 67<br />
     antonio.spadini@spadinisa.ch</p></span>

     <div class="margin-b"></div>	
  </div>
	
	<!-- start piedipagina -->
	<div id="footer">
		<p>&nbsp;</p>
	<p> &copy; Copyright 2008: Spadini SA </p>
	</div>
<!-- fine piedipagina -->	




   <br class="clear" />


</div> 

<!--fine web -->

</body>
</html>

weisst du vieleicht woran es liegt? ich komme nicht weiter...

vielen dank für a tipp...

saluti trudi

11.04.2008 11:36

2 Jörg Kruse

Frag mich nicht warum ;) aber anscheinend tritt dieses Problem im Firefox nicht mehr auf, wenn das umschließende div auch oberhalb mit einer border versehen ist, z.B.:

#hauptnavi {
    margin: 0px;
    width:473px;
    height: 39px;
    background:#99ABCD;
    border-top:1px solid #DF2111;
    border-bottom:1px solid #DF2111;
}

11.04.2008 12:27 | geändert: 11.04.2008 12:28

3 trudi

ciao jörg,

danke für deinen tipp, komischerweise hüpft das hauptnavi nach oben... aber es passt noch nicht ganz, die untere rote border passt einfach noch nicht ganz mit den auf beiden seiten laufenden rote border überein...zumindest ziegen jetzt firefox und explorer der gleichen effekt...könnte man da noch was machen?

ich hab gedacht es hängt irgendwie mit den angeben von margin oder padding. aber ich hab ja margin 0px bei haupnavi angegeben...???

saluti trudi

11.04.2008 12:37

4 Jörg Kruse

die untere rote border passt einfach noch nicht ganz mit den auf beiden seiten laufenden rote border überein

Welche border meinst du damit (von welchem Element)?

11.04.2008 13:02

5 trudi

ciao jörg,

ich meine der unteren rote border vom hauptnavi (dunkleres hellblau) passt nicht ganz genau mit der unter rote linie von der col sinistra (auf der linke seite) (das ist einen bild wo ich eine rote linie gemalt habe, bild ist home1.jpg) und mit der rote border von col destra (auf der rechte seite von hauptnavi) (bg_rcol1.gif ). und am oberen rand vom hauptnavi sieht man dass es zwei rote linien jetzt gibt...

ich hoffe ich hab es genügend klar erklärt...

11.04.2008 13:54

6 Jörg Kruse

Durch die zusätzliche border oben gibt es natürlich eine Verschiebung auch nach unten hin. Kannst du das vielleicht anpassen, indem du die Höhe von #hauptnavi um einen Pixel verringerst?

und am oberen rand vom hauptnavi sieht man dass es zwei rote linien jetzt gibt...

Da könntest du vielleicht für top border die selbe Farbe wählen wie die des Hintergrundes von #hauptnavi?

11.04.2008 14:18

7 trudi

ciao jörg,

ja klar, wie dumm...musste bissel mehr den kopf laufen lassen...
jetzt hat man es gut weggetrickst und passt ganz gut, danke schön!!

wenn ich dich noch kurz noch was fragen kann:
bei der haupnavi:
wenn man schaut ist bei firefox alles schon zentriert, sowohl die schrift als auch die farbige kästchen.
bei IE hingegen ist die schrift ganz oben und die regenbogenfarbige box auch ganz oben. muss man noch irgendwie noch einen befehl geben...?? ich kenne aber nur text align ...aber das ist für die horizontale???

vieleicht hast du da noch eine idee...

hier noch der code css:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

body {
font: 70%  Verdana, Arial, Helvetica, sans-serif;
color:#43125F;

text-align:center; 
background: url(../images/body_back.gif) repeat ;

}

a, a:link {
	text-decoration:none;
	color:#43125F;
}

a:hover {
	color:#43125F;
	text-decoration:underline;
}

#capopagina-navi a
#capopagina-navi a:link, 
#capopagina-navi a:hover  {
	color:#43125F;
}


	
ul, ol {
	list-style-type:none;
	list-style-position:outside;
}

.clearer {
	display:block;
	clear:both;
	line-height:0;
	height:1px;
	font-size:0;
	visibility:hidden;
}

.clear {
	clear:both;
}




/*	Struttura della pagina web ************************************/

#pagina {
	margin:20px auto;
	width:989px;
	border:2px solid #DF2111;
	text-align:left;
	background:#D8E5E7 url(../images/bg_website.gif) repeat-y;
}


#capopagina {
	position:relative;
	height:100px;
	background:#ffffff;
	border-bottom:1px solid #DF2111
}

#meta {
	float:left;
	width:100%;
}

#meta #content {
	margin:0 187px 0 327px;
	height:340px;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
}

html>body #meta #content {
	height:auto;
	min-height:340px;
}

#content #testo {
	margin-left:20px;
	margin-top: 10px;
	margin-bottom:-1px;
	padding:0px;
	border:0px none;
}






/*	capopagina *****************************************************************
*******************************************************************************/

#capopagina-navi {
	position:absolute;
	top:70px;
	left:755px;
	color:#43125F;
}
#capopagina-navi li {
	display: inline;
	padding: 3px 6px;
	font-size: 11px;
	color:#43125F;	
}

#logo {
	display:inline;
	position: absolute;
	top: 5px;
	left: 0px;
	width:327px;
	height: 40px;
	background:#ffffff;
}

#titolo {
	position: absolute;
	top: 30px;
	left:390px;
	width:473px;
	height: 40px;
	background:#ffffff;
}


	
/*	Navigation *****************************************************************
*******************************************************************************/
#hauptnavi {
	margin: 0px;
	width:473px;
	height: 38px;
	background:#99ABCD;
	border-top:1px solid #99ABCD;
	border-bottom:1px solid #DF2111;
}

#rot {background-color:#FC284C;
	}
	
#orange {background-color:#FCA044;
	}
	
#gelb {background-color:#FFFF00;
	}
#grün {background-color:#00CC00;
	}
#blau {background-color:#0000FF;
	}


#hauptnavi li {
	display:inline;
	padding: 10px;
	border-right:2px solid #DF2111;
	font-size:12px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
	display:inline;
	text-decoration:none;
	color:#43125F;
	padding: 5px 5px;
}

#hauptnavi li a:hover {
	text-decoration:none;
	background-color:#D8E5E7;
	padding:10px;
	
}




/*	col-sinistra******************************************************************
*******************************************************************************/
html>body #col-sinistra {
	height:auto;
	min-height:360px;
}



#col-sinistra {
	position:relative;
	float:left;
	margin-left:-989px;
	padding-top:60px;
	width:327px;
	height:360px;
	background-color:#D8E5E7;
}


#col-sinistra ul {
	display:inline;
	float:left;
	width:287px;
	margin:0 20px;
}

#col-sinistra ul li {
	clear:both;
	list-style:none;
}


/*	col-destra ******************************************************************
*******************************************************************************/
#col-destra {
	float:left;
	margin-left:-187px;
	padding-top:60px;
	width:187px;
	background: url(../images/bg_rcol1.gif) no-repeat;
}

#col-destra p, 
#col-destra ul, {
	padding-top: 10px;
	margin-left: 20px;
	padding-bottom:1em;
	line-height:1.4em;
}

#col-destra img {
	border: 1px solid #DF2111;
	}


/*	Content ********************************************************************
*******************************************************************************/


#box3 ul {
	list-style-type: disc;
	color: #DF2111;
	margin-left: 0;
	text-decoration: none;
	padding-bottom: 8px;
}






#content .margin-b {
	margin-bottom: 20px;
}




/*	Footer ********************************************************************
*******************************************************************************/

#footer {
	clear:both;
	float:left;
	width:100%;
	background: #D8E5E7 url(../images/bg_ftr1.gif) no-repeat ;
	border-top:1px solid #DF2111;
	text-align:center;
	height: 50px;
}


#footer p {
	font-size:10px;
}

grazie mille

saluti trudi

11.04.2008 14:38 | geändert: 11.04.2008 14:41

8 Jörg Kruse

Probier mal, den Listenelementen eine feste line-height in Höhe des divs zuzuordnen. Für die Liste selbst sollten dabei noch die vertikalen Abstände auf 0 gesetzt werden

#hauptnavi ul {
margin:0 40px;
padding:0;
}

#hauptnavi li {
    display:inline;
    padding: 10px;
    border-right:2px solid #DF2111;
    font-size:12px;
    line-height:38px;
}

11.04.2008 15:34

9 trudi

ciao jörg,

danke schön für deine hilfe, ja jetzt habe ich noch was gelernt, das mit der höhe angabe von li habe ich nicht gewusst. jetzt passt es gut.


wieso aber wenn ich 

#hauptnavi {
	margin: 0px;
	width:473px;
	height: 38px;
	background:#99ABCD;
	border-top:1px solid #99ABCD;
	border-bottom:1px solid #DF2111;
}

#rot {background-color:#FC284C;
	}
	
#orange {background-color:#FCA044;
	}
	
#gelb {background-color:#FFFF00;
	}
#grün {background-color:#00CC00;
	}
#blau {background-color:#0000FF;
	}

#hauptnavi ul {
margin:0 40px;
padding:0;
}


#hauptnavi li {
	display:inline;
	padding: 10px;
	border-right:2px solid #DF2111;
	font-size:12px;
	line-height: 38px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
	display:inline;
	text-decoration:none;
	color:#43125F;
	line-height: 38px;

}

#hauptnavi li a:hover {
	display:inline;
	text-decoration:none;
	background-color:#D8E5E7;
	padding: 10px;
	line-height:38px;	
}

haupnavi li und li a: hover gleich programmiert hab nur andere farbe bei a hover (praktisch möchte wenn maus drauf geht, wird farbige quadrat in hellblau), wird der hellblaue box von a hover nur halb so klein wie der ursprüngliche farbige box?

vieleicht hast noch zeit noch diese sachen zu schauen...

sonst schon nochmal vielen dank

saluti

trudi

11.04.2008 15:55

10 Jörg Kruse

Der Hover gilt nur für den Link - da das nicht gehoverte Elternelement (li) über ein padding verfügt, ist dort dessen Hintergrund zu sehen

Ich würde bei den Listenpunkten den horizontalen Innen-Abstand eliminieren und stattdessen einen Außenabstand (margin) einfügen. Zusätzlich sollten dann die normalen Links einen Innenabstand erhalten, wie ihn die Hover-Links bereits haben

#hauptnavi li {
    display:inline;
    padding: 10px 0;
    margin:0 10px;
    border-right:2px solid #DF2111;
    font-size:12px;
    line-height: 38px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
    display:inline;
    text-decoration:none;
    color:#43125F;
    line-height: 38px;
    padding: 10px;
}

#hauptnavi li a:hover {
    display:inline;
    text-decoration:none;
    background-color:#D8E5E7;
    padding: 10px;
    line-height:38px;   
}

11.04.2008 16:50 | geändert: 11.04.2008 16:52