mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:38 Benutzername: Passwort: Auto-Login

Thema: Listen abstände im ie6 (solved) vom 25.03.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Listen abstände im ie6 (solved)
Autor Nachricht
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Di 25.03.2008 11:26
Titel

Listen abstände im ie6 (solved)

Antworten mit Zitat Zum Seitenanfang

Moin,
Ich steh mal wieder kurz davor meinen Kopf gegen die Tischplatte zuhauen bis mir ein Licht aufgeht. Ob es nun an der sicherlich vorhandene Überdosis Koffein durch die Kanne Kaffee die ich in den Letzten 2 Sunden vertilgt habe liegt oder daran, dass der gute alte Interne Explorer 6 (Ja wie wir ihn doch alle lieben) nicht macht was er soll. Letzteres hat erstes hervorgerufen.

Folgendes Problem tut sich mir an diesem Dienstag morgen auf.

Die letzten 2 Stunden hab ich damit verbracht nach einem Fehler in meiner Listen Navigation für eine Website zu suchen.
Alle Browser von ie7 über Safari bis Firfox machen es richtig nur der ie6 haut mir zwischen den li´s leider sehr hohe abstände.
Vorgesehen sind 3px hohe Abstände zwischen den Menüpunkten im ie6 sind diese jedoch weitaus höher.
Selbst nach weglassen des für den Abstand entscheidenden Margin Befehls bleibt der Abstand im ie6 Unverändert.

Der Code wurde Aktualiesiert!

CSS
Code:

body {
   background: #cccccc top url(../_layout/top_bg.gif) repeat-x;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.85em;
   color: #333333;   
   text-align:center;
   margin: 0;
}

/* Layout */

#all_wrap{
   width: 990px;
   margin:0 auto;
    text-align:left;
}

#navi_top{
   height: 30px;
   padding: 0px 7px 0 0;
   width: 983px;
   margin: 25px 0 0 0;
   text-align: right;
   overflow: hidden;
}

#header{
   height: 176px;
   width: 990px;
   background: #fff no-repeat right url(../_layout/header_****_01.jpg);
   margin: 0px 0 0 0;
}
#content_wrap{
   width: 990px;   
   background-color: #ffffff;
   min-height: 500px;
   
}

#navcontainer{
   width: 214px;
   margin:0 auto;
   padding: 11px 9px 0 7px;
   float: left;
   overflow: hidden;
}

#content{
   width: 580px;
   padding: 7px 12px 15px 0px;
   float: left;
}

#ad{
   width: 160px;
   padding: 7px 7px 15px 0;
   margin: 0;
   float: left;

}
#footer{
   margin: 7px 0 7px 0;
   width: 990px;
   padding: 4px 0 4px 0;
   background-color: #fff;
   clear: both;
   text-align: center;
}

/* Navigation */

#navcontainer ul {
   list-style: none;
   margin: 0;
   padding: 0;
   border: none;
}

#navlist li {
   margin: 0 0 3px 0 !important;
   padding: 0 ;
}

#navlist li a {
   display:block;
   margin: 0;
   line-height: 30px !important;
   padding: 0px 0 0px 15px;
   background: no-repeat top left url(../_layout/navi.gif)  ;
   text-decoration: none  ;
   color: #333333  ;
   font-weight: normal  ;
   font-size: 115%  ;
}
#navlist li a:link, #navlist ul li a:active,  #navlist ul  li a:visited{
   color: #333333  ;
   background: no-repeat top left url(../_layout/navi.gif)  ;
   
}

 #navlist li a:hover{
   color: #993333   ;
   background: no-repeat top left url(../_layout/navi2.gif)  ;
   
}


/* Inhalte */

h1 {
   margin: 0;
   padding: 0 0 2px 0px;
   font-size: 1.4em;
   font-weight: Bold;
   color: #993333;
   
}
h2{
   margin: 0;
   padding: 0 0 2px 0;
   font-size: 0.95em;
   font-weight: Bold;
   color: #993333;
}

a:link, a:active {
   color: #993333;
   text-decoration: none;
}
      
a:hover, a:visited {
   color: #CC0000;
   text-decoration: underline;
}


blockquote {
   display: block;
   width: 510px;
   min-height: 15px;
   padding: 0 0 0 65px;
   background: #cccccc top url(../_layout/top_bg.gif) no-repeat;
   font-style: italic;
}
p.line {
   margin: 0 0 10px 0;
   padding: 0 0 14px 0;
   border-bottom: 7px #CCCCCC;
   background: bottom url(../_layout/line.gif) repeat-x;
}

/* diverses */
img {
   border: 0;   
}
.hide {
   display:none;
}



HTML
Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/ie.css" media="screen"/>
<![endif]-->
</head>

<body>
<div id="all_wrap">

  <div id="navi_top"> <a href="../inhalt.htm">Satzung</a> | <a href="../inhalt.htm">Kontakt</a>
    |<a href="../inhalt.htm">Impressum</a></div>
  <!-- navi_top ende -->
 
  <div id="header"> <a href="../index.htm"><img src="../_layout/logo_***.gif" title="Logo der **** - Everswinkel" alt="Logo der **** - Everswinkel" width="223" height="177"></a></div>
  <!-- header ende -->

  <div id="content_wrap">
    <div id="navcontainer">  <p class="hide"><a href="#Text_Inhalt">Menue ueber springen</a> Haupt
      navigation</p><ul id="navlist">
  <li><a href="../index.htm">Startseite</a> <span class="hide">.</span> </li>
        <li> <a href="../inhalt.htm">Die ****</a> <span class="hide">.</span></li>
  <li><a href="../inhalt.htm">Mitgliederliste</a><span class="hide">.</span></li>
  <li><a href="../inhalt.htm">Termine</a><span class="hide">.</span></li>
  <li><a href="../inhalt.htm">Download</a> <span class="hide">.</span></li>
  <li><a href="../inhalt.htm">Links</a> <span class="hide">.</span></li>
  <li><a href="../inhalt.htm">Jobb&ouml;rse</a> <span class="hide">.</span></li>
</ul>

</div>
    <!-- navi_left ende -->

   <div id="content"><a name="Text_Inhalt"></a> <!-- TemplateBeginEditable name="content" -->
      <h1>Lorem ipsum dolor</h1>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
        dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan
        et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
        duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
        eleifend option congue nihil imperdiet doming id quod mazim placerat facer
        possim assum.</p>
      <!-- TemplateEndEditable --> </div>
    <!-- content ende -->
   
   <div id="ad"> <!-- TemplateBeginEditable name="ad" --> <img src="../_layout/werben.jpg" alt="Werbung" width="160" height="450"><!-- TemplateEndEditable -->
    </div>
    <!-- ad ende -->
   
   </div><!-- Content_wrap ende -->
   
   
  <div id="footer"> Gestaltung &amp; Umsetzung des Internetauftritts - Schroeter
    Kommunikationsdesign </div>
  <!-- footer ende -->
   
</div> <!-- all_wrap ende -->
</body>
</html>


[img=http://img86.imageshack.us/img86/6772/ie6listerx4.th.jpg]


Zuletzt bearbeitet von Mark-Korb am Mo 19.05.2008 09:22, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Di 25.03.2008 12:59
Titel

Antworten mit Zitat Zum Seitenanfang

Beginnt der HTML-Code wirklich mit einer Leerzeile oder ist das hier nur beim Einfügen zwischen die Code-Tags so passiert?
Dies würde dazu führen, daß der MSIE 6 trotz anständiger DTD-Angabe nicht in den standardkonformen Modus schaltet.
Der Doctype-Switch ist dir doch bekannt, oder?

Sollte das das Problem nicht beheben, mußt du dem MSIE 6 halt einfach ein anderes Stylesheet vorwerfen, womit du den Darstellungsunterschied ausgleichst.
Es gibt da einiges an Möglichkeiten, wie das machbar wäre. Browserweichen per CSS, verschiedene CSS-Hacks, ...
In deinem Fall könntest du wohl ganz einfach mit Conditional Comments arbeiten.
Da dieses Stylesheet, was du so einbindest, dann ausschließlich den MSIE 6 betrifft, kannst du deine Abstände so klein wie möglich machen...
  View user's profile Private Nachricht senden
Anzeige
Anzeige
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Di 25.03.2008 14:18
Titel

Antworten mit Zitat Zum Seitenanfang

ich hab mal deinen html durchforstet und valide gemacht - vlt. hilfts weiter
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"><!-- InstanceBegin template="/Templates/Content.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/ie.css" media="screen"/>
<![endif]-->
</head>

<body>
<div id="all_wrap">

  <div id="navi_top"> Satzung • Kontakt • Impressum</div>
  <!-- navi_top ende -->
 
  <div id="header"> <a href="index.htm"><img src="_layout/logo_igse.gif" title="Logo der IGSE - Everswinkel" alt="Logo der IGSE - Everswinkel" width="230" height="176" border="0"/></a></div><!-- header ende -->

  <div id="content_wrap"> <span class="hide"><a href="#Text_Inhalt">MenŸ Ÿber springen</a><br/>
    Haupt navigation</span>
    <div id="navcontainer"> <ul id="navlist">
  <li><a href="#">Startseite</a> <span class="hide">.</span> </li>
  <li> <a href="#">Die IGSE</a> <span class="hide">.</span></li>
  <li><a href="#">Mitgliederliste</a><span class="hide">.</span></li>
  <li><a href="#">Termine</a><span class="hide">.</span></li>
  <li><a href="#">Download</a> <span class="hide">.</span></li>
  <li><a href="#">Links</a> <span class="hide">.</span></li>
  <li><a href="#">Jobb&ouml;rse</a> <span class="hide">.</span></li>
</ul>

</div>
    <!-- navi_left ende -->

   <div id="content"><a name="Text_Inhalt"></a> <!-- InstanceBeginEditable name="content" -->
      <h1>Lorem ipsum dolor</h1>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
        dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan
        et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
        duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
        eleifend option congue nihil imperdiet doming id quod mazim placerat facer
        possim assum.</p>
      <!-- InstanceEndEditable --> </div>
    <!-- content ende -->
   
   <div id="ad">
   <!-- InstanceBeginEditable name="ad" -->
    <img src="_layout/werben.jpg" alt="Hier k&ouml;nnte Ihre Werbung Stehen" />
   <!-- InstanceEndEditable -->
   </div> <!-- ad ende -->


du hattest unter anderem ein offenes <img> drin
  View user's profile Private Nachricht senden
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Mi 26.03.2008 09:18
Titel

Antworten mit Zitat Zum Seitenanfang

Doppel Post

Zuletzt bearbeitet von Mark-Korb am Mi 26.03.2008 09:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Mi 26.03.2008 09:20
Titel

Antworten mit Zitat Zum Seitenanfang

@digitalplakat
Danke das du dir die Mühe gemacht hast, hab das dann allerdings selber auch gemacht und dann im Streß vergessen hier zu Aktualisieren. Doctype hab ich jetzt auf Strict.


Für den Abstand der Liste ist ja in der CSS der bereich hier verantwortlich

Code:

#navlist li {
   margin: 0 0 3px 0 !important;
   padding: 0 ;
}


Wen ich Margin ändere sei es nun auf

Code:

#navlist li {
   margin: 0 !important;
   padding: 0 ;
}

oder

#navlist li {
   margin: 0 0 -3px 0 !important;
   padding: 0 ;
}


Ändert sich nichts erst bei einem wert über 20 wird der abstand Größer, kleiner aber in keinem Fall.
Wen ich wüste wo das Problem liegt würde ich Conditional Comments anwenden, habe ich früher auch schon.

@Rob: Die Leerzeile ist nur durch das Forum entstanden.

Das Problem ist das ich nicht weiß wo in der CSS der "Fehler" liegt.

Ps. Ich habe den Code Oben mal aktualisiert.


Zuletzt bearbeitet von Mark-Korb am Mi 26.03.2008 09:22, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Mi 26.03.2008 09:26
Titel

Antworten mit Zitat Zum Seitenanfang

setz mal an den begin deines css das
Code:
/*  reset styles */
dl         {margin: 0 0 0 0;}
dl dt      {margin: 0 0 0 0;}
dl dd+dt   {margin-top: 0;}
dl dd      {margin: 0 0 0 0;}

ol         {list-style: none;}
ol li      {margin: 0 0 0 0;}
ol li ol   {margin: 0 0 0 0;}
ol li ul   {margin: 0 0 0 0;}

p         {margin-bottom: 0em;}

ul         {list-style: none;}
ul li      {margin: 0 0 0 0;}
ul li ul   {margin: 0 0 0 0; list-style: none;}
ul li ol   {margin: 0 0 0 0;}
  View user's profile Private Nachricht senden
aUDIOfREAK

Dabei seit: 04.04.2002
Ort: Ansbach
Alter: 44
Geschlecht: Männlich
Verfasst Mi 26.03.2008 09:26
Titel

Antworten mit Zitat Zum Seitenanfang

zieh mal im quellcode alle <ul> und <li>s zusammen. also ohne quelltextformnatierung ohne leerzeichen alles in 1 zeile. das ie6 hat irgendwie die dumme angewohnheiten umbrüche und leerzeichen im quelltext auch als solche zu werten und macht dann in die seite abstände, wo eigentlich keine hin gehören...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Mi 26.03.2008 09:31
Titel

Antworten mit Zitat Zum Seitenanfang

Tatsächlich, das is ja ein ding... was audiofreak sagt stimmt.
Dank dir audiofreak, es funktioniert.

Scheiß iE...


Zuletzt bearbeitet von Mark-Korb am Mi 26.03.2008 09:31, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen {css} variable abstände mit css?
[CSS] zu große Abstände in IE
EM Pixel und die Abstände
<li> Abstände/Zwischenräume im IE
abstände safari / ie
listen in ff?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.