CSS Formatierung für IE deaktivieren

[Marco Weber]

Hallo,

ich habe in meinem Style-Sheet in einer Klasse den Wert "padding-top: 10px;" stehen, den ich jedoch nur für Netscape, Opera und Firefox aktivieren möchte, d.h. beim IE sollte diese Codezeile deaktiviert sein. Ist sowas möglich? Wenn ja, wie?

Sinn der Aktion: beim IE wird im Gegensatz zu den anderen 3 Browsern durch das padding der Abstand zu groß.

Vielen Dank im voraus.

Viele Grüße
Marco

[Ashura]

Hallo Marco.

ich habe in meinem Style-Sheet in einer Klasse den Wert "padding-top: 10px;" stehen, den ich jedoch nur für Netscape, Opera und Firefox aktivieren möchte, d.h. beim IE sollte diese Codezeile deaktiviert sein. Ist sowas möglich? Wenn ja, wie?

Ja. Wenn es sich nicht vermeiden lässt, kannst du den betroffenen Wert unter Anwendung von CSS-Hacks für den IE überschreiben.

Bei umfangreicheren Krücken bietet sich ggf. die Einbindung eines zusätzlichen Stylsheets über die Conditional Comments an.

Einen schönen Samstag noch.

Gruß, Ashura

[Lutz Fechner]

Ist sowas möglich? Wenn ja, wie?

Ja ist es, ein ganzes Kapitel bei selfHTML beschäftigt sich damit, erst lesen, dann fragen bitte!

Sinn der Aktion: beim IE wird im Gegensatz zu den anderen 3 Browsern durch das padding der Abstand zu groß.

Auch diese Erkenntnis ist nicht neu. Weil ich heute meinen Großzügigen Tag habe und es schon spät ist und ich Dir nicht zumuten will, noch lange suchen zu müssen: ;)

Browserweichen etc.

Lutz

[Detlef G.]

Hallo Marco

Sinn der Aktion: beim IE wird im Gegensatz zu den anderen 3 Browsern durch das padding der Abstand zu groß.

Bevor du einen CSS-Hack einsetzt, solltest du ersteinmal padding und margin
des Elternelements und margin-bottom und pading-bottom des darüberliegenden
kontrollieren.

Wenn es bei deiner Seite auf präzise Werte ankommt, solltest du diese auch
selbst setzen. Du weißt nicht, welcher Browser, den du noch nicht getestet
hast, eventuell ähnliche oder noch unpassendere Voreinstellungen hat.

Auf Wiederlesen
Detlef

[Marco Weber]

Hallo Detlef,

ich habe mal etwas mit margin + padding-bottom experimentiert, aber leider ohne Erfolg.

Ich habe mal meinen Code reinkopiert, vielleicht siehst du ja einen Fehler.

.menutitle
{
 font-weight:bold;
 border-top: 1px dashed #000000;
 margin-top: 10px;
 padding-top: 10px;
}

ul, li
{
 margin-left: 0;
 padding-left: 0;
 list-style: none;
 list-style-position: outside;
 font-size: 1em;
}

<ul>
<li class="menutitle"></li>
<li><a href="http://www.yahoo.de/seite1.html" title="seite1">
» Link1</a><br />
<a href="http://www.yahoo.de/seite2.html" title="seite2">
» Link2</a></li></ul>

<ul>
<li class="menutitle"></li>
<li><a href="http://www.yahoo.de/seite3.html" title="seite3">
» Link3</a><br />
<a href="http://www.yahoo.de/seite4.html" title="seite4">
» Link4</a><br />
<a href="http://www.yahoo.de/seite5.html" title="seite5">
» Link5</a></li></ul>

Die Klasse "menutitle" erzeugt eine gestrichelte Linie, welche zwischen den Listen angezeigt wird. Beim IE ist jedoch der Abstand zwischen der Linie und dem Link "Link3" zu groß.

Vielen Dank für alle Tipps.

Viele Grüße
Marco

Sinn der Aktion: beim IE wird im Gegensatz zu den anderen 3 Browsern durch das padding der Abstand zu groß.

Bevor du einen CSS-Hack einsetzt, solltest du ersteinmal padding und margin
des Elternelements und margin-bottom und pading-bottom des darüberliegenden
kontrollieren.

Wenn es bei deiner Seite auf präzise Werte ankommt, solltest du diese auch
selbst setzen. Du weißt nicht, welcher Browser, den du noch nicht getestet
hast, eventuell ähnliche oder noch unpassendere Voreinstellungen hat.

[Detlef G.]

Hallo Marco

»» ul, li  

> {  
>  margin-left: 0;  
>  padding-left: 0;

Wenn du großen Wert darauf legst, dass die Abstände (margin und padding) in
möglichst allen Browsern identisch angezeigt werden, solltest du nicht nur
jeweils den linken Abstand auf 0 setzen sondern alle angeben.
Du kannst stattdessen margin: 0; padding: 0; notieren und anschließend je
nach Bedarf für ul oder/und li jeweils genau den Abstand definieren, den
du wünschst.

»» font-size: 1em;

Das ist hier nicht nötig. Es sagt eigentlich nur, genauso groß wie beim
Elternelement, also genauso groß, wie es auch ohne Angabe wäre.

»» <ul>  

> <li class="menutitle"></li>

Wozu das leeres Listenelement?
Wenn da noch etwas rein soll, dann schreib es auch rein, bevor du am
Layout feilst. Wenn da nichts rein soll, lass es weg und gebe dem ersten
benutzten Listenelement eine Klasse, oder definiere die Eigenschaften
für den Border und die Abstände der ul.

»» <li><a href="http://www.yahoo.de/seite1.html" title="seite1">  

> » Link1</a><br />

^^^^^^
Das ist doch Blödsinn.

»» <a href="http://www.yahoo.de/seite2.html" title="seite2">  

> » Link2</a></li></ul>

Wozu soll eine Liste sinnvoll sein, die nur einen Listenpunkt enthält, dafür
aber alle Einträge in diesem einen Listenpunkt mittels <br /> getrennt sind?

Die Klasse "menutitle" erzeugt eine gestrichelte Linie, welche zwischen den Listen angezeigt wird. Beim IE ist jedoch der Abstand zwischen der Linie und dem Link "Link3" zu groß.

Der IE stellt leere Elemente immer mindestens so hoch da, wie für einen Text
darin nötig wäre, selbst dann, wenn das Element keinen enthält.
Also, entweder du füllst den ersten Listenpunkt, oder du lässt ihn weg.

Auf Wiederlesen
Detlef

[Marco Weber]

Hallo Detlef,

Wenn du großen Wert darauf legst, dass die Abstände (margin und padding) in
möglichst allen Browsern identisch angezeigt werden, solltest du nicht nur
jeweils den linken Abstand auf 0 setzen sondern alle angeben.
Du kannst stattdessen margin: 0; padding: 0; notieren und anschließend je
nach Bedarf für ul oder/und li jeweils genau den Abstand definieren, den
du wünschst.

ist geändert.

»» <ul>

<li class="menutitle"></li>

>   
> Wozu das leeres Listenelement?  
> Wenn da noch etwas rein soll, dann schreib es auch rein, bevor du am  
> Layout feilst. Wenn da nichts rein soll, lass es weg und gebe dem ersten  
> benutzten Listenelement eine Klasse, oder definiere die Eigenschaften  
> für den Border und die Abstände der ul.  
  
vielen Dank, genau das war der Fehler. :-)  
  
  

> ~~~html

»» <li><a href="http://www.yahoo.de/seite1.html" title="seite1">  

> > » Link1</a><br />

^^^^^^
Das ist doch Blödsinn.

»» <a href="http://www.yahoo.de/seite2.html" title="seite2">

» Link2</a></li></ul>

>   
> Wozu soll eine Liste sinnvoll sein, die nur einen Listenpunkt enthält, dafür  
> aber alle Einträge in diesem einen Listenpunkt mittels <br /> getrennt sind?  
  
Wenn ich jeden Listenpunkt als Liste definiere, erhalte ich zwischen den Listenpunkten Abstände, die dort eigentlich nicht sein sollten. Kann man die irgendwie verkleinern oder "ausblenden"?  
  
Aktueller Zustand:  
  
Listenpunkt1  
Listenpunkt2  
Listenpunkt3  
  
  
Abstand bei der Listenversion:  
  
Listenpunkt1  
  
Listenpunkt2  
  
Listenpunkt3  
  
  
Viele Grüße  
Marco

[Detlef G.]

Hallo Marco

Wenn ich jeden Listenpunkt als Liste definiere, erhalte ich zwischen den Listenpunkten Abstände, die dort eigentlich nicht sein sollten.

Jeden Listenpunkt nocheinmal als Liste?

Kann man die irgendwie verkleinern oder "ausblenden"?

Das sollte durch margin: 0; padding: 0; bereits geschehen sein.

Hast du eventuell vergessen, die <br /> herauszunehmen?

Ich würde dafür eventuell eine verschachtelte Liste verwenden:

<ul>  
  <li><h2>Menütitel</h2>  
    <ul>  
      <li><a href="seite1.html" title="Seite1">» Link1</a></li>  
      <li><a href="seite2.html" title="Seite2">» Link2</a></li>  
    </ul>  
  </li>  
  <li><h2>Menütitel</h2>  
    <ul>  
      <li><a href="seite3.html" title="Seite3">» Link3</a></li>  
      <li><a href="seite4.html" title="Seite4">» Link4</a></li>  
      <li><a href="seite5.html" title="Seite4">» Link5</a></li>  
    </ul>  
  </li>  
</ul>  

ul, li {  
  margin: 0;  
  padding: 0;  
  list-style: none outside;  
}  
ul h2 {  
  border-top: 1px dashed #000;  
  font-weight:bold;  
  margin: 10px 0 0 0;  
  padding: 10px 0 0 0;  
  font-size: 1em;  
}

Auf Wiederlesen
Detlef

[Cyx23]

Hallo,

Sinn der Aktion: beim IE wird im Gegensatz zu den anderen 3 Browsern durch das padding der Abstand zu groß.

Vorsorglich würde ich das auch jeweils mit den IE 5, 5.5 und 6 anschauen und erst dann ggf.
eine CSS-Weiche oder conditional comments einsetzen. Der Box-bug wird es wohl nicht sein,
hast du ein Beispiel online?

Grüsse

Cyx23