10 Pixel im Firefox / 10 Pixel im IE 6

ne0hype · 23. Dezember 2007

Hallo Leute,

wie immer macht nur der IE 6 ärger.

Im IE6 werden 10 Pixel viel größer angezeigt wie im Firefox. Was ist der Grund?

Edit: Ich sollte vielleicht noch sagen wo

. Also es dreht sich hierbei um die h2 Überschrift ("Aktuell") und dem Abstand zur HR und zum Menü. (extra noch grün hervorgehoben)

Hier mal den Quellcode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
* {
	padding: 0;
	margin: 0;
}
html {
	height: 101%;
}
body {
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	background-color:white;
	background-image: url(verlauf2.jpg);
	background-repeat: repeat-x;
	margin:0px;
}
h1 {
	font-size: 150%;
}
h2 {
	font-size: 120%;
	margin-bottom: 10px;
	background-color: #009900;
}
h3 {
	color: #353535;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 100%;
	letter-spacing: 0;
	margin-top: 2em;
	margin-bottom: 0.5em;
}
h4 {
	margin-bottom: 0.5em;
}
p {
	font-size: 89%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;
}
address {
	text-align: center;
	font-size: 80%;
	font-style: normal;
}
a img {
	border: none;
}
a {
	text-decoration: none;
	outline: none;
}
a:link {
	color: black;
}
a:visited {
	color: #5F3E36;
}
a:hover, a:focus {
	text-decoration: underline;
}
a:active {
	color: #5F3E36;
	text-decoration: none;
}
#menue a:link {
	color: #555555;
}
#menue a:hover, #menue a:hover {
	text-decoration: underline;
}
#wrapper {
	background: white;
	color: #000000;
	width: 800px;
	margin: 0px auto 10px auto;
	border-right: 1px solid #dcd;
	border-left: 1px solid #dcd;
}
#footer {
	border-top: 1px solid black;
	height: 23px;
	padding: 10px 0px;
	background-image: url(verlauf.jpg);
	background-repeat: repeat-x;
}
#head {
	position: relative;
	color: black;
	background-color: #FFFFFF;
}
#content {
	margin: 10px 10px 25px;
}
#content hr {
	margin-bottom: 10px;
	color: #DCDCDC;
	border-bottom: 1px solid #4E4E4E;
}
#lang {
	color: black;
	font-size: 70%;
	position: absolute;
	top: 5px;
	right: 5px;
}
#navi {
	margin: 0px 0px 20px;
}
#navi ul {
	padding: 0;
	list-style: none;
	margin: 2px 0px !important;
	margin: 2px 0 2px -1px;
}
#navi li {
	float: left;
	width: 98px;
	text-align: center;
	background-repeat: no-repeat;
	height: 160px;
	margin-right: 1px;
	margin-left: 1px;
	font-weight: bold;
	font-size: 95%;
}
#navi li.double {
	width: 198px;
}
.navigation {
	background-color: #dcdcdc;
	display:block;
}
#navi a {
	text-decoration: none;
}
#navi li a { /* IE BENÖTIGT HIER EIN BIGFIX */
	color:#4E4E4E;
	background-repeat: no-repeat;
	display:block;
	padding: 143px 0px 0px;
	line-height: 25px;
}
#navi a:hover {
	background: transparent;
	display:block;
}
#navi a:hover .navigation {
	background-color:#BBBBBB;
	color:#4E4E4E;
	display:block;
}
.nav1 {
	background-image:url(Bilder/aktuell_hover.gif);
}
a.nav1 {
	background-image:url(Bilder/aktuell.gif);
}
.nav2 {
	background-image:url(Bilder/interieur_hover.gif);
}
a.nav2 {
	background-image:url(Bilder/interieur.gif);
}
.nav3 {
	background-image:url(Bilder/multimedia_hover.gif);
}
a.nav3 {
	background-image:url(Bilder/multimedia.gif);
}
.nav4 {
	background-image:url(Bilder/business_hover.gif);
}
a.nav4 {
	background-image:url(Bilder/business.gif);
}
.double {
	background-image:url(Bilder/sonderanvertigungen_hover.gif);
}
a.nav5 {
	background-image:url(Bilder/sonderanvertigungen.gif);
}
.nav6 {
	background-image:url(Bilder/kontakt_hover.gif);
}
a.nav6 {
	background-image:url(Bilder/kontakt.gif);
}
.nav7 {
	background-image:url(Bilder/impressum_hover.gif);
}
a.nav7 {
	background-image:url(Bilder/impressum.gif);
}


.show {
	display: block;
}
.hide {
	display: none;
}

/* nav box */
#navi #navboxwrapper {
	position:absolute;
	margin: 0px !important;
	margin: 0px -49px 0px;
	
}
#navi .dropNavBox {
	background-color: #DCDCDC;
	padding: 10px 5px 0px;
	width: 88px;
}
#navi .dropNavBox a {
	color: #4E4E4E;
	padding: 0px;
	line-height: 15px;
}
#navi .navboxbg {
	background-attachment: scroll;
	background-image: url(verlaufbox.png);
	background-repeat: repeat-x;
	background-position: bottom;
	padding: 0px 0px 4px !important;
	padding: 0px 0px 10px;
}
-->
</style>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">


$(document).ready(function() {
	$("li a.nav2").removeAttr("href");

	$("li.nav2").mouseover(function() {
		document.getElementById("navboxwrapper").className = "show";
	});
	$("li.nav2").mouseout(function() {
		document.getElementById("navboxwrapper").className = "hide";
	});
	
});

</script>

</head>
<body>
<div id="wrapper">
  <div id="head">
    <h1><img src="Bilder/logo.jpg" alt="Reinald Mattes Interieurtechnik" width="315" height="84" /></h1>
    <div id="lang">&raquo; <a href="#" title="Language english">English</a> &raquo; <a href="#" title="Sprache deutsch">Deutsch</a> 
    </div>
  </div>
  <div id="navi">
    <ul>
      <li class="nav1"><a class="nav1" title="Layouts" href="index.html"><span class="navigation">Aktuell</span></a></li>
      <li class="nav2"><a class="nav2" title="Layouts" href="/interieur/index.html"><span class="navigation">Interieur</span></a>
        <div id="navboxwrapper" class="hide">
          <div class="navboxbg" >
            <div class="dropNavBox">
              <p style="text-align:left;font-size:75%;">für &raquo;</p>
              <p><a href="/interieur/bmw/index.html"><span class="navigation">BMW</span></a> </p>
              <p><a href="#"><span class="navigation">Mercedes</span></a> </p>
              <p><a href="#"><span class="navigation">Range Rover</span></a> </p>
            </div>
          </div>
        </div>
      </li>
      <li class="nav3"><a class="nav3" title="Layouts" href="index.html"><span class="navigation">Multimedia</span></a></li>
      <li class="nav4"><a class="nav4" title="Layouts" href="index.html"><span class="navigation">Business</span></a></li>
      <li class="double"><a class="nav5" title="Layouts" href="index.html"><span class="navigation">Sonderanfertiungen</span></a></li>
      <li class="nav6"><a class="nav6" title="Layouts" href="index.html"><span class="navigation">Kontakt</span></a></li>
      <li class="nav7"><a class="nav7" title="Layouts" href="index.html"><span class="navigation">Impressum</span></a></li>
    </ul>
    <div style="clear:both"></div>
  </div>
  <div id="content">
    <h2>Aktuell</h2>
    <hr />
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tincidunt interdum erat. Etiam scelerisque justo sed massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla venenatis elementum diam. Nulla enim eros, vestibulum sit amet, tempor sit amet, volutpat nec, odio. Quisque vel ante. Nullam sollicitudin pede ut nulla. Suspendisse potenti. Quisque consequat, leo ut faucibus volutpat, velit turpis vestibulum neque, varius vulputate mi quam vitae mi. Ut ac felis. Morbi nonummy odio in ipsum. Aliquam id lacus. In nibh metus, commodo non, imperdiet nec, rhoncus at, risus. Vivamus fringilla, ante sed commodo feugiat, lorem tellus gravida pede, viverra tincidunt erat nibh ut ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla luctus, pede dignissim elementum placerat, justo sem egestas arcu, eget sollicitudin quam arcu in enim. </p>
  </div>
  <div id="footer">
    <address>
    Reinald Mattes Interieurtechnik<br />
    Pleidelsheimer Str. 39 - 74321 Bietigheim-Bissingen - Germany
    </address>
  </div>
</div>
</body>
</html>

Danke schonmal für die Hilfe

Quaese · 25. Dezember 2007

Hi,

es ist bekannt, dass der IE Probleme mit dem Abstand zu hr-Elementen hat.

Versuch mal folgendes - im CSS-Bereich:

Code:

#content hr {
  color: #DCDCDC;
  clear: both;
  content: ".";
  display: block;
  border-bottom: 1px solid #4E4E4E;
  margin:  0 0 10px 0;
}

Und für den IE in einem conditional comment:

Code:

<!--[if IE]>
  <style type="text/css">
#content hr {
  float: left;
  width: 100%;
  margin: 0 0 -5px 0; /* Abstand für IE anpassen */
}
  </style>
<![endif]-->

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese

Daxi · 27. Dezember 2007

Geht es nur darum, dass unter den Überschriften mit einem 10px-Abstand eine Linie erscheinen soll?

Dann könntest du das auch mit

Code:

h1, h2, h3, h4, h5, h6 {
  padding-bottom:10px;
  border-bottom:1px solid green;
}

erreichen.

Bei den HRs gibts leider die Bugs, wie bereits gesagt.

Link zur Veranschaulichung:
Die magischen 7 Pixel

10 Pixel im Firefox / 10 Pixel im IE 6

ne0hype

Erfahrenes Mitglied

Anhänge

Quaese

Moderator

Daxi

Erfahrenes Mitglied

Neue Beiträge