Autor |
Nachricht |
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 25.03.2008 11:26
Titel Listen abstände im ie6 (solved) |
|
|
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ö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 & 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
|
|
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Di 25.03.2008 12:59
Titel
|
|
|
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...
|
|
|
|
|
Anzeige
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Di 25.03.2008 14:18
Titel
|
|
|
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ö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önnte Ihre Werbung Stehen" />
<!-- InstanceEndEditable -->
</div> <!-- ad ende --> |
du hattest unter anderem ein offenes <img> drin
|
|
|
|
|
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mi 26.03.2008 09:18
Titel
|
|
|
Doppel Post
Zuletzt bearbeitet von Mark-Korb am Mi 26.03.2008 09:21, insgesamt 1-mal bearbeitet
|
|
|
|
|
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mi 26.03.2008 09:20
Titel
|
|
|
@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
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Mi 26.03.2008 09:26
Titel
|
|
|
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;} |
|
|
|
|
|
aUDIOfREAK
Dabei seit: 04.04.2002
Ort: Ansbach
Alter: 44
Geschlecht:
|
Verfasst Mi 26.03.2008 09:26
Titel
|
|
|
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...
|
|
|
|
|
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mi 26.03.2008 09:31
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ä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?
|
|