unerwünschter Abstand zwischen zwei DIVs im IE!

Diskutiere unerwünschter Abstand zwischen zwei DIVs im IE! im Web & Grafik Forum im Bereich Internet & Telekomunikation Forum; Ich habe zei DIV-Elemente untereinander eingefügt und wollte, dass die ohne Abstand dargestellt werden. Beim Firefox klappte es auch, aber im...
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #1
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Ich habe zei DIV-Elemente untereinander eingefügt und wollte, dass die ohne Abstand dargestellt werden. Beim Firefox klappte es auch, aber im Internet Explorer ist immer ein ca. 5 Px Abstand zwischen den beiden Elementen. Jetzt hab ich schon einiges über so eine Problematik gelesen, aber ich bekomms nicht hin.

Kann mir jemand helfen, wie ich die beiden DIVs auch im IE ohne Abstand darstellen kann?

HTML:
<!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>Testseite</title>
<link href="css/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="container">
  <div id="kopf">
   <h1>TestseiteCSU</h1>
  </div>
  <div id="navigation">
   <ul>
    <li><a href="home.html">Start</a></li>
    <li><a href="aktuelles.html">Aktuelles</a></li>
    <li><a href="person.html">Zur Person</a></li>
    <li><a href="schwerpunkte.html">Schwerpunkte</a></li>
    <li><a href="termine.html">Termine</a></li>
    <li><a href="galerie.html">Galerie</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
   </ul>
  </div>
  <div id="maintext">
   <h2>Überschrift</h2>
   <p>Ut aliquip ex ea commodo consequat. Velit esse cillum dolore consectetur adipisicing elit, sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, lorem ipsum dolor sit amet. Ut enim ad minim veniam, velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
  </div>
  <div id="fuss">
   <p>Raum für den Inhalt von  id "fuss"</p>
  </div>
 </div>
</body>
</html>

und hier die CSS-Datei

HTML:
* {
 margin: 0;
 padding: 0;
}
 
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 76%;
 line-height: 120%;
 text-align: center;
}
 
#container {
 width: 800px;
 margin: 0 auto;
 text-align: left;
 height: 600px;
}
#maintext {
}
#fuss {
}
#kopf {
 background-image: url(../images/banner.jpg);
 background-repeat: no-repeat;
 background-position: bottom;
 height: 155px;
}
 
#kopf h1 {
 margin-left: -1500px;
 
 
}
#navigation {
 background-image: url(../images/navibalken.gif);
 background-repeat: repeat-x;
 height: 26px;
 padding-left: 30px;
 color: #0988d0;
 background-position: 0 0px;
}
#navigation ul {
 list-style-type: none;
}
#navigation li {
 display: inline;
 font-size: 12px;
 line-height: 26px;
}
#navigation a {
 padding-right: 15px;
 padding-left: 15px;
 text-decoration: none;
 color: #CCCCCC;
 float: left;
}
#navigation a:hover {
 color: #FFFFFF;
 text-decoration: none;
 background-image: url(../images/navibalken.gif);
 background-repeat: no-repeat;
 background-position: 0px -26px;
}

Zwischen dem DIV "kopf" und "navigation" ist immer der blöde Abstand im IE!!
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #2
Lambo-Benni

Lambo-Benni

Bekanntes Mitglied
Dabei seit
23.03.2007
Beiträge
7.601
Reaktionspunkte
3
Ort
Medizinmanndiscount
CSS: sollte mit "margin" (Außenabstand - im Gegensatz zum Innenabstand "padding") zu machen sein.
Code:
#kopf {
  margin-bottom: 0;
}

#navidation {
  margin-top: 0;
}
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #3
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Hallo!

Habs mal so versucht, es ändert sich aber leider nichts! Der Abstand ist immer noch da!
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #4
S

Sady

Bekanntes Mitglied
Dabei seit
11.03.2009
Beiträge
70
Reaktionspunkte
0
Ort
Aschaffenburg
Hi!

Versuch das mal im CSS hinzuzufügen:
Code:
ul { margin:0px; padding:0px;}

Gruß
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #5
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Hi!

Auch das verändert leider nichts....
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #6
S

Savior

Bekanntes Mitglied
Dabei seit
20.06.1999
Beiträge
492
Reaktionspunkte
0
Das Problem liegt wohl am h1-Element. Dort ist die vererbte Schriftgröße im IE größer als das Element selbst (zumindest hier im Test). Der IE handelt diesen Overflow wohl einfach anders als der FF.

Lösungsmöglichkeiten:


Code:
Overflow abschneiden

#kopf h1 {
 margin-left: -1500px;
 overflow: hidden;
}

oder Schriftgröße verkleinern

#kopf h1 {
 margin-left: -1500px;
 font-size: 10px;
}
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #7
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Super! Mit dem overflow: hidden hat es funktioniert!

Durch das hidden-Attribut, bleibt der Text aber für "Screenreader" schon noch lesbar oder?
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #8
S

Savior

Bekanntes Mitglied
Dabei seit
20.06.1999
Beiträge
492
Reaktionspunkte
0
Das kann ich nicht sagen, müsste man testen. Das Element wird ja durch overflow:hidden eigentlich nicht versteckt sondern nur der Teil nicht 'angezeigt', der über festgelegte Elementgrößen hinaus gehen würde. Es müsste also theoretisch noch funktionieren.
Alternativ bietet sich eben auch die Verkleinerung der Schrift auf z.b. feste 10px an.
 
  • unerwünschter Abstand zwischen zwei DIVs im IE! Beitrag #9
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Ah ok! Aber danke für die Lösung, das hat mir sehr weitergehofen!! Supi!

@all
Vielleicht weiß einer, ob das hidden-Attribut von Screenreadern gelesen werden kann - wer sich da auskennt bitte mal kurz posten!
 
Thema:

unerwünschter Abstand zwischen zwei DIVs im IE!

ANGEBOTE & SPONSOREN

https://www.mofapower.de/

Statistik des Forums

Themen
213.180
Beiträge
1.579.173
Mitglieder
55.879
Neuestes Mitglied
stonetreck
Oben