[CSS] style.marginBottom im FF

**wahsaga** · 25.07.2006, 12:18

Re: [CSS] style.marginBottom im FF

Und wenn du die Angabe direkt im CSS vorgibst, wirkt sie dann?

**Patrick_PQ** · 25.07.2006, 12:40

Hallo wahsaga,

ups ... auch nicht - da scheint das Problem wohl nicht bei JS ui liegen. Ich habe folgendes HTML:

PHP-Code:


<ul>

    <li id="erster">erster Punkt

        <ul>...</ul>

    </li>

    ....

</ul>

Für id="erster" soll nun margin-bottom eingestellt werden. Ich befinde mich noch im Aufbau der Seite und habe zunächst kein weiteres CSS angegeben.

Kannst du mir helfen?

**wahsaga** · 25.07.2006, 12:44

Original geschrieben von Patrick_PQ
Kannst du mir helfen?

Wobei?
Weil es mit dem margin "nicht funzt"?

Dann erstelle bitte zunächst eine vollständige, validierte Testseite.

**Patrick_PQ** · 25.07.2006, 12:50

lt. validator auf w3.org ist die Seite ok

PHP-Code:


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>OutlookBar</title>

<meta name="generator" content="Ulli Meybohms HTML EDITOR">

<style type="text/css">

<!--

#menu1{

    margin-bottom:150px;

}

-->

</style>

</head>

<body>

<ul id="outlookbar">

    <li><a class="menu" href="#">Menu 1</a>

        <ul id="menu1">

            <li class="menuitem"><a href="#"...>Menuitem 1.1</a></li>

            <li class="menuitem"><a href...>Menuitem 1.2</a></li>

            <li class="menuitem"><a href="#"><...>Menuitem 1.3</a></li>

            <li class="menuitem"><a href="#"><...>Menuitem 1.4</a></li>

        </ul>

    </li>

    <li><a class="menu" href="#">Menu 2</a></li>

    <li><a class="menu" href="#">Menu 3</a>

        <ul id="menu3">

            <li class="menuitem"><a href...>Menuitem 3.1</a></li>

            <li class="menuitem"><a href...>Menuitem 3.2</a></li>

            <li class="menuitem"><a href="#"><...>Menuitem 3.3</a></li>

            <li class="menuitem"><a href="#"><...>Menuitem 3.4</a></li>

        </ul>

    </li>

    <li><a class="menu" href="#">Menu 4</a></li>

</ul>

<script type="text/javascript">

<!--

alert("HALT!");

document.getElementById("menu1").style.marginBottom="75px";

-->

</script>

</body>

</html>

Per CSS wird ein margin-bottom von 150px gesetzt - anschließend per JS auf 75 halbiert, aber diese Einstellung nimmt der FF nicht.

Hast du hierzu eine Idee?

**Patrick_PQ** · 25.07.2006, 14:24

... wenn ich jetzt die Zeile mit "alert("HALT"!);" rausnehme klappt es - dummerweise muss ich den Wert für den Rand erst noch ermitteln. Was ist das denn für ein Mist ?

**ghostgambler** · 25.07.2006, 15:38

Original geschrieben von Patrick_PQ
... wenn ich jetzt die Zeile mit "alert("HALT"!);" rausnehme klappt es - dummerweise muss ich den Wert für den Rand erst noch ermitteln. Was ist das denn für ein Mist ?

schonmal was von '<body onload="">' gehört?!

**Patrick_PQ** · 26.07.2006, 08:02

Hallo ghostgambler,

ja, das ist mir bekannt - ändert aber nichts an der Sache ... FF akzeptiert die Einstellung nur, wenn sie als allererstes gesetzt wird. Sobald andere Aktion vorher erfolgen wird marginBottom ignoriert. Ob ich das jetzt dirket mit JS in den body reinschreibe oder onload verwende ist egal. Auch wenn ich per onclick manuell das Ereignis auslöse kommt immer aufs selbe raus.

Hat noch jemand eine Idee woran das liegt?

Danke für eure Hilfe

**Patrick_PQ** · 26.07.2006, 08:14

... eins noch hinterher: paddingBottom wird akzeptiert - das Problem scheint die Eigenschaft marginBottom zu sein. Konnte aber bisher nichts im Netz finden.

**Patrick_PQ** · 26.07.2006, 10:34

... ich habe jetzt noch Opera8 und Netscape7 getestet - überall das gleiche ... marginBottom wird hier nicht akzeptiert und es wird auch kein Fehler ausgegeben. Wenn ich das dirket per style formatiere wird der untere Abstand berücksichtigt.

Ich drehe langsam durch mit diesen ganzen Browsern und ihren Eigenheiten.

**ghostgambler** · 26.07.2006, 12:19

keine Ahnung was du willst, es funktioniert einwandfrei mit deinem Beispielcode, im FF, IE und Op

**Kropff** · 26.07.2006, 12:51

ich habe auch absolut keine probleme mit dem code.

gruß
peter

**Patrick_PQ** · 26.07.2006, 13:12

Hallo Peter/ghostgambler,

wir bei dir der untere Abstand per JS angepasst? Ähm, ich habe FF1.0.6 und bei mir tut sich nix - habt ihr andere Versionen?

habe jetzt nochmal was ganz einfaches probiert ...

PHP-Code:


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Test</title>

<meta name="generator" content="Ulli Meybohms HTML EDITOR">

</head>

<body >

<p id="absatz">Dies ist ein Test<br /></p>

<ul>

    <li>erster</li>

    <li id="zweiter">zweiter</li>

    <li>dritter</li>

    <li>vierter</li>

</ul>

<script type="text/javascript">

<!--

document.getElementById("zweiter").style.marginBottom=

document.getElementById("absatz").offsetHeight+"px";

-->

</script>

</body>

</html>

Der untere Abstand wird nur im IE geändert - nicht im FF. Wenn ich statt der Ermittlung von offsetHeight einen festen Wert eintrage klappts auch im FF ...

**Kropff** · 26.07.2006, 13:29

bei dem heißt das auch outerHeight und nicht offsetHeight

gruß
peter

**Patrick_PQ** · 26.07.2006, 13:41

also offsetHeight gibt mir auch im FF die Höhe einer Box an ... bei outerHeight bekomme ich nur undefined zurück - das habe ich getestet.

[CSS] style.marginBottom im FF