mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 23:18 Benutzername: Passwort: Auto-Login

Thema: [CSS] Umbrüche in Listen - "Gap" zwischen den LI T vom 08.02.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Umbrüche in Listen - "Gap" zwischen den LI T
Seite: 1, 2  Weiter
Autor Nachricht
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Di 08.02.2005 15:21
Titel

[CSS] Umbrüche in Listen - "Gap" zwischen den LI T

Antworten mit Zitat Zum Seitenanfang

Folgendes problem:
Die Listennavigation der Seite, an der ich baue, schaut im mozilla wunderbar aus.
Allerdings macht der IE zwischen den LI-Tags einfach "3 pixel gaps" - wenn man umrüche entfernt gehts mal weg, mal nicht.. ist irgendwie etwas seltsam.

Da zum "nachbauen" Lächel :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
   <title>Iframe - Language</title>
<STYLE TYPE="text/css">
BODY, HTML {
      font-family: arial, verdana, helvetica, sans-serif;   
}
/* ----------- Navigation ------------- */
#primnav {
   z-index: 999;
   position: absolute;
   left: 0;
   margin: 0;
   background-color: #153B63;
   width: 174px;
   border-right: 6px solid #B4C6D9;
   background-image: url('assets/primnav_bg.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
   padding-bottom: 7px;
   margin-bottom: 12px;
   }

   #primnav h2 {
      color: #FFF;
      font-size: 12px;
      text-decoration: none;
      font-weight: bold;
      line-height: 16px;
      padding: 12px 6px 0px 6px;
      }
   
   UL.navi {
      margin: 9px 0px 0px 0px;
      width: 174px;
      padding: 0px;
      list-style: none;
      color: #FFF;
      }
   
   .navi A {
      margin: 0;
      padding: 0;
      display: block;
      color: #FFF;
      line-height: 18px;
      text-decoration: none;
      font-weight: normal;
      font-size: 11px;
      }
   
      .navi li {
         width: 174px;
         text-indent: 18px;
         line-height: 18px;
         /*background-image: url('assets/primnav_prim_bg.gif');
         background-position: top left;
         background-repeat: no-repeat;*/
         background-color: #D00;
         }

      .navi li.hilite {
         background-color: #2269B5;
         margin: 0;
         padding: 0;
         }
         .navi UL LI {
            list-style: none;
            color: #FFF;
            margin: 0;
            padding: 0;
            line-height: 18px;
            background-color: #153B63;
            }

            .navi UL.sub {
               margin: 0;
               padding: 0;
               background-color: #153B63;
               }
            .navi UL.sub LI  {
               padding: 0;
               margin: 0;
               width: 174px;
               text-indent: 28px;
               /* background-image: url('assets/primnav_sec_bg.gif');
               background-position: top left;
               background-repeat: no-repeat;
               background-color: #153B63;*/
               background-color: #D00;
               }
            .navi UL.sub LI.hilite {
               background-color: #2269B5;
               }
               .navi UL.sub LI.last  {
               border-bottom: none;
               }
</STYLE>

</head>

<body>

<DIV ID="primnav">
      <DIV ID="primnav-inner">
         <h2>&Uuml;berschrift</h2>
         <ul class="navi">
            <LI CLASS="hilite"><A HREF="index.html">Oberpunkt 1</A>
               <UL CLASS="sub">
                     <LI><A HREF="index.html">Unterpunkt 1</A></LI>
                     <LI><A HREF="index.html">Unterpunkt 2</A></LI>
                     <LI CLASS="hilite"><A HREF="index.html">Unterpunkt 3</A></LI>
                     <LI><A HREF="index.html">Unterpunkt 4</A></LI>
                     <LI><A HREF="index.html" CLASS="last">Unterpunkt 5</A></LI>
               </UL>
            </LI>
            <LI><A HREF="index.html">Oberpunkt 2</A></LI>
            <LI><A HREF="index.html">Oberpunkt 3</A></LI>
            <LI CLASS="hilite"><A HREF="index.html">Oberpunkt 4</A></LI>
            <LI><A HREF="index.html">Oberpunkt 5</A>
               <UL CLASS="sub">
                  <LI><A HREF="index.html">Unterpunkt 1</A></LI>
                  <LI><A HREF="index.html">Unterpunkt 2</A></LI>
                  <LI CLASS="hilite"><A HREF="index.html">Unterpunkt 3</A></LI>
                  <LI><A HREF="index.html">Unterpunkt 4</A></LI>
                  <LI><A HREF="index.html" CLASS="last">Unterpunkt 5</A></LI>
               </UL>   
            </LI>
            <LI><A HREF="index.html" CLASS="last">Oberpunkt 6</A></LI>
         </UL>
      </DIV>
   </DIV>
   

</body>
</html>


/*edit: titel editiert wegen rausgeparseden html tags */


Zuletzt bearbeitet von sahnemuh am Di 08.02.2005 15:29, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 08.02.2005 15:39
Titel

Antworten mit Zitat Zum Seitenanfang

der IE hat im Bezug auf Listen nen ganz ekligen Bug. Eben diesen mit dem Abstand. Leider hab ich auch nach umfangreicher Suche (ca. 20min bei zuverlässigen quellen *zwinker* ) keine Link gefunden.
evtl könnte es aber schon helfen die Whitespaces am Anfang und Ende rauszulöschen, auch wenn sicher die Übersicht darunter leiden würde. Mal probiert?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Di 08.02.2005 15:44
Titel

Antworten mit Zitat Zum Seitenanfang

beeviZ hat geschrieben:

evtl könnte es aber schon helfen die Whitespaces am Anfang und Ende rauszulöschen, auch wenn sicher die Übersicht darunter leiden würde. Mal probiert?


jop. ich hab die komplette liste hintereinander ohne umbrüche, whitespaces und tabs zusammengestaucht. hilft alles nix.
  View user's profile Private Nachricht senden
shaly

Dabei seit: 19.11.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 08.02.2005 15:44
Titel

Antworten mit Zitat Zum Seitenanfang

ul{
margin:0.5em;
padding:0.5em;
}

damit kann man auf jeden fall die einrückung wegbekommen.
die unterschiedliche interpretation liegt meines wissens nach daran, dass der eine margin und der andere padding verwendet * Keine Ahnung... *
versuch es mal mit em als einheit und weis' beide attribute zu... evtl hast du damit erfolg.
  View user's profile Private Nachricht senden
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Di 08.02.2005 15:51
Titel

Antworten mit Zitat Zum Seitenanfang

shaly hat geschrieben:
ul{
margin:0.5em;
padding:0.5em;
}

damit kann man auf jeden fall die einrückung wegbekommen.
die unterschiedliche interpretation liegt meines wissens nach daran, dass der eine margin und der andere padding verwendet * Keine Ahnung... *
versuch es mal mit em als einheit und weis' beide attribute zu... evtl hast du damit erfolg.


em geht nicht weils pixelgenau in in jedem browser zu sein hat (styleguide...).
ausserdem: eingerückt soll es ja sein. lediglich die horizontalen lücken sollen raus.


Zuletzt bearbeitet von sahnemuh am Di 08.02.2005 15:52, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 08.02.2005 15:53
Titel

Antworten mit Zitat Zum Seitenanfang

em ist ne relative einheit die von (ich glaube der standardschriftgröße die im body definiert ist, bzw vom browser wenn die nicht im body angegeben wird). von daher ist es zwar richtig das man mit padding und margin die einrückung wegbekommt, es ist jedoch nicht immer zwingend 0.5em *zwinker*

muh

probier mal in der form einzurücken:

Code:
   <UL>
    <LI><A HREF="index.html">Unterpunkt 1</A></LI
    ><LI><A HREF="index.html">Unterpunkt 2</A></LI
    ><LI CLASS="hilite"><A HREF="index.html">Unterpunkt 3</A></LI
    ><LI><A HREF="index.html">Unterpunkt 4</A></LI
    ><LI><A HREF="index.html" CLASS="last">Unterpunkt 5</A></LI
    >
   </UL>


sieht bescheuert aus, könnt aber helfen evtl.

ansonsten mal:
li {margin: 0; padding: 0; border: 0;}
?


Zuletzt bearbeitet von beeviZ am Di 08.02.2005 15:54, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
shaly

Dabei seit: 19.11.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 08.02.2005 16:01
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.mediaevent.de/article.php?story=2002111615121782
hier übrigens ein entsprechender artikel..



wenn du eine absolute masseinheit verwendest, wirst du immer das problem haben, dass ein browser scheiße baut und du somit kein einheitliches erscheinungsbild hast.
0.5, also 50% von 0 dagegen bleiben 0, von daher könnte der ansatz evtl funktionieren. ob das dann 0.5 oder 0.7 ist, ist eine andere sache... war eher ein beispiel.
kann man nicht, wie du schon sagtest, indem man dem parent-objekt eine feste maßeinheit wie pixel oder so gibt, das ganze "berechenbar" machen? dann könnte man auch mit em pixelgenau arbeiten.
  View user's profile Private Nachricht senden
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Di 08.02.2005 16:01
Titel

Antworten mit Zitat Zum Seitenanfang

beeviZ hat geschrieben:
em ist ne relative einheit die von (ich glaube der standardschriftgröße die im body definiert ist, bzw vom browser wenn die nicht im body angegeben wird). von daher ist es zwar richtig das man mit padding und margin die einrückung wegbekommt, es ist jedoch nicht immer zwingend 0.5em *zwinker*

muh

probier mal in der form einzurücken:

Code:
   <UL>
    <LI><A HREF="index.html">Unterpunkt 1</A></LI
    ><LI><A HREF="index.html">Unterpunkt 2</A></LI
    ><LI CLASS="hilite"><A HREF="index.html">Unterpunkt 3</A></LI
    ><LI><A HREF="index.html">Unterpunkt 4</A></LI
    ><LI><A HREF="index.html" CLASS="last">Unterpunkt 5</A></LI
    >
   </UL>


sieht bescheuert aus, könnt aber helfen evtl.

ansonsten mal:
li {margin: 0; padding: 0; border: 0;}
?


nää.. das zerhauts komplett. a) rutscht der content der UL dann nach rechts (!?!?!) und b) sind dann immer 2 LI elemente gruppiert und haben eine (*fanfare*) 6px (!?!?!?!) lücke zu den nächsten beiden.

li {margin: 0; padding: 0; border: 0;} bringts nicht.

das leben ist so unfair :/




shaly hat geschrieben:
http://www.mediaevent.de/article.php?story=2002111615121782
hier übrigens ein entsprechender artikel..



wenn du eine absolute masseinheit verwendest, wirst du immer das problem haben, dass ein browser scheiße baut und du somit kein einheitliches erscheinungsbild hast.
0.5, also 50% von 0 dagegen bleiben 0, von daher könnte der ansatz evtl funktionieren. ob das dann 0.5 oder 0.7 ist, ist eine andere sache... war eher ein beispiel.
kann man nicht, wie du schon sagtest, indem man dem parent-objekt eine feste maßeinheit wie pixel oder so gibt, das ganze "berechenbar" machen? dann könnte man auch mit em pixelgenau arbeiten.


ich habe um ehrlich zu sein genau gegenteilige erfahrungen gemacht, was relative und absolute angaben angeht. dennoch würde ich natürlich gerne (alleine der skalierbarkeit wegen) relative angaben nutzen - das geht aber aus genannten gründen nicht (pixelgenau in diesem fall = über das layout / den styleguide gelegt und _alles_ passt...).

einrückungen sind wie gesagt nicht das problem.. um es nochmal zu verdeutlichen:




trotzdem vielen dank für den artikel - werd ich mir nochmal genauer ansehen.


Zuletzt bearbeitet von sahnemuh am Di 08.02.2005 16:16, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] ungewollte Umbrüche beim floaten
listen formatieren mit css
CSS Listen ol gestalten
[CSS]Mindesthöhe bei Listen möglich?
[CSS] - Navigation/Listen Frage
[css] tipp: listen linksbündig setzen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.