Wird im FF anders angezeigt, als im IE....

Dominique

Hi ihr

ich bin grad dabei ne Homepage im Windows Editor zu schreiben. Jetzt komme ich nicht mehr weiter...

Wie mache ich das, dass die Homepage möglichst in allen Browsern gleich angezeigt wird?

HTML

<html>
<head>
<style type="text/css">


#foldheader{cursor:pointer; cursor:hand ; font-weight:bold ; font-family:Arial Narrow;}
#tabelle
  html {height:100%;}
  body {
    color: black; 
    background-color: #037EC4;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0px; 
    padding: 0px;
    text-align: center;  
  }


  div#Seite {
    text-align: left;    
    margin-top: 0px;      
    width: 100%;
    background: #037EC4;
    border: 0px;
  }

  div#Banner {
    background-color: #037EC4;
    margin: 0px ;
    scrolling: no;
  }

  div#Leiste {
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;  
  }


  a.button {
      font-family: Arial Narrow;
      font-size:15px;
      font-color: #000000;
      padding: 2px;
      margin-top: 2%;
      background-Color: #FFFFFF;
      border-left: 2px solid #000000;
      border-top: 2px solid #000000;
      border-right: 2px solid #000000;
      border-bottom: 2px solid #000000;
      text-decoration: none;
      width: 100px;
      height: 5%;
      text-align: left;
  }

  a.button:hover {
      Color: #000000;
      background-Color: #037EC4;
      border-left: 2px solid #000000;
      border-top: 2px solid #000000;
      border-right: 2px solid #000000;
      border-bottom: 2px solid #000000;
      text-decoration: none;
  }
  div#Navigation {
    margin-top: 20px;
    margin-right: 10px;
    marign-bottom: 10px;
    margin-left: 10px;
    background-color: #037EC4;
    float: left;
    width: 20%;
  }


    div#Hauptseite {
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
    min-height: 100%;


  }


</style>
</head>
<body>
	<div id="Seite">
		<div id="Banner">
		[img]logo.jpg[/img]
			<div id="Leiste">



				<div id="Navigation">


[url='Home.html']Home[/url]

[url='']Private Absicherung[/url]

[url='']Unsere Partner[/url]

[url='']Kontakt[/url]

[url='']Angaben gem. EU-Richtlinien[/url]

[url='']Impressum[/url]

				</div>
					<div id="Hauptseite">


						<iframe name="InFrame" width="100%" height="385px" frameborder="0" scrolling="auto" src="Home.html">


						</iframe>


					</div>
			</div>
		</div>
	</div>
</body>
</html>

Alles anzeigen

Das ist der Code bisher...

Grüßle Dominique

sejuma

Deine Seite braucht zunächst unbedingt einen Standard-Doctype, da sonst der IE 6 das CSS-Box-Modell nicht richtig interpretieren kann.

Wenn du in einzelnen Elementen dann noch

Code

float:left;

und gleichzeitig

Code

margin-left:

hast, dann tritt im IE der Double Float-Margin-Bug" auf. Um das zu verhindern, füge dem betreffenden Element ein

Code

display: inline;

hinzu. Siehe hier

Dominique

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>
<style type="text/css">


  html {height:100%;}
  a { color: #000000;}
  body {
    color: black; 
    background-color: #037EC4;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0px; 
    padding: 0px;
    text-align: center;  
  }


  div#Seite {
    text-align: left;    
    margin-top: 0px;      
    width: 100%;
    background: #037EC4;
    border: 0px;
  }

  div#Banner {
    background-color: #037EC4;
    margin: 0px ;
    scrolling: no;
  }

  div#Leiste {
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;  
  }


  a.button {
    font-family: Arial Narrow;
    font-size:15px;
    font-color: #000000;
    padding: 2px;
    margin-top: 2%;
    background-Color: #FFFFFF;
    border-left: 2px solid #000000;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    text-decoration: none;
    width: 100px;
    height: 5%;
    text-align: left;
  }

  a.button:hover {
    Color: #000000;
    background-Color: #037EC4;
    border-left: 2px solid #000000;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    text-decoration: none;
  }
  div#Navigation {
    margin-top: 20px;
    margin-right: 10px;
    marign-bottom: 10px;
    margin-left: 10px;
    background-color: #037EC4;
    float: left;
    width: 20%;
    display: inline; 


  }


    div#Hauptseite {
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
    min-height: 100%;


  }


</style>
</head>
<body>
	<div id="Seite">
		<div id="Banner">
		[img]logo.jpg[/img]
			<div id="Leiste">



				<div id="Navigation">


[url='Home.html']Home[/url]

[url='Home.html']Private Absicherung[/url]

[url='Home.html']Unsere Partner[/url]

[url='Home.html']Kontakt[/url]

[url='Home.html']Angaben gem. EU-Richtlinien[/url]

[url='Home.html']Impressum[/url]

				</div>
					<div id="Hauptseite">


						<iframe name="InFrame" width="100%" height="385px" frameborder="0" scrolling="auto" src="Home.html">


						</iframe>


					</div>
			</div>
		</div>
	</div>
</body>
</html>

Alles anzeigen

so sieht der code jetzt aus... leider sieht es immer noch nicht anders aus

sejuma

Schließ doch mal den Banner-Div nach dem img-Tag.
Welche Funktion hat der Div "Leiste"? Warum packst du da die Navi rein - ist doch eigentlich unnötig.
Achte darauf, dass die div's an der richtigen Stelle wieder geschlossen werden.
Der IE6 kann min- und max-Werte nicht interpretieren. Entweder verzichtest du darauf oder du musst einen "Workaround" einbauen.

Dominique

das ist der code jetzt:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
 <meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" />
<head>
<style type="text/css">


  html {height:100%;}
  a { color: #000000;}
  body {
    color: black; 
    background-color: #037EC4;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0px; 
    padding: 0px;
    text-align: center;  
  }


  div#Seite {
    text-align: left;    
    margin-top: 0px;      
    width: 100%;
    background: #037EC4;
    border: 0px;
  }

  div#Banner {
    background-color: #037EC4;
    margin: 0px ;
    scrolling: no;
  }

  div#Leiste {
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;  
  }


  a.button {
    font-family: Arial Narrow;
    font-size:15px;
    font-color: #000000;
    margin-top: 2%;
    margin-bottom: 2%;
    background-Color: #FFFFFF;
    border-left: 2px solid #000000;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    text-decoration: none;
    width: 100px;
    text-align: left;
  }

  a.button:hover {
    Color: #000000;
    background-Color: #037EC4;
    border-left: 2px solid #000000;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    text-decoration: bold;
  }
  div#Navigation {
    margin-top: 20px;
    margin-right: 10px;
    marign-bottom: 10px;
    margin-left: 20px;
    background-color: #037EC4;
    float: left;
    width: 15%;
    display: inline; 


  }


    div#Hauptseite {
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
    min-height: 100%;


  }


</style>
</head>
<body>
	<div id="Seite">
		<div id="Banner">
		[img]logo.jpg[/img]
		</div>
			<div id="Leiste">



			</div>
				<div id="Navigation">


[url='Home.html']Home[/url]

[url='Home.html']Private Absicherung[/url]

[url='Home.html']Unsere Partner[/url]

[url='Home.html']Kontakt[/url]

[url='Home.html']Angaben gem. EU-Richtlinien[/url]

[url='Home.html']Impressum[/url]

				</div>
					<div id="Hauptseite">


						<iframe name="InFrame" width="100%" height="385px" frameborder="0" scrolling="auto" src="Home.html">


						</iframe>


					</div>		
</body>
</html>

Alles anzeigen

in die leiste kommt mal nen newsticker. er trennt banner und hauptseite...

was ist ein workaround? Oo

sejuma

Mit einem "Workaround" kannst du dem IE Dinge beibringen, die er von Natur aus nicht kann. Man zwingt ihn also, den CSS-Code standardkonform zu interpretieren. Das gilt jedoch nicht generell, sondern lediglich für einige bugs des IE (Fehler).

Was deine Seite betrifft: Warum verwendest du denn die nicht mehr zeitgemäßen Frames?
Arbeite dich mal durch meine Signatur durch, vielleicht wird dann dann das Verständnis für manche CSS-Angaben etwas klarer.

Wird im FF anders angezeigt, als im IE....

Tags

Benutzer online in diesem Thema