✔ Probleme bei der Darstellung im Firefox

Status
Nicht offen für weitere Antworten.
SnEaKy

SnEaKy

Erfahrenes Mitglied
Hallo!
Ich habe mir ein Layout mit CSS gebastel. Im Internet-Explorer von Microsoft wird es auch richtig angezeigt, nur der Mozilla Firefox mach das etwas kaputt. Vielleicht habt ihr eine Idee wie es funktionieren könnte.
index.html:
HTML: 
<html>
<head>
<title>Layout 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="fixed.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<div class="head">&Uuml;berschrift<br><div class="subhead">Untertitel</div></div>
<div class="body">
	<div class="content">Dieser Text dient als Test f&uuml;r den Seiteninhalt<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
	<div class="menu" align="right">
		<div class="menuitem" onMouseover="onMouseOver(this)" onMouseout="onMouseOut(this)" onclick="changeURL('./test.html')">MenuItem 1</div>
		<div class="menuitem" onMouseover="onMouseOver(this)" onMouseout="onMouseOut(this)" onclick="changeURL('./test.html')">MenuItem 2</div>
		<div class="menuitem" onMouseover="onMouseOver(this)" onMouseout="onMouseOut(this)" onclick="changeURL('./tabelle.html')">Tabelle</div>
	</div>
</div>
<div class="foot">&copy 2008</div>

</body>
</html>
style.css
HTML: 
body{
	font-family: Verdana, sans-serif;
	margin: 0px 0px 0px 0px;
}

.head{
	font-size: 18pt;
	font-weight: bold;
	padding-left: 20px;
	padding-top: 10px;
	width: 100%;
}

.body{
	padding-top: 10px;
	padding-left: 5px;
	padding-bottom: 10px;
	width: 100%;
}

.foot{
	border-top:1px solid #000000;
	font-size: 8pt;
	padding-top: 2px;
	text-align: center;
}

.content{
	background-color: #ffe4b5;
	border: 1px dashed #808000;
	float:left;
	font-family: Arial;
	font-size: 11pt;
	color: #7C7C7C;
	padding: 5px 5px 5px 5px;
	width: 80%;
}

.menu{
	float: right;
	margin-left:5px;
	position: fixed; 
	width: 19%;
}

.menuitem{
	background-color: #87CEFA;
	font-size: 11pt;
	font-weight: bold;
	border: 1px solid #3399FF;
	margin: 4px 4px 4px 4px;
	padding: 3px 3px 3px 3px;
}

.subhead{
	font-size: 14pt;
	font-weight: normal;
	padding-bottom: 3px;
	padding-left: 20px;

}
 

Anhänge

  • FF.JPG
    FF.JPG
    38,7 KB · Aufrufe: 56
  • IE.JPG
    IE.JPG
    41,4 KB · Aufrufe: 45
Hi.
SnEaKy hat gesagt.:
Im Internet-Explorer von Microsoft wird es auch richtig angezeigt, nur der Mozilla Firefox mach das etwas kaputt.
Zum Vergrößern anklicken....
Soviel sei hier schon mal verraten: Firefox interpretiert das Stylesheet soweit vollkommen richtig, und der IE verweigert das CSS-Boxmodell, da du das Dokument den Browsern im Quirksmodus übergibst, und er sich in diesem Darstellungsmodus nicht regelkonform verhält.
 
Lies dir mal den verlinkten Artikel durch, wie sich die Breite und Höhe eines Elements im Boxmodell zusammensetzt, und vergleiche anschliessend dein Stylesheet.
 
SnEaKy hat gesagt.:
Okay. Aber wie muss es dann richtig sein?
Zum Vergrößern anklicken....
Beispielsweise so:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="fixed.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css">
<style type="text/css">
body{
        font-family: Verdana, sans-serif;
        margin: 0;
}

.head{
        font-size: 18pt;
        font-weight: bold;
        padding-left: 20px;
        padding-top: 10px;
        /*width: 100%;*/
}

.body{
        padding-top: 10px;
        padding-left: 5px;
        padding-bottom: 10px;
        /*width: 100%;*/
}

.foot{
        border-top:1px solid #000000;
        font-size: 8pt;
        padding-top: 2px;
        text-align: center;
        clear:left;
}

* html .foot { height:1%; }

.content{
        background-color: #ffe4b5;
        border: 1px dashed #808000;
        float:left;
        font-family: Arial;
        font-size: 11pt;
        color: #7C7C7C;
        width: 80%;
}

.content .padding {
        padding: 5px;
}

.menu{
        float: right;
        display:inline;
        margin-left:5px;
        position: fixed;
        width: 19%;
        right:0;
}

.menuitem{
        background-color: #87CEFA;
        font-size: 11pt;
        font-weight: bold;
        border: 1px solid #3399FF;
        margin: 4px 4px 4px 4px;
        padding: 3px 3px 3px 3px;
}

.subhead{
        font-size: 14pt;
        font-weight: normal;
        padding-bottom: 3px;
        padding-left: 20px;

}
</style>
</head>
<body>
<div class="head">Überschrift<br><div class="subhead">Untertitel</div></div>
<div class="body">
        <div class="content">
             <div class="padding">
                  Dieser Text dient als Test für den Seiteninhalt<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
             </div>
        </div>
        <div class="menu" align="right">
                <div class="menuitem" onMouseover="onMouseOver(this)" onMouseout="onMouseOut(this)" onclick="changeURL('./test.html')">MenuItem 1</div>
                <div class="menuitem" onMouseover="onMouseOver(this)" onMouseout="onMouseOut(this)" onclick="changeURL('./test.html')">MenuItem 2</div>
                <div class="menuitem" onMouseover="onMouseOver(this)" onMouseout="onMouseOut(this)" onclick="changeURL('./tabelle.html')">Tabelle</div>
        </div>
</div>
<div class="foot">&copy 2008</div>

</body>
</html>
 
Danke! Hatte es in der Zwischenzeit selbst hinbekommen. Sieht sogar ähnlich wie nun dein Quellcode.
Was aber heißt das " * html .foot { height:1%; }"?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück