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

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
ps3web

ps3web hat kostenlosen Webspace.

16:15, 17.8.2008
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
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

mergener hat kostenlosen Webspace.

16:24, 17.8.2008
1. Welchen Doctyp benutzt du denn?
2. Wie Machst du das in Java Script?
~~t*****b~~

16:38, 17.8.2008
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.

Autor dieses Themas

16:39, 17.8.2008

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

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city