Abstand bei HR in Tabellenzeile zu groß

[Hondo]

Hallo,
möchte in einer Tabelle die eine Zeile von der anderen mit einem <hr> abgrenzen. Aber es bleibt ein Rand den ich nicht wegbekomme. Habe cellpadding und cellspacing auf 0 Stehen.
Hier die Zeile:

<tr><td><hr size="1" style="margin-bottom: 0px; margin-top: 0px;"></td></tr>

Wie gehts richtig?

Gruß Andreas

[x-plosiv]

hallo

und wie sieht es mit den rändern der tabelle aus?
du musst natürlich mind. die des betroffen <tr> auch auf null setzen

ev. hilft es dir ja weiter

[Hondo]

Hallo,

du musst natürlich mind. die des betroffen <tr> auch auf null setzen

nein, das haut nicht hin. Weder beim td, noch beim tr, und auch beim table-tag nicht.
Zumindest nicht das Style-Element margin-top bzw. margin-bottom.

Gruß Andreas

[Mathias Bigge]

Hi Hondo,

möchte in einer Tabelle die eine Zeile

Zeile oder Zelle?

Wenn's die Zeile sein soll, versuch doch mal hr zu formatieren.

Viele Grüße
Mathias Bigge

[Hondo]

Hallo,

Wenn's die Zeile sein soll, versuch doch mal hr zu formatieren.

ist der Style: style="margin-bottom: 0px; margin-top: 0px;" nicht schon eine Formatierung?
Verstehe ich jetzt nicht.

Hondo

(warum nennt sich Andreas hier Hondo?)

[Mathias Bigge]

Hi Hondo,

ist der Style: style="margin-bottom: 0px; margin-top: 0px;" nicht schon eine Formatierung?

Dochdoch, da ist aber noch mehr drin:
http://de.selfhtml.org/html/text/trennlinien.htm#gestalten_css

Viele Grüße
Mathias Bigge

[Hondo]

Hallo,
hab den Link kurz überflogen, und es gibt für die Gestaltung des oberen und unteren Randes eben nur diese beiden Elemente.
Aber ich werde jetzt die Linien weglassen, und es anderst versuchen.

Gruß Andreas

[Mathias Bigge]

Hi Hondo,

Aber ich werde jetzt die Linien weglassen, und es anderst versuchen.

Kannst Du natürlich, etwa eine Linie aus einem 1 oder 2 Pixel hohem gif bauen. Mich hat die Sache aber dann doch interessiert und ich habe mal ein bisschen experimentiert. Meines Erachtens sollte der hr-Bereich immer etwa 7 Pixel hoch sein, was wohl kein Problem sein dürfte. Die anderen Abstände scheinen mir von den umgebenden Elementen zu kommen. Lad Dir mal das in einen Editor oder Browser.

<hr style="color: Blue; line-height: 4px;">
<h1>Dies ist eine &Uuml;berschrift 1.</h1>
<hr style="margin-top: 0; margin-bottom: 0; line-height: 3px; height: 2px; width: 300px;">
<h2>Dies ist eine &Uuml;berschrift2.</h2>
<hr style="height: 4px; line-height: 6px; margin: 0; padding: 0; width: 500px;">
<h3 style="margin: 0; padding: 0;">Dies ist eine &Uuml;berschrift3.</h3>
<hr>
<p>Dies ist ein Absatz</p>
<hr>

Alle Versuche, die hr-Höhe über CSS zu beeinflussen, sind gescheitert, die Höhe scheint mir auch nicht abhängig zu sein von der Höhe der umgebenden Elemente, was ich erst gehofft hatte. Tatsächlich scheint mir dennoch der Großteil der Abstände von den umgebenden Elementen zu stammen.

Vielleicht kann mal einer der CSS-Experten was dazu sagen? Habe ich etwas übersehen oder noch dümmer angestellt als sonst?

Viele Grüße
Mathias Bigge

[MudGuard]

Hi,

Alle Versuche, die hr-Höhe über CSS zu beeinflussen, sind gescheitert, die Höhe scheint mir auch nicht abhängig zu sein von der Höhe der umgebenden Elemente, was ich erst gehofft hatte. Tatsächlich scheint mir dennoch der Großteil der Abstände von den umgebenden Elementen zu stammen.

Vielleicht kann mal einer der CSS-Experten was dazu sagen? Habe ich etwas übersehen oder noch dümmer angestellt als sonst?

<div style="background-color:red;height:10px;margin:0;padding:0;border:none;"></div>
<hr style="color:yellow;background-color:yellow;height:1px;margin:0;padding:0;border:none;">
<div style="background-color:red;height:10px;margin:0;padding:0;border:none;"></div>

ergibt in Browsern erwartungsgemäß eine 1px hohe gelbe Linie, an die oben und unten direkt die roten Flächen angrenzen.
Der IE hat da aber andere Vorstellungen, zwischen rot und gelb sind jeweils 7px, die Gesamthöhe des Bereichs zwischen den roten Flächen somit 15px.

cu,
Andreas

[Mathias Bigge]

Hi MudGuard,

Der IE hat da aber andere Vorstellungen, zwischen rot und gelb sind jeweils 7px, die Gesamthöhe des Bereichs zwischen den roten Flächen somit 15px.

Gibt es somit keine browserübergreifende Lösung, diesen manchmal nervigen Abstand loszuwerden?

Viele Grüße
Mathias Bigge

[MudGuard]

Hi,

Der IE hat da aber andere Vorstellungen, zwischen rot und gelb sind jeweils 7px, die Gesamthöhe des Bereichs zwischen den roten Flächen somit 15px.
Gibt es somit keine browserübergreifende Lösung, diesen manchmal nervigen Abstand loszuwerden?

Browserübergreifend schon.
Nach etwas Experimentieren hab ich einen Weg gefunden, daß es auch browser- und IE-übergreifend klappt:

HTML:
<div class="vorher"></div>
<hr>
<div class="nachher"></div>

CSS:
.vorher  { margin-bottom:0;                                        background-color:silver;height:30px; }
.nachher { margin-top:0;                                           background-color:silver;height:30px; }

hr { height:1px; margin:0; border:none; padding:0;                 color:red;background-color:red; }

* html hr  { margin-top:-7px; }
* html .nachher { margin-top:-13px;                                height:30px; }

Für normale Browser: Element vorher bekommt unteren margin 0, Element nachher bekommt oberen margin 0, das hr bekommt margin und padding 0, keine border, Höhe 1 (zum Färben Vorder- und Hintergrundfarbe, da es hier Unterschiede zwischen den Browsern gibt)
Dann die Korrekturen für den IE:
Das hr bekommt oberen margin -7px, damit es den Gates-gegebenen Abstand nach oben verliert.
Das folgende Element bekommt einen oberen margin von -13px.
Der Wert für diesen Margin scheint sich aus max(-7, 14-heightvomhr) zu berechnen.
Aus mir schleierhaften Gründen muß die height für das nachfolgende div erneut angegeben werden, sonst stimmt sie im IE nicht.

cu,
Andreas

[Mathias Bigge]

Hi MudGuard,

Danke, dass Du Dich da nochmal drangesetzt hast, ich hatte lange nach einer Lösung gegoogelt, aber nichts gefunden. Anscheinend hast Du da etwas Neues entdeckt. Könnte ich Dich motivieren, einen Kurzartikel für die Tipps und Tricks daraus zu machen? Wäre doch nicht mehr viel Arbeit und was Innovatices dazu...

Viele Grüße
Mathias Bigge

[MudGuard]

Hi,

Danke, dass Du Dich da nochmal drangesetzt hast, ich hatte lange nach einer Lösung gegoogelt, aber nichts gefunden. Anscheinend hast Du da etwas Neues entdeckt. Könnte ich Dich motivieren, einen Kurzartikel für die Tipps und Tricks daraus zu machen? Wäre doch nicht mehr viel Arbeit und was Innovatices dazu...

Naja, innovativ?
Ich würde bei dieser Aufgabenstellung (1px-Linie zwischen 2 Elementen) die wesentlich einfachere Variante

#bla   { margin-bottom:0;                                        background-color:silver;height:30px;
         border-bottom:1px solid yellow; }
#blubb { margin-top:0;                                           background-color:silver;height:30px; }

<div id="bla"></div>
<div id="blubb"></div>

benutzen, ganz ohne hr.

Muß ich denn meinen Anteil an den TnT-Artikeln wegen sowas von
  _        ___
5,5% auf 8,108% erhöhen? Es gibt hier doch genügend Leute, die noch keine TnT geschrieben haben ...

cu,
Andreas

[Mathias Bigge]

Hi MudGuard,

Naja, innovativ?
Ich würde bei dieser Aufgabenstellung (1px-Linie zwischen 2 Elementen) die wesentlich einfachere Variante
#bla   { margin-bottom:0;                                        background-color:silver;height:30px;
         border-bottom:1px solid yellow; }
#blubb { margin-top:0;                                           background-color:silver;height:30px; }

<div id="bla"></div>
<div id="blubb"></div>

benutzen, ganz ohne hr.

Gut, Workarounds gibt es, mich hat aber doch verwundert, dass in all den TuTs zu hr keine Lösung für dieses Problem angegeben war.

Es gibt hier doch genügend Leute, die noch keine TnT geschrieben haben ...

Wohl war, aber es war jetzt Deine Idee...

Viele Grüße
Mathias Bigge