Darstellung von Aufzählung innerhalb eines Rahmens - IE & FF

Status
Nicht offen für weitere Antworten.
LuvShining

LuvShining

Erfahrenes Mitglied
Hallo,

ich schlage mich wieder mit einem kleinen, aber doch ärgerlichen Fehler in der Darstellung von verschiedenen Browsern rum:

Code: 
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b>
<b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">

<div class="list_right">
<h6>Aktuelles <span><a href="#">Mehr</a><span></h6>
<li class="blog"> <a href="#">Hier steht ein Text</a></li>
<li class="blog"> <a href="#">Hier steht ein Text</a></li>
<li class="blog"> <a href="#">Hier steht ein Text</a></li>
</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

CSS
Code: 
.blog {list-style-image: url(PFAD / BILD); }

div.list_right {width: 100%; font-size: 95%; margin: 0; padding: 0;}
.list_right li {list-style-position:inside; background-color: #FFFFFF; border-top: #B1AF77 1px solid; border-bottom: #B1AF77 1px solid;}
.list_right a {color: #000; font-weight: bold; text-decoration: none;}
.list_right a:hover {color: #B1AF77; font-weight: bold; font-weight: bold; text-decoration: underline;}
.list_right a:focus {color: #B1AF77; font-weight: bold; font-weight: bold; text-decoration: underline;}

.xsnazzy h6, .zsnazzy h6 {
margin:0; 
font-size:95%; 
font-weight: bold;
padding:0 10px 5px 30px; 
background-image: url(PFAD / BILD);
}

.xsnazzy h6 a {color: #000000; text-decoration: none;}
.xsnazzy h6 a:hover {color: #6A7B92; text-decoration: none;}
h6 span {padding-left:15px;}

.xsnazzy p, .zsnazzy p {
margin:0; 
padding: 2px 5px; 
font-size:95%;
background-color: #F4F4EE;
}

.xsnazzy a {color: #000000; font-weight: bold; text-decoration: none;}
.xsnazzy a:hover {color: #B1AF77; font-weight: bold; text-decoration: underline;}

.xsnazzy {
background: transparent; 
width:310px;
float:left; 
margin:0 3px 5px;
background-color: #F4F4EE; 
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}

.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}

.xb1, .xb2, .xb3 {
height:1px;
}

.xb2, .xb3, .xb4 {
background-color: #F4F4EE; 
border-left:1px solid #B1AF77;
border-right:1px solid #B1AF77;
}

.xb1 {
margin:0 5px; 
background:#B1AF77;
}

.xb2 {
margin:0 3px;
border-width:0 2px;
}

.xb3 {
margin:0 2px;
}

.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #B1AF77; 
border-width:0 1px; 
height:auto;
margin: 0;
padding: 0;
}

* html .xboxcontent {
height:1px;
}

.color_a {
background:#F4F4EE;
color:#000;
}

Da ich für verschiedene Listen auch verschiedene Bilddateien und Hintergrundfarben verwende, habe ich es so gesplittet.

Das Ergebnis im IE
• 3 Pixel rand zwischen Rahmen und Aufzählung
• Text pappt direkt am Bild

Das Ergebnis im FF
• ebenfalls 3 Pixel rand zwischen Rahmen und Aufzählung
• Text hat zum Bild einen Abstand von 26 Pixeln

Mein Wunschergebnis:
• in allen Browsern gar keinen Rand zwischen Aufzählung und Rahmen
• in allen Browsern 3 Pixel Abstand zwischen Bild und Text

Hat jemand von euch eine Idee?

Vielen Dank im voraus.

Gruß
Nadine
 

Anhänge

  • IE.jpg
    IE.jpg
    6,8 KB · Aufrufe: 24
  • FF.jpg
    FF.jpg
    6,8 KB · Aufrufe: 23
Hi,

zum von Markus erwähnten fehlenden ul- oder ol-Element im HTML-Markup fehlt wohl im Stylesheet auch die dazugehörige Regel, um die Polsterungseigenschaften des Listenelements auf null zu setzen.
 
Hallo ihr zwei,

danke für die Hinweise.
Ich habe das Style nun um folgendes ergänzt:

Code: 
.list_right ul {margin:0; padding:0;}

HTML
HTML: 
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b>
<b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">

<div class="list_right">
<h6>Aktuelles <span><a href="#">Mehr</a><span></h6>
<ul>
<li class="blog"> <a href="#">Nacktfotos gehen gar nicht</a></li>
<li class="blog"> <a href="#">Nacktfotos gehen gar nicht</a></li>
<li class="blog"> <a href="#">Nacktfotos gehen gar nicht</a></li>
</ul></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

Das Ergebnis ist allerdings das selbe :-(
 
Gibt es eventuell ein Online-Version der Seite, um dort mal einen Blick drauf werfen zu können, denn bei mir stimmt der linke Abstand in beiden Browsern überein, wenn ich deine Quellcode-Angaben in einem Testdokument einsetze.
 
Jou, ich hab die Testseite unter

http://www.cherrysworld.de/test/

angelegt.

Ich übe mich noch immer mit dem netten YAML ;-)

Vielleicht hat gleich noch jemand eine Idee, woher dieser hellgraue Strich unter dem Rahmen im rechten Bereich kommt. Fehlt da wo nen DIV? Ich kanns nämlich nicht finden.

Wie man aber hier im IE und im FF sehen kann, bleibt ein Restrand innerhalb des Rahmens stehen.
 
Hi ho,
habe da noch ein Bug/Fehler entdeckt.
Wenn du die Seite maximierst hast und dann über "Sehr Schön" mit der Maus gehst.
Dann pappt deine <ul> <li> leiste zusammen.
Gesehen habe ich es mit dem IE 7.
Auflösung: 1280x1024


Passt zwar jetzt nicht zum Thema, aber ich denke mal ist auch gut zu wissen ^^.


Sonnige Grüße,
cille
 
Versuch es mal hiermit:

Code: 
.blog {
background: url(/test/img/icons/blog.gif) no-repeat;
padding-left: 20px;
}

.list_right li {
list-style-position: outside;
background-color: #FFFFFF; 
border-top: #B1AF77 1px solid; 
border-bottom: #B1AF77 1px solid;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück