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

Probleme mit padding-Befehl bei Firefox / Inet Explorer

N

Nik

Neues Mitglied
Hallo liebe Gemeinde,

ich habe ein Problem und finde keine Lösung.
Wenn ich folgende Seite mit dem Internetexplorer öffne, ist alles wie gewünscht, aber der Firefox zeigt bei den Schlagworten eine völlig andere (zu tiefe) Position an:
Lichtmalerei ' Atelier fr Fotografie ' Alexandra Ludwig-Wei

Der Quelltext ist noch sehr einfach, da die Homepage sonst noch ohne Inhalt ist:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta author="zauncommunication | Dominik Zaun">
<title>Lichtmalerei ' Atelier für Fotografie ' Alexandra Ludwig-Weiß</title>
<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
// Add the controlbar
hs.addSlideshow({
 //slideshowGroup: 'group1',
 interval: 5000,
 repeat: false,
 useControls: true,
 fixedControls: 'fit',
 overlayOptions: {
  opacity: 0.75,
  position: 'bottom center',
  hideOnMouseOut: true
 }
});
</script>
<STYLE type=text/css>
<!--
A:link {
 COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:visited {
 COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:active {
 COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:hover {
 COLOR: #C8C6C1; TEXT-DECORATION: none;
}
</STYLE>
</head>
<body>
<div style="position: absolute; top:50px; left:50%; margin-left: -465px; width: 306px; height: 150px; border: 0px #c0c0c0 dashed; background-image: url(images/logo.gif); background-color: #94D639; z-index: 1" id="Logo">
</div>
<div style="position: absolute; top:50px; left:50%; margin-left: -153px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 2" id="Z1S3">
<p style="padding-top:115px; padding-left:0px;">
<font face="Tahoma, Helvetica" color="FFFFFF" size="5.0em">Business <img src="images/transparent.gif" width="3px"> Hoc</font>
</p>
</div>
<div style="position: absolute; top:50px; left:50%; margin-left: 3px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #94D639; z-index: 3" id="Z1S4">
<p style="padding-top:115px; padding-left:0px;">
<font face="Tahoma, Helvetica" color="FFFFFF" size="5.0em">hzeit <img src="images/transparent.gif" width="6px"> Portrait</font>
</p>
</div>
<div style="position: absolute; top:50px; left:50%; margin-left: 159px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 4" id="Z1S5">
<p style="padding-top:115px; padding-left:0px;">
<font face="Tahoma, Helvetica" color="FFFFFF" size="5.0em"><img src="images/transparent.gif" width="20px">Akt <img src="images/transparent.gif" width="6px"> Familie</font>
</p>
</div>
<div style="position: absolute; top:50px; left:50%; margin-left: 315px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 5" id="Z1S6">
<p style="padding-top:115px; padding-left:0px;">
<font face="Tahoma, Helvetica" color="FFFFFF" size="5.0em"><img src="images/transparent.gif" width="19px">Kinder <img src="images/transparent.gif" width="7px"> Art</font>
</p>
</div>
<div style="position: absolute; top:206px; left:50%; margin-left: -465px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 6" id="Z2S1">
&nbsp;</div>
<div style="position: absolute; top:206px; left:50%; margin-left: -309px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 7" id="Z2S2">
&nbsp;</div>
</div>
<div style="position: absolute; top:206px; left:50%; margin-left: -153px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 8" id="Inhalt1">
<div class="highslide-gallery">
<a href="images/HP_Art_G_1v8_F.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/HP_Art_Q_1v8_SW.jpg" alt="Highslide JS" title="Zum Vergrößern klicken" /></a>
<div class="highslide-caption">Hochzeitsbild 1</div>
</div>
</div>
<div style="position: absolute; top:206px; left:50%; margin-left: 3px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 9" id="Inhalt2">
<div class="highslide-gallery">
<a href="images/foto-hochzeit-018.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/foto-hochzeit-018.jpg" height="150px" width="150px" alt="Highslide JS" title="Zum Vergrößern klicken" /></a>
<div class="highslide-caption">Hochzeitsbild 2</div>
</div>
</div>
<div style="position: absolute; top:206px; left:50%; margin-left: 159px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 10" id="Inhalt3">
&nbsp;</div>
<div style="position: absolute; top:206px; left:50%; margin-left: 315px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 11" id="Z2S6">
&nbsp;</div>
<div style="position: absolute; top:362px; left:50%; margin-left: -465px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #94D639; z-index: 12" id="Impressum">
<p style="padding-top:123px; padding-left:10px;">
<font face="Tahoma, Helvetica" color="FFFFFF" size="3.0em"><a href="impressum.html">Impressum</a></font>
</p>
</div>
<div style="position: absolute; top:362px; left:50%; margin-left: -309px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 13" id="Z3S2">
&nbsp;</div>
<div style="position: absolute; top:362px; left:50%; margin-left: -153px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 14" id="Inhalt4">
&nbsp;</div>
<div style="position: absolute; top:362px; left:50%; margin-left: 3px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 15" id="Inhalt5">
&nbsp;</div>
<div style="position: absolute; top:362px; left:50%; margin-left: 159px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #C8C6C1; z-index: 16" id="Inhalt6">
&nbsp;</div>
<div style="position: absolute; top:362px; left:50%; margin-left: 315px; width: 150px; height: 150px; border: 0px #c0c0c0 dashed; background-color: #94D639; z-index: 17" id="Z3S6">
&nbsp;</div>
</body>
</html>

Würde mich freuen, wenn irgendjemand eine Idee hätte woran das liegen könnte bzw. ob es einen besseren Befehl als den padding-top gibt?

Danke und VG
 
Das liegt nicht am padding sodnern am margin. Der Absatz mit dem padding hat nämlich auch in jedem Browser einen anderen Außenabstand (margin). Setz den auf 0, dann sollte es ordentlich aussehen.

Und bitte das nächste Mal gleich im CSS-Forum posten.
 
Mensch vielen Dank! Es hat geklappt!
Und sorry, dass ich in das falsche Forum gepostet habe - war keine Absicht.
Nochmals Danke!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben