kostenloser Webspace werbefrei: lima-city


Javascript: element.style.height nur im Quirks-Mode?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ps3web

    Kostenloser Webspace von ps3web

    ps3web hat kostenlosen Webspace.

    Hallo,

    ich habe eine Frage an euch. Ich habe ein Funktion, die verschiedenen Elementen über element.style.height eine Höhe zuweist. Das mache ich, damit alle Elemente die gleiche Höhe haben, da sie schön nebeneinander floaten sollen. Jetzt habe ich aber folgendes Problem: wenn ich den Doctype setze, springt der Browser ja in den Standardkonformen Modus, dann kann ich dem Element über element.style.height keine Höhe mehr zuweisen. Ohne Doctype, im Quirks-Mode, klappt das Script super. Ich würde die Seite ja auch ohne Doctype nutzen, nur leider ignoriert der liebe Internet-Explorer dann die CSS-Eigenschaft margin:auto;

    Hat jemand eine lösung, wie ich einem Element über Javascript eine bestimmte Höhe zuweisen kann?

    Danke,
    ps3web
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 1. Welchen Doctyp benutzt du denn?
    2. Wie Machst du das in Java Script?
  4. t*****b

    Im Quirks-Mouds kann man so gut wie allen Elementen ein Height-Atribut (Universalatribut) geben, bei XHTML (strict) jedoch nur den Elementen, bei denen es festgelegt ist (welche dies sind, siehe zB bei selfHTML). Versuche, XHTML tranisitional zu verwenden, evtl. geht es damit oder verwende Elemente, bei denen es ein Height-Atribut gibt. Ansonsten zeige mal die Seite/den Quellcode, damit man sich das mal anschauen und ggf. direkter weiterhelfen kann.
  5. Autor dieses Themas

    ps3web

    Kostenloser Webspace von ps3web

    ps3web hat kostenlosen Webspace.

    1. Folgender Doctype:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    2. Javascript:

    function align_height() {
            maxheight = 0;
            list = document.getElementById("imagelist");
            Images = list.getElementsByTagName("li");
            for (i = 0; i < Images.length; i++) {
                    if (Images[i].offsetHeight > maxheight)
                            maxheight = Images[i].offsetHeight;
            }
            for (i = 0; i < Images.length; i++) {
                    Images[i].style.height =  maxheight - 18; // padding und border abziehen
            }
    }


    Und der HTML-Code dazu:

    <ul id='imagelist'>
            <li>
                    <a rel='lightbox[gallery]' title='Blaue Berge: Testbeschreibung mit weiteren Erl&auml;uterungen' href='uploaded/image-48a7fcb790f58.jpg' id='41'>
                            <img src='uploaded/thumb-48a7fcb790f58.jpg' width='152' height='114' alt='Testbeschreibung mit weiteren Erl&auml;uterungen' />
                            <div class='title'>Blaue Berge</div>
                    </a>
            </li>
    </ul>


    Achso, dann liegt es sicher daran, dass ich das li-Element per CSS zu einem block-Element mache, es aber eigentlich ein inline-Element ist?

    Hmm... mit einem Transitional-Doctype klappt es im IE, aber nichtmehr im Firefox...

    Also ich habe es jetzt so gemacht, dass ich mit PHP überprüfe welcher Browser es ist und beim IE dann den Doctype ausgebe, dann klappts bei beiden.


    Beitrag geändert: 17.8.2008 17:18:24 von ps3web
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!