• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Problem Firefox zeigt Seite anders an als IE

happy_kg

New member
Hallo,
ich arbeite seit ein paar tagen mit diesem Thema und habe da ein Problem.

Die Seite wird in Firefox nicht richtig angezeigt. Der Internet Explorer zeigt Sie aber richtig an.
Im Screenshots könnte ihr euch anschauen wie es aussieht.

Bin mir sicher das ich was vergessen habe. Bin echt Dankbar für eure Hilfe.
Wie gesagt arbeite ich noch nicht so lange mit dem Thema. Bin für Ratschläge offen.
Danke

Quellcode -----Anfang-------------

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Titel</title>
<link rel="stylesheet" href="css.css" media="screen">
<style type="text/css" media="screen">

</style>
</style>
</head>
<body>
<p>

</p>
<div id="container">
         <div id="mainnav" title="sitename">
         	<div id="skipmenu"></div>
		     <h1>Überschrift</h1>
         </div>
         <div id="header">
         	<img  src="img/header.jpg" alt="logo">
         </div>

         <div id="menu">
              	<h3>Menü</h3>

		<ul>
			<li><a href=#>Home</a></li>
                         <li><a href=#>Link 1</a></li>
                         <li><a href=#>Link 2</a></li>
			<li><a href=#>Link 3</a></li>
			<li><a href=#>Link 4</a></li>
                         <li><a href=#>Link 5</a></li>
                         <li><a href=#>Impressum</a></li>

		</ul>

         </div>

	<div id="contents">
         Text <br>
         <p></p>
         Text
         <p></p>
         Text
         <p></p>
         Text
         <p></p>
	Text

         </div>
	<div id="footer">
                <b>Copyright ©  2006</b>
         </div>
</div>
</body>
</html>
Quellcode -----Ende-------------

CSS----------Anfang------------

PHP:
/*##########################################
Name: 
Date: 
Description:
Author: 
URL: 


###########################################*/

	body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-color: #fff0f5;
	}

        a:link { color: #B52C07; }
	a:visited { color: #600; }

	a:hover, a:active
         {
		color: #fff000;
		background-color: #000000
	}

         #container
	{
		margin: 1em auto;
		width: 650px;
		height: 100px;
		text-align: left;
		background-color: #FF3E96;
		border: 1px solid black;
	}

         #mainnav
	{
                 height: 25px;
                 margin-top: 5px;
                 text-align: center;
                 font: normal 2.4em Verdana,sans-serif;
		 background-color: #FF3E96;
                 color: #FFFFFF
	}

         #header
	{
                 margin-left:5px;
                 background-color: #FF3E96;

	}

         #menu
	{
		float: left;
                margin-left:3px;
                width: 180px;
		background-color: #FFF0F5;
                padding:10px;
	}

         #menu ul
         {
         	margin: 0px;
                padding: 0px;
         }

         #menu li
	{
		list-style: none;
		padding: 0px;

	}

         #menu li a {

		color: #553;
                display: block;
		padding: 0px 0px 0px 15px;
		text-decoration: none;
	}

	#menu li a:hover {

		color: #553;
	}


         #contents
	{
		margin-left: 100px;
                margin-right: 15px;
		padding: 10px;
		font: normal 1.0em Verdana,sans-serif;
   		
		height: 370px;
		background-color: #FFF0F5;
	}

         #footer
	{
                 padding:3px;
                 clear: both;
		 height: 20px;
                 text-align: right;
                 margin-top:5px;

	}

CSS----------Anfang------------
 

Anhänge

  • Firefox.jpg
    Firefox.jpg
    20,1 KB · Aufrufe: 7
  • IE.jpg
    IE.jpg
    23,4 KB · Aufrufe: 8
Zuletzt bearbeitet von einem Moderator:
hallo,

dein #container hat eine Höhe von 100px... und genau das zeigt Firefox an...

wenn du #menu floatest, solltest du dem Container #contents auch ein float left geben,
dann wird er mit einem margin-left von z.B. 10px richtig positioniert...
eine Breite solltest du ihm auch mitgeben, wenn du ihm ein float gibst...
btw: dass die Darstellung im IE so aussieht, wie du sie haben willst, heißt noch lange
nicht, dass IE es "richtig" anzeigt...

planet4.
 
Zurück
Oben