[CSS en IE vs FF/Safari] afm. div in IE niet berekend - Softwareontwikkeling

dinsdag 15 april 2008 18:14

Acties:

Topicstarter

Mijn doel is om voor een schaalbare pop-up een DotNetNuke skin te maken. Dit lukt in FF en Safari,
zie IE in onderstaande screenshot:
Afbeeldingslocatie: http://img252.imageshack.us/img252/9992/100percentwithmarginnx5.jpg

Afbeeldingslocatie: http://img252.imageshack.us/img252/9992/100percentwithmarginnx5.jpg

Ik heb uiteraard gezocht maar alle resultaten gaan ervanuit dat je gewoon 100% hoogte wil gebruiken, of ronde hoekjes. Beide lukken me prima zonder tabellen te gebruiken. De 10 pixel marge is essentieel.

Hierin wil ik een divje met ronde hoekjes proppen met een marge eromheen terwijl netjes de afmetingen van de browser gerespecteerd worden.
Dit kan niet met margin: 10px en height: 100% en width: 100% omdat de 20px erbij opgeteld worden, dus 100% + 20 pixels.

Ooit zag ik (weet niet meer waar) dat het mogelijk is om breedte en hoogte te regelen met absolute positionering, zie hieronder.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en-US">
<head>
</head>
<body style="background-color: Red; display: block; height: 100%; width: 100%; margin: 0px">abc
<div style="position: absolute; width: auto; height: auto; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: white;">
    <div style="background-color: silver; margin: 10px;">abc</div>
</div>
</body>
</html>

Is de fout die IE maakt het gevolg van compatibility? En ben ik nu genoodzaakt een tabel (

) te gebruiken? Of zie ik iets stoms over het hoofd?

Coolermaster S4000, 4400+ X2, 2GiB, XFX 7900GTX, Creative X-Fi, 1 TB, Dell 2405FPW: "Nahtlos."

dinsdag 15 april 2008 20:15

Acties:

Verwijderd

ranzig, maar je zou het denk ik wel met een expression/javascript op kunnen lossen. IE pakt idd niet de juiste breedtes als je top; right, bottom en left opgeeft.

height: expression(content.offsetHeight + "px");

dinsdag 15 april 2008 21:10

Acties:

The Merovingian

Topicstarter

Verwijderd schreef op dinsdag 15 april 2008 @ 20:15:
ranzig, maar je zou het denk ik wel met een expression/javascript op kunnen lossen. IE pakt idd niet de juiste breedtes als je top; right, bottom en left opgeeft.

height: expression(content.offsetHeight + "px");

Dat is wel érg vies, dan gebruik ik liever een table... Of misschien kan ik iets proberen met de margin van de body, en overflow: hidden op de body...

Coolermaster S4000, 4400+ X2, 2GiB, XFX 7900GTX, Creative X-Fi, 1 TB, Dell 2405FPW: "Nahtlos."

dinsdag 15 april 2008 21:41

Acties:

crisp

Devver

Pixelated

Het zou al helpen als je een volledige DTD opgeeft zodat IE in standards compliant mode rendered, dan zou in ieder geval IE7 het goed moeten doen.
IE6 blijft een prehistorisch monster though...

Intentionally left blank

dinsdag 15 april 2008 22:15

Acties:

The Merovingian

Topicstarter

Dat werkt:
Afbeeldingslocatie: http://img175.imageshack.us/img175/9011/geluktsp6.jpg

Nu moet ik kijken of alles blijft werken in DNN, als ik de regels uit de topicstart vervang door dit:

code:

1
2
3

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

Goed punt, ik had er niet meer aan gedacht maar quirks mode past inderdaad een andere set regels toe op divs. Met IE6 ga ik me niet eens bemoeien

Coolermaster S4000, 4400+ X2, 2GiB, XFX 7900GTX, Creative X-Fi, 1 TB, Dell 2405FPW: "Nahtlos."

dinsdag 15 april 2008 22:18

Acties:

crisp

Devver

Pixelated

The Merovingian schreef op dinsdag 15 april 2008 @ 22:15:
Nu moet ik kijken of alles blijft werken in DNN, als ik de regels uit de topicstart vervang door dit:
code:
1
2
3
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

Waarom zou je die cruft willen? Een HTML4 Strict DTD is voldoende hoor (view-source voor een voorbeeld

)

(Transitional kan ook maar Strict is de norm)

[ Voor 4% gewijzigd door crisp op 15-04-2008 22:19 ]

Intentionally left blank

dinsdag 15 april 2008 23:00

Acties:

The Merovingian

Topicstarter

Ik dacht, als ik dan tóch bezig ben... naar mijn weten is de fck editor wel xhtml compatible. We zullen zien.

Coolermaster S4000, 4400+ X2, 2GiB, XFX 7900GTX, Creative X-Fi, 1 TB, Dell 2405FPW: "Nahtlos."

dinsdag 15 april 2008 23:37

Acties:

crisp

Devver

Pixelated

The Merovingian schreef op dinsdag 15 april 2008 @ 23:00:
Ik dacht, als ik dan tóch bezig ben... naar mijn weten is de fck editor wel xhtml compatible. We zullen zien.

Alleen IE is niet XHTML compatible dus zit je vast aan text/html (maar dat is geen 'bad thing')

Intentionally left blank

woensdag 16 april 2008 15:32

Acties:

The Merovingian

Topicstarter

Ok, alles lijkt te werken, voor mensen die een doctype willen instellen voor DotNetNuke:

Maak een bestand aan in dezelfde map als je ascx, met de naam skinnaam.doctype.xml (dus zonder ascx)

Stop in dat bestand de tekst:

code:

1
2
3

<SkinDocType>
    <![CDATA[<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
</SkinDocType>

Coolermaster S4000, 4400+ X2, 2GiB, XFX 7900GTX, Creative X-Fi, 1 TB, Dell 2405FPW: "Nahtlos."

woensdag 16 april 2008 15:48

Acties:

crisp

Devver

Pixelated

Ik zou iig geen XML declaration gebruiken, dat duwt IE6 ook in quirksmode

Intentionally left blank