• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Unterschiedlicher Abstand IE zu Firefox

B

BigSchnidde

Neues Mitglied
Hallo Forum,

anbei meine (grob verkürzte) HTML Datei mit CSS Datei. Die Links Buttons haben im IE einen anderen Abstand nach oben als im Firefox! Seht ihr eine Möglichkeit das zu beheben? Danke schon im vorraus!

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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="de" lang="de">

<head>

<meta name="author" content="Michael Schneider" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" type="text/css" href="css.css"/>
<link rel="shortcut icon" href="image/favicon.ico">

</head>

<body>

<div id="head">

<span class="active">Startseite</span>
<a href="angebot.html" class="navi">Angebot</a>
<a href="trainieren.html" class="navi">Training</a>
<a href="ueber.html" class="navi">Über mich</a>

</div>

<div id="main">

</div>

<div id="down">

</div>

</body>

</html>
Zum Vergrößern anklicken....

CSS:
body{
margin:0;
padding:0;
text-align:center;
background-color:;
padding-bottom:0.5em;
padding-top:0.5em;
font-family:arial;}

#head{
margin:0;
padding:0;
margin-top:1em;
margin-left:auto;
margin-right:auto;
width:50em;
height:9em;
background-image:url("image/header.gif");
background-repeat:no-repeat;}

#main{
margin-left:auto;
margin-right:auto;
width:50em;
height:27em;
background-color:silver;}

.navi{
display:inline;
display:block;
padding:2px 5px 2px 5px;
float:left;
margin-right:0.5em;
text-decoration:none;
margin-top:7.02em;
color:#B8860B;
background-color:#dfdfdf;}

.active{
padding:2px 5px 2px 5px;
float:left;
margin-right:0.5em;
text-decoration:none;
margin-top:7.02em;
background-color:#B8860B;
color:#dfdfdf;}

#rechts{
text-align:center;
width:13em;
height:25em;
float:right;
padding:1em 0em 0em 0em;}

#links{
margin-top:0.7em;
width:36em;
height:23.5em;
float:left;
text-align:center;
padding:0.5em 0.5em 0.8em 0em;
background-color:#4682B4;}

#down{
padding:0;
margin:0;
margin-left:auto;
margin-right:auto;
height:2.3em;
width:45em;
text-align:right;
text-align:center;
margin-top:0.5em;}
Zum Vergrößern anklicken....
 
Werbung:
Linke Buttons? Meinst Du das Menü was Du nicht als Menü ausgezeichnet hast?

Ein Grund könnte sein, dass Du Abstände in relativen Maßen angibst, wie z.B. hier

Code: 
margin-top:1em;

Da das Element sich hierbei auf keinen umgebenden Wert beziehen kannst, sieht es in jedem Browser anders aus. Du solltest für alle Elemente einheitliche feste Maße, insbesondere für Schriftart, angeben. Dann können die Browser auch mit der selben Basis rechnen. Beispiel:

Code: 
* {
 font-size: 12px;
 margin: 0;
 padding: 0;
}
 
- Bei IE-Problemen immer die Version nennen. Zwischen 7 - 10 liegen Welten.
- Browser verwenden unterschiedliche Rendering Engines und interpretieren Blockelemente teilweise auch anders. Es empfiehlt sich ein Reset CSS.
- Wenn sich im IE trotz validem Code Abweichungen ergeben, würde ich als erstes nach margin und padding schauen.
- Will man pixelgenaue Übereinstimmung und ist die Anzahl der abweichenden Elemente im IE gering, lässt sich das mit Browserhacks ausbügeln.
 
Werbung:
Kannst auch mal versuchen, diese Zeile vor dem Doctype rauszunehmen:
Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
(den ISO dann im head einbauen)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben