Charlie: FF super; IE stellt es falsch dar

Aloa,

also mit folgendem Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>test</title>
<style media="screen">
.naviul {
list-style-type:none;
padding:0;
margin:0;
}
.q_f{
font-weight:bold;
height:18px;
padding: 7px 0px 0px 9px;
}
.q_f_dotted_line{
width:161px;
background: url(css-dotted.gif) repeat-x;
height:1px;
line-height:1px;
padding:0;
margin:0;
border:0
}
.l_h_n{
padding-left:10px;
line-height:15px;
}
</style>
</head>
<body>
 <ul class="naviul">
  <li class="q_f">ALOA</li>
  <li class="q_f_dotted_line"></li>
  <li class="l_h_n">Testtext</li>
 </ul>
</body>
</html>

wird die q_f_dotted_line im FF richtig dargestellt, also nur 1px hoch und im IE ist sie sehr hoch.

Das Bild css-dotted.gif ist 2px breit und 1px hoch und enthält im 1. 1x1px die Farbe Schwarz un im 2 1x1px durchsichtig.

Was kann ich hier noch machen?

lg
ein schon sehr ratloser
Charlie

  1. hi,

    <li class="q_f_dotted_line"></li>

    ist das ein schlechter scherz?
    du verwendest ein zusätzliches, inhaltsleeres listenelement - nur um eine gestrichelte linie darzustellen?

    da würde ich behaupten wollen, jeder tabellenverschachtler hat mehr respekt vor HTML als du ...

    wird die q_f_dotted_line im FF richtig dargestellt, also nur 1px hoch und im IE ist sie sehr hoch.

    ergänze die styledefinition einfach um ein overflow:hidden.
    dann hast du gesehen, wie es auch im IE funktioniert - und kannst es jetzt endlich wegschmeißen, um dir eine vernünftige möglichkeit zu überlegen, wie du die gewünschte darstellung erreichst.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Aloa,

      <li class="q_f_dotted_line"></li>

      ist das ein schlechter scherz?
      du verwendest ein zusätzliches, inhaltsleeres listenelement - nur um eine gestrichelte linie darzustellen?

      Na, dann zeig mir mal bitte wie ich eine sehr dünne gepunktete Linie im IE darstellen kann ohne ein Bild.:-)

      ergänze die styledefinition einfach um ein overflow:hidden.

      Hätt ich versucht, aber gebracht hat es 0. Sonst noch eine Idee.

      lg
      Charlie

      1. Ahoi Charlie,

        Na, dann zeig mir mal bitte wie ich eine sehr dünne gepunktete Linie im IE darstellen kann ohne ein Bild.:-)

        du kennst das border-Attribut?

        MfG

        1. Aloa,

          du kennst das border-Attribut?

          Ok, dann probie mal dies:
          <p style="border-width:thin; border-color:#000000; border-bottom-style:dotted; padding:1px;">
          in FF und IE aus.
          UND dann erklär mir mal einer wie man es sonst noch lösen könnte, dass IE eine gepunktete Linie genauso schlank und schön anzeigt wie der FF.

          lg
          Charlie

          1. Ahoi Charlie,

            UND dann erklär mir mal einer wie man es sonst noch lösen könnte, dass IE eine gepunktete Linie genauso schlank und schön anzeigt wie der FF.

            also ehrlichgesagt sieht für mich (ich hab schlechte augen) die
            gepunktete linie im FF wie ein ganz dünner strich aus. im IE seh ich
            immerhin des es eine gepunktete linie ist.

            MfG

            1. Hi Daniel,

              also ehrlichgesagt sieht für mich (ich hab schlechte augen) die
              gepunktete linie im FF wie ein ganz dünner strich aus. im IE seh ich
              immerhin des es eine gepunktete linie ist.

              Ja im FF wird es richtig dargestellt, da es wirklich fast eine Linie ist.
              Wenn du dir mal etwas Zeit nimmst, dann wirst du im Internet einige Artikel finden, die dieses Problem behandeln.

              Aber ich muss ja deas Design von unserem Grafiker umsetzen und dies wurde so beschlossen, daher kann ich jetzt nicht einfach eine grobe gepunktete Linie machen.

              ABER dies hilft mir bei meinem Problem, dass der IE eine Linie, die nur 1 px hoch sein soll, trotzdem sehr hoch anzeigt.

              Was kann ich da machen bzgl. IE hält sich nicht an die CSS-Eigenschaften:
              height:1px;
              line-height:1px;

              lg
              Charlie

              1. Hi Charlie,

                das Problem hatte ich auch. Schau mal in diesen thread: http://forum.de.selfhtml.org/archiv/2005/7/t110843/#m696947/

                Kannst ja mal den workaround aus Cyx23' Link versuchen. Ich bin mittlerweile wieder auf eine solid Linie umgestiegen ;-)

                Gruß,
                Onkel Schnitzel

              2. Aber ich muss ja deas Design von unserem Grafiker umsetzen und dies wurde so beschlossen, daher kann ich jetzt nicht einfach eine grobe gepunktete Linie machen.

                Ich versteh das immer nicht, was für eine Logik dahinter stecken soll. Wenn der IE zu doof ist, der es also nicht her gibt, dann geht das halt nicht. EIn Layout kann unmöglich an einer Linie scheitern! Es muss jedem Web-Entwickler und auch Designern, die fürs Web designen doch ohnehin klar sein, dass es quasi unmöglich ist, ein Design 100% für alle Browser (und auch nur 100% für alle modernen Browser; streng genommen zählt der IE da ja nichtmal dazu!) gleich aussehen zu lassen.

                Ich verstehe diese Verbissenheit nicht, mit der da rangegangen wird.

                Dann ist es im IE halt eine mehr gestrichelte als gepunktete Linie. Den Nutzern wird das gar nicht auffallen!

          2. Ahoi Charlie,

            <p style="border-width:thin; border-color:#000000; border-bottom-style:dotted; padding:1px;">

            warum nicht border-width: 1px; sondern thin? thin <> so dünn wie geht
            sondern standardeinstellung des browser.

            MfG

            1. Aloa Daniel,

              warum nicht border-width: 1px; sondern thin? thin <> so dünn wie geht

              UND genau da tritt das Problem des IE auf:
              Wenn du es im IE getestet hast, wirst du bemerkt haben, dass der IE dann dashes, also kleine Striche draus macht und keine Punkte mehr.:-(

              lg
              Charlie

      2. hi,

        Na, dann zeig mir mal bitte wie ich eine sehr dünne gepunktete Linie im IE darstellen kann ohne ein Bild.:-)

        ich hatte mich nicht auf die verwendung eines hintergrundbildes an sich bezogen, sondern auf das absolut unnötige, inhaltsleere element.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Ahoi Charlie,

    <li class="q_f_dotted_line"></li>

    hier schonmal ein &nbsp; eingesetzt?

    MfG

    1. Aloa Daniel,

      hier schonmal ein &nbsp; eingesetzt?

      aber natürlich.
      Bringt aber nur minimal was.
      Aber schön langsam geb ich auf. :-(

      lg
      Charlie