fux: hr in IE 7 viel höher; in IE 8 wieder anders

Hallo,

habe eine style-Definition
hr.adminmenu { text-align:left; width:350px; height:3px; color:#D3D3D3; background-color:#D3D3D3; border: 1px solid #004080; margin:14px 0px }

Im IE 7 wird die hr um etliche Pixel höher angezeigt (vert. margin + ca. 5px)
Im IE 8 und FF nahezu gleich - bis auf ...

... siehe Beispiel http://de.selfhtml.org/html/text/trennlinien.htm#gestalten_css - hier ist ferner zu sehen, dass IE 8 und FF height unterschiedlich interpretieren. FF nimmt die height inkl. border-width, IE nimmt height nur für die innere box (background).

Gibt es eine Lösung rein in CSS um auf gleiches Aussehen in den Browsern zu kommen ohne serverseite Switches zu nehmen oder dieses IE-Konstrukt <!--[if IE]>?

Gruß, Robert

  1. Lieber fux,

    hr.adminmenu { text-align:left; width:350px; height:3px; color:#D3D3D3; background-color:#D3D3D3; border: 1px solid #004080; margin:14px 0px }

    welchen Sinn hat dieses text-align bei einer horizontalen Linie? Ich bin mir sicher: keinen.

    Im IE 7 wird die hr um etliche Pixel höher angezeigt (vert. margin + ca. 5px)
    Im IE 8 und FF nahezu gleich - bis auf ...

    Prüfe, ob die entsprechenden Browser Unterschiede in ihrem Default-Stylesheet aufweisen und setze entsprechende CSS-Regeln, um diesem Umstand Rechnung zu tragen.

    Gibt es eine Lösung rein in CSS um auf gleiches Aussehen in den Browsern zu kommen ohne serverseite Switches zu nehmen oder dieses IE-Konstrukt <!--[if IE]>?

    Wenn das Problem nicht an unteschiedlichen Default-Stylesheets lag, dann sehe ich da keine Möglichkeit, ohne diese Conditional Comments auszukommen.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. welchen Sinn hat dieses text-align bei einer horizontalen Linie? Ich bin mir sicher: keinen.

      Hallo Felix,

      da täuschst Du Dich! In einem der Browser wird sonst die Linie horizontal zentriert angezeigt.

      Prüfe, ob die entsprechenden Browser Unterschiede in ihrem Default-Stylesheet aufweisen und setze entsprechende CSS-Regeln, um diesem Umstand Rechnung zu tragen.

      Und welche CSS-Elemente sollen noch einen Einfluss haben außer die, die ich explizit gesetzt habe?
      Default Stylesheets zu bekommen (IE?) und komplett zu vergleichen dürfte keine einfache Aufgabe sein.

      Schöne Grüße,
      Robert

      1. Hi,

        Und welche CSS-Elemente sollen noch einen Einfluss haben außer die, die ich explizit gesetzt habe?

        Du meinst CSS-Eigenschaften.

        Default Stylesheets zu bekommen (IE?) und komplett zu vergleichen dürfte keine einfache Aufgabe sein.

        Die aktuellen Werte der CSS-Eigenschaften herauszubekommen, sollte kein grosses Problem sein - entsprechende Debug-Tools existieren für alle relevanten Browser.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        1. Default Stylesheets zu bekommen (IE?) und komplett zu vergleichen dürfte keine einfache Aufgabe sein.

          Die aktuellen Werte der CSS-Eigenschaften herauszubekommen, sollte kein grosses Problem sein - entsprechende Debug-Tools existieren für alle relevanten Browser.

          Konnte Nichts ergooglen, womit ich die Default Styles des IE bekommen kann.
          Hast Du eine konkrete Info?

          Hier hat sich einer die Mühe gemacht, die Default Styles für versch. Browser (IE 8 nur beta) zusammenzuschreiben:
          http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

          Für hr allerdings keine neuen Erkenntnisse.

          Dass height von FF und IE 8 unterschiedlich interpretiert wird, ist anscheinend nicht durch CSS styling beeinflussbar, da hart codiert.

          Gruß, Robert

          1. Hi,

            Die aktuellen Werte der CSS-Eigenschaften herauszubekommen, sollte kein grosses Problem sein - entsprechende Debug-Tools existieren für alle relevanten Browser.

            Konnte Nichts ergooglen, womit ich die Default Styles des IE bekommen kann.
            Hast Du eine konkrete Info?

            Ich sprach von den aktuell auf ein Element angewandten Formatierungen.

            Im IE 8 bspw. [F12] drücken, und nachschauen.

            MfG ChrisB

            --
            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
            1. Ich sprach von den aktuell auf ein Element angewandten Formatierungen.

              Im IE 8 bspw. [F12] drücken, und nachschauen.

              Hi Chris,

              mit F12 = IE 8 Entwicklertools erhalte ich nur die Info über die von mir selbst gesetzten CSS-Eigenschaften zu dem Element, das hilft mir leider nicht weiter.

              Habe wohl schon alle das Aussehen von hr beeinflussende Eigenschaften gesetzt.
              Mir würden nur noch die intern gesetzten Vorgaben zu hr evtl. weiterhelfen.
              MS IE ist ja hierzu leider nicht so offen wie z. B. Firefox.

              Gruß, Robert