Layer Anpassungsproblem unter IE und FireFox

Status
Nicht offen für weitere Antworten.
NetPerformance

NetPerformance

Erfahrenes Mitglied
Hallo,

folgendes Problem plagt mich :(

Screenshot !

Wie ihr sehen könnt, werd der linke Rand unter IE anders angezeigt als unter FireFox..

Was machen ich falsch ..

Vielen Dank im Vorraus
Aaron

CSS

Code: 
#frame 
{
  	width: 800px;
	height: 550px;
	border: 1px solid #cccccc;
}    

#header 
{
  	width: 794px;
	height: 150px;
	border: 1px solid #cccccc;
	float:top;
	
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 2px;
}    

#login 
{
  	width: 150px;
	height: 250px;
	border: 1px solid #cccccc;
	
	float:left;
	margin-left: 1px;
	margin-top: 2px;
}


HTML

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="johannes_2.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<center>

	<div id="frame">
		  
	  <div id="header"></div>
	  <div id="login"></div>
		  
	</div>

</center>

</body>
</html>
 
Naja, das kommt ganz darauf an, was du eigentlich willst...
Ich schätze mal, dass du es ungefähr so haben willst, wie es im IE angezeigt wird.
Dazu müsstest du das margin-left von der Login-div auch auf 2px stellen.

P.S.: Mir ist grade noch was aufgefallen...
Wie stellst du dir das mit dem float:top vor?
Meines Wissens sind nur die Angaben left, right oder none möglich...
 
Zuletzt bearbeitet:
Mit Hilfe des Conditional Comments lässt sich für den IE eine CSS-Browserweiche installieren, und so der kritische Wert anpassen / korrigieren.

In deinem Fall würde der (korrigierte und erweiterte) CSS-Code so aussehen:
HTML: 
<style type="text/css">
#frame
{
        width: 800px;
        height: 550px;
        border: 1px solid #cccccc;
}

#header
{
        width: 794px;
        height: 150px;
        border: 1px solid #cccccc;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 2px;
}

#login
{
        width: 150px;
        height: 250px;
        border: 1px solid #cccccc;
        float:left;
        margin-left: 2px;
        margin-top: 2px;
}
</style>
<!--[if gte IE 5]>
 <style type="text/css">
  #login
{
        margin-left: 1px;
}
 </style>
<![endif]-->
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

Anmerkung: für externe CSS-Dateien sieht der Code so aus:

HTML: 
<link href="johannes_2.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5]>
 <link href="johannes_2_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück