CSS, TR+TD situatie.. toch mogelijk?

[Verwijderd]

Ik ben bezig met een dhtml menu, wat eruit komt te zien als het office xp menu. Elk menu bevat een collectie van buttons, en het menu heeft een absolute positie.

Ik wil het volgende klaarspelen in CSS en kom er zonder tables even niet uit. De enige oplossing die ik kon bedenken was met gebruik van table-row en table-cell display settings maar helaas wordt dit nog niet ondersteund op IE.

HTML:

<div class=button>
[img]opslaan.gif>
<div[/img]Opslaan</div>
<div class=shortcut>ctrl+o</div>
<div class=submenupijl></div>
</div>

Het gaat hier om het gedeelte tussen de button div, die dienst doet als container en absolute is gepositioneerd.

De inhoud hiervan moet op 1 regel komen te staan. IMG is 16x16, Caption is variabel in breedte, shortcut evt variabel maar over het algemeen kom ik met 50px breedte goed uit de voeten, en submenu pijl is zegge 10px breed.

Is dit ondertussen op een of andere manier mogelijk? Het moet zich gaan verhouden als een tablerow waarvan 3 items vast staan in breedte, en waarvan er dus 1tje automatisch gaat schalen zonder gebruik van javascript, en zonder absolute positioning, anders komen de buttons niet onder elkaar te staan.

Ik schat in dat het niet crossbrowser mogelijk is, maar wil het eventjes dubbelchecken voordat ik naar tables grijp.

[RayNbow]

Gebruik style="float: left" voor de img, caption div, etc?

[Verwijderd]

RayNbow schreef op 23 november 2003 @ 22:51:
Gebruik style="float: left" voor de img, caption div, etc?

Daarmee krijg je helaas niet dat caption de rest van de volledige breedte benut, dat is nou helaas de eigenschap van een float. Het menu heeft momenteel een vaste breedte van 150px; Deze moet groeien afhankelijk van de breedte van de caption.

[ Voor 19% gewijzigd door Verwijderd op 23-11-2003 22:57 ]

[Johnny]

Maak een lijst!

code:

ul.button li {display: inline;} */list items naast elkaar weergeven*/

<ul class="button">
<li class="caption"></li>
<li class="shortcut">ctrl+o</li>
<li class="submenupijl"></li>
</ul>

_{Niet je aanhallingstekens vergeten!}

[Clay]

Johnny schreef op 23 november 2003 @ 23:41:
Maak een lijst!

code:

...

Ja! ...

Waarom?

Want we kunnen wel wat roepen, maar totdat het waarom duidelijk is waarom je het wel op de ene manier, en niet op de andere manier zou moeten doen gebeurt er niets. Verandering roept per definitie weerstand op.

Op zich kan je met een lijst namelijk ook niet "meer" dan met hetzelfde aantal elementen in div's. Mij hoef je niet te overtuigen maar leg dan wel ff uit waarom een lijst beter is.

[Verwijderd]

Jongens lees nou eens mijn post in plaats van dingen te roepen die loos zijn Lees met name de maten... zomaar een lijst neerplempen zorgt niet voor de behaviour die ik wil

Ik wil dit, zonder gebruik van javascript, zonder absolute positioning, met crossbrowser support en gedefinieerd in CSS.

En ik kan het nog gekker maken, want bij elke button moeten natuurlijk de velden op dezelfde left position beginnen

<table>
<tr>
<td width=16>save.gif</td>
<td>Save</td>
<td width=50>ctrl+s</td>
<td width=10>pijltje</td>
</tr>
</table

[ Voor 65% gewijzigd door Verwijderd op 24-11-2003 10:27 ]

[disjfa]

Verwijderd schreef op 24 november 2003 @ 10:19:
Ik wil dit, zonder gebruik van javascript, zonder absolute positioning, met crossbrowser support en gedefinieerd in CSS.

als je dat wilt gaat het alleen werken in css... daar had clay laatst een heel mooie versie van.

@clay:
kan je geen link menu maken zoals dat list menu van jou laatst? of kan er geen "a a {style}" in de stylesheet en dan de containerlink een "#" zetten? dan zou je toch ook met "a:hover a{} " kunnen spelen.

[ Voor 31% gewijzigd door disjfa op 24-11-2003 10:46 ]

[Clay]

Kan je ff een screen posten van dat menu? heb uit mn hoofd namelijk geen idee hoe het eruit ziet en zit hier met een oudere versie van office.

[crisp]

zoiets?

Cascading Stylesheet:

.menu {
  background-color: #c0c0c0;
  width: 150px;
  display: table-cell;
}

.button {
  background-color: #c0c0c0;
  width: 100%;
}

.caption {
  position: relative;
  white-space: nowrap;
  margin-left: 20px;
  padding-right: 62px;
}

.caption img {
  display: block;
  position: absolute;
  left: -20px;
  top: 0px;
  width: 16px;
  height: 16px;
}

.shortcut {
  position: absolute;
  right: 10px;
  top: 0px;
  width: 50px;
}

.submenupijl {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 10px;
}

HTML:

<div class="menu">
  <div class="button">
    <div class="caption">Opslaan
      <img src="opslaan.gif" alt="" />
      <div class="shortcut">ctrl+o</div>
      <div class="submenupijl">></div>
    </div>
  </div>
  <div class="button">
    <div class="caption">Sluiten
      <img src="sluiten.gif" alt="" />
      <div class="shortcut">alt+f4</div>
      <div class="submenupijl">></div>
    </div>
  </div>
</div>

[ Voor 3% gewijzigd door crisp op 24-11-2003 10:55 ]

[Verwijderd]

Crisp mooie poging, maar het is de bedoeling dat de element los van elkaar staan, omdat je anders problemen krijgt met skins voor mouseovers etc.

Tevens is het niet mogelijk om de caption te schalen

[ Voor 17% gewijzigd door Verwijderd op 24-11-2003 12:48 ]

[Clay]

Stel je hebt dit:

code:

<ul>
    <li>
        <span>ctrl-s</span><a href="">save</a>
    </li>
    <li class="folder">
        <span>ctrl-o</span><a href="">open</a>
    </li>
    <li>
        <span>ctrl-e</span><a href="">edit</a>
    </li>
</ul>

mooie html (op de span na misschien voor de diehards).

Nu heb je voor 1 button een <li />, een <span /> en een <a/>, dat zijn 3 elementen waar je backgrounds in kan gaan tilen. Aangezien je alleen maar een icon en een submenu pijltje nodig hebt is dat zat.
Het icon kan als background image op de <li/>. Als je die dan een padding-left geeft staat de <a/> er meteen naast, leuk voor hovers. De submenupijl kan in de a, naar rechts uitgelijnd.

Nu die span, die moet naar rechts toe, maar niet zover dat die op de pijl komt te liggen. Dat kan met een float. Als je die dan een margin-right geeft houdt die genoeg ruimte vrij aan de rechterkant.

ik kom dan op de volgende css:

code:

* {
    font-family:tahoma,verdana,arial;
    font-size:12px;
}

ul,li,a {
    display:block;
    margin:0;
    padding:0;
    border:0;
}

ul {
    width:150px;
    border:1px solid silver;
}

li {
    padding:1px;
    padding-left:26px;
    list-style-type:none;
    background:white url("images/item_file.gif") no-repeat;
}

a {
    padding:2px;
    border:1px solid white;
    text-decoration:none;
    color:gray;
    font-weight:bold;
}

li.folder {
    background:url("images/item_folder.gif") no-repeat;
}
    li.folder a {
        background:url("images/sub.gif") right no-repeat;
    }

    li.folder a:hover {
        background-color:#f0f0f0;
    }

    li span {
        float:right;
        margin-right:15px;
        padding:3px;
        color:gray;
    }

a:hover {
    border-color:silver;
    background-color:#f0f0f0;
}

Dat ziet er imo al best goed uit. Het werkt iig op IE6, Moz en Opera, waarschijnlijk ook wel op de mac, en met wat extra getweak zeker. I'k heb ff geen ftp tbs, dus je moet of even zelf images maken of ff wachten tot vanavond

Wat ik ook geprobeerd heb is die schortcut text met een rel attribuut aan de <a /> te geven, en met een :after en content:attr(rel) toe te voegen, maar mozilla float dat niet, in IE werkt het niet, en uiteindelijk doet alleen opera dat goed beetje jammer. Maar dit werkt dus, je kan het wat tweaken dat het nog wat meer gaat lijken, want ik weet nog steeds niet hoe het eruit hoort te zien

Ook openklappende submenu's zijn prima te maken, dit is namelijk een met een <span/> uitgebreide versie wat ik onlangs al eens had gemaakt.
Omdat IE de :hover alleen op <a/>'s doet en je hem op de <li/> nodig hebt om de menu's automagisch open te houden als je dieper nest heb je daar wel een paar regels script bij nodig.

[Clay]

'k heb het nog ff uitgewerkt in een demo, werkt iig in IE6, Moz en Opera. Helaas is er wel een aantal css workarounds nodig, en een klein scriptje voor IE, maar dat mag de pret niet drukken.

[Willem]

Clay

Maar "een klein scriptje voor IE", is dat voor de soort refresh die er onmouseover in zit?

[ Voor 9% gewijzigd door Willem op 24-11-2003 20:47 ]

[Clay]

dat scriptje doet de mouseover voor de li's. IE doet daar de :hover niet voor.

[Verwijderd]

Het ziet er goed uit, zonder meer. In mijn geval moeten echter de caption op 1 regel komen te staan, de border + background bij hover ook de image meenemen, en indien een caption van 1 listitem breder is, de andere shortcuts op dezelfde left worden uitgelijnd.

De shortcut is het enige wat het lastig maakt.

[Verwijderd]

Het enige wat ik kan bedenken als het niet met tabellen mag, dat je van elke shortcut een gifje maakt (met en zonder submenu pijltje) en die dan als achtergrond plaatje zet van de LI. De caption zelf zet je dan in een SPAN met een right-margin zo groot als het caption plaatje.

HTML:

<ul>
  <li>[img]"winamp.gif"><span>save</span></li>
...
</ul[/img]

De UL zorgt er dan voor dat de shortcuts netjes uitgelijnd blijven...

Ik vind dan de tabel-oplossing beter, helaas

[Verwijderd]

Ik ben een heel stuk verder. In principe heb ik een aantal zaken veranderd. Het resultaat is te zien hiero. Ik heb in principe een hoop kunnen regelen door de button div relative te positioneren.

http://members.chello.nl/m.schopman1/menu/menu.html

Ik heb nu denk ik alles voor elkaar, maar moet het nog testen op de mac.

Het is pas een begin, maar ik wil dit menu dus geheel via xml gaan definieren.

[ Voor 40% gewijzigd door Verwijderd op 24-11-2003 22:40 ]

[Woudloper]

Gordijnstok, ziet er ook goed uit. Kleurstelling is niet heel erg netjes, maar daar gaat het niet om. Ik zou overigens nog wel het cursortype (weergave) veranderen. Nu krijg ik namelijk (onder IE6) steeds een tekstselector wanneer ik over de menu's (tekst met rode achtergront) ga.

Als je met mij vraagt moet dit wel te combineren zijn met een XML stylesheet al zeg ik hetzelf...

[Verwijderd]

Woudloper schreef op 24 november 2003 @ 22:48:
Gordijnstok, ziet er ook goed uit. Kleurstelling is niet heel erg netjes, maar daar gaat het niet om. Ik zou overigens nog wel het cursortype (weergave) veranderen. Nu krijg ik namelijk (onder IE6) steeds een tekstselector wanneer ik over de menu's (tekst met rode achtergront) ga.

Als je met mij vraagt moet dit wel te combineren zijn met een XML stylesheet al zeg ik hetzelf...

Ik heb nog geen cursors gedefinieerd, dus dat klopt wel. Enige vreemde wat mij opviel, was dat zodra ik de doctype op xhtml zet, IE direct een fout geeft als ik toon aanklik. Dit moet ik dus nog even onderzoeken, want het is wel vreemd.

En er moet nog een boxmodel hack of iets dergelijks inkomen, want in Mozilla wordt vanwege de border die je krijgt op de button div, de shortcut div ook 1px naar links en beneden verplaatst. IE moet dus een ander boxmodel toegekend krijgen.

Op zich ben ik er met een relatief eenvoudige oplossing uitgekomen.

[Verwijderd]

Ik heb snel even screenshots gemaakt op voor de mac. Omdat het mac is, is het dus PDF (daar moet ik nog 's wat op vinden), dus hierbij de linkjes:
1, 2, 3, 4, 5, 6.

Plaatje 6 is waarschijnlijk niet helemaal hoe het hoort. Rechts is er geen ruimte, dus wordt 'ie links getekent, maar de achtergrond is transparant ipv wit...

[Verwijderd]

Doet ie het toch redelijk dacht ik zo. Ik heb op me werk wel een Mac staan dus check ik het daar wel even op.

[Skaah]

Kijk misschien eens naar het DHTML menu van WebFX, voordat je het wiel opnieuw uitvindt.

http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html

[SchizoDuckie]

Skaah schreef op 25 november 2003 @ 10:29:
Kijk misschien eens naar het DHTML menu van WebFX, voordat je het wiel opnieuw uitvindt.

http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html

zeg dan nix

[BtM909]

Skaah schreef op 25 november 2003 @ 10:29:
Kijk misschien eens naar het DHTML menu van WebFX, voordat je het wiel opnieuw uitvindt.

http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html

Is volgens mij geen kwestie van het wiel opnieuw uitvinden, maar kiezen tussen een vierkant wiel (wat wordt aangeduwd door 16 holbewoners) of een efficient en snel wiel.

[Woudloper]

Skaah, het is niet het wiel opnieuw uitvinden. Maar een XHTML (met gebruik van CSS) compliant versie maken van een Office like menu. Deze suggestie werd hierboven namelijk gedaan door Johnny, jij doet een suggestie welke weer terug naar af gaat...

Ik denk dat je maar eens het Suckerfish dropdown artikel moet gaan lezen bij 'A List Apart', dit is waar we het hier over hebben in dit topic (een soorgelijke variant wordt overigens beschreven in het Tweakers.net remake topic). Overigens reageerd daar ook een ene 'Alexander' in die wel een XHTML based DHTML menu heeft gemaakt, zie hier.

[ Voor 9% gewijzigd door Woudloper op 25-11-2003 11:14 ]

[Verwijderd]

Skaah schreef op 25 november 2003 @ 10:29:
Kijk misschien eens naar het DHTML menu van WebFX, voordat je het wiel opnieuw uitvindt.

http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html

De mensen boven me het hebben mijn keuze voor een custom widget al onderbouwd Ik wil inderdaad een crossbrowser versie maken.

DHTML Menu 4 maakt gebruikt van het popupObject (chromeless windows) om zijn menu's weer te geven, dit is een MSIE only feature.

[Verwijderd]

iuk heb even geen zin om het hele topic door te lezen dus misschien is het al eens gezegd, maar dan zeg ik het gewoon nog een keer. Dit is btw ook een oplossing voor het verticale probleem met het uitvullen van alle overgebleven ruimte als er bv een header af is.

we gaan uit van een div waar alles inzit, daar zet je vervolgens al je vaste elementen in, en ook een extra div, absoluut gepositioneerd op 0,0 en de padding overeenkomend met de ruimte die je weg wilt hebben, bovendien de w en h 100%. Hierin komt dan je div die alles op moet vullen, ook op 100% w en h

code:

<div id="maincontainer" style="height: 200px; position: relative;">
  <div id="header" style="height: 16px; position: relative">header</div>
  <div id="footer" style="height: 20px; position: absolute; bottom: 0px;">footer</div>
  <div id="contentcontainer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding-top: 16px; padding-bottom: 20px;">
    <div id="content" style="position: relative; width: 100%; height: 100%">content</div>
  </div>
</div>

uiteraard zorgen dat je het ie boxmodel hebt op deze manier

[Skaah]

Woudloper schreef op 25 november 2003 @ 11:12:
Skaah, het is niet het wiel opnieuw uitvinden. Maar een XHTML (met gebruik van CSS) compliant versie maken van een Office like menu. Deze suggestie werd hierboven namelijk gedaan door Johnny, jij doet een suggestie welke weer terug naar af gaat...

Ik denk dat je maar eens het Suckerfish dropdown artikel moet gaan lezen bij 'A List Apart', dit is waar we het hier over hebben in dit topic (een soorgelijke variant wordt overigens beschreven in het Tweakers.net remake topic). Overigens reageerd daar ook een ene 'Alexander' in die wel een XHTML based DHTML menu heeft gemaakt, zie hier.

Ik heb het artikel gelezen, het was wel een eyeopener. Respect trouwens voor de maker van de T.net FP XHTML-style.

[Verwijderd]

Ik heb nu wel ruzie. Zodra ik de pagina XHTML compliant ga maken, en hij valideert zonder fouten als XHTML 1.0 Transitional, dus netjes Javascript tussen CDATA etc. dan werkt de hele boel niet meer, ook niet onder Mozilla.

Echt irritant gewoon want je krijgt geen fouten behalve object expected, en ik weet dat het object bestaat.

Verder ook nog ruzie met box-sizing. Ik heb hem nu commented staan, maar hij wordt gewoon genegeerd. Hoe het in IE gaat is perfect, ik wil niet dat de shortcut en submenu pijl divs naar beneden gaan zodra ik een border aan de button div toevoeg. Ik dacht dit voor Mozilla dus met de box-sizing property te kunnen aanpassen, maar het wordt niet doorgevoerd. Ik heb ook padding box uitgeprobeerd als value.

De wel werkende versie:
http://members.chello.nl/m.schopman1/menu/menu.html

De niet werkende versie:
http://members.chello.nl/m.schopman1/menu/xhtml.html

Als iemand een ingeving krijgt, laat het even weten.

[ Voor 53% gewijzigd door Verwijderd op 25-11-2003 20:59 ]

[Clay]

werkt het zo niet:

code:

// <![CDATA[

...

// ]]>

?

[Verwijderd]

Die CDATA is wel XHTML, maar dat snappen browsers niet. Stop je javascript in een aparte file, of zorg dat er geen speciale tekens [<>&"] (de blokhaken mogen wel) in staan.

CDATA is in XML alleen maar nodig als deze speciale voorkomen.

JavaScript:

<script type="text/javascript">
alert('hoi');
</script>

is dus gewoon XHTML.
Clay: die remark oplossing is uit den boze, omdat de CDATA sectie dan niet een CDATA sectie is (het staat immers in comments). Maar goed is het ook niet, want er komen dan speciale tekens in de remark voor...

Het blijft wachten op goede browsers. Het valt me een beetje van Mozilla tegen, dat die het niet snapt, eigenlijk...

[ Voor 39% gewijzigd door Verwijderd op 25-11-2003 21:51 . Reden: Op Clay's reactie gereageerd ]

[Verwijderd]

Ik heb nu in de xhtml.html file de CDATA stukken verwijderd, en toch blijf ik vreemde zaken houden. MSIE geeft nu een error, zomaar, alleen omdat de doctype XHTML is, en Mozilla geeft vreemde offsets terug, waardoor het menu op een heel apart positie verschijnt.

Het is lastig als je niet weet wat er fout zit.

[Verwijderd]

Uhm, die xhtml is geen xhtml.
Kijk maar naar page info (tenminste zo heet het in Firebird).
Daar staat dat het document van het type text/html is.
Maak van de extensie .xml en het is xhtml geworden.

Bovendien heb je de cdata secties niet goed afgesloten.
Je hebt er ]] staan, er moet ]]> staan.
Dan moet je nog de meta en de link tags afsluiten en dan ben je er wel ongeveer.
En waarschijnlijk kom je er dan achter dat er in xhtml-mode geen .offsetParent property bestaat .
Tenminste, volgens mij liep ik daar tegenaan. Ik heb er niet heel aandachtig naar gekeken.

edit:
O ja, document.body bestaat niet in xhtml, dat wordt dan weer document.getElementsByTagName('body')[0]
edit edit:
De extensie moet .xhtml. Met .xml wordt het een 'gewoon' xml document.
En het schijnt zo te zijn dat offsetParent gewoon moet werken in xhtml/xml documenten.

[ Voor 23% gewijzigd door Verwijderd op 25-11-2003 22:45 ]

[Clay]

Verwijderd schreef op 25 november 2003 @ 21:47:
Clay: die remark oplossing is uit den boze, omdat de CDATA sectie dan niet een CDATA sectie is (het staat immers in comments). Maar goed is het ook niet, want er komen dan speciale tekens in de remark voor...

Het blijft wachten op goede browsers. Het valt me een beetje van Mozilla tegen, dat die het niet snapt, eigenlijk...

// is in xml geen comment. voor het script wordt het een comment regel, voor xml staat de beginnende // gewoon in de node, en daarna begint het cdata blok. 't is misschien de vraag of zo'n gemixte node mooi is, maar de xml parsers van IE, MOZ en Opera trekken het als .xml met de "gecommente" Cdata wel, en zonder niet.
Of dat het goed maakt is een andere vraag

[Verwijderd]

Verwijderd schreef op 25 november 2003 @ 22:09:
Uhm, die xhtml is geen xhtml.
Kijk maar naar page info (tenminste zo heet het in Firebird).
Daar staat dat het document van het type text/html is.
Maak van de extensie .xml en het is xhtml geworden.

Bovendien heb je de cdata secties niet goed afgesloten.
Je hebt er ]] staan, er moet ]]> staan.
Dan moet je nog de meta en de link tags afsluiten en dan ben je er wel ongeveer.
En waarschijnlijk kom je er dan achter dat er in xhtml-mode geen .offsetParent property bestaat .
Tenminste, volgens mij liep ik daar tegenaan. Ik heb er niet heel aandachtig naar gekeken.

edit:
O ja, document.body bestaat niet in xhtml, dat wordt dan weer document.getElementsByTagName('body')[0]

Kijk, dat is nog eens nuttige info voor niet wandelende encylopedien Kan XHTML dus maar beter laten vallen, offset is toch wel iets wat je nodig wilt hebben.

[crisp]

volgens mij kan je wel gewoon document.documentElement gebruiken

[Verwijderd]

Nou, offset blijkt wel te werken in. Net nog even gecheckt in een simpel testkeesje.
Maar er zijn nog wel wat dingen die je kennelijk moet veranderen in je script als je in xhtml gaat werken.
.tagName is lowercase in xhtml en ik weet niet of .className bestaat in xhtml.

Ik zou ook zeggen, bespaar je de moeite.

[Verwijderd]

Verwijderd schreef op 25 november 2003 @ 22:57:
Nou, offset blijkt wel te werken in. Net nog even gecheckt in een simpel testkeesje.
Maar er zijn nog wel wat dingen die je kennelijk moet veranderen in je script als je in xhtml gaat werken.
.tagName is lowercase in xhtml en ik weet niet of .className bestaat in xhtml.

Ik zou ook zeggen, bespaar je de moeite.

Ja inderdaad, belangrijkste doel is dat het crossbrowser werkt. Dat purisme laat ik dan liever maar varen, want als ik 1 dhtml widget xhtml ga maken, zou het niet zo netjes zijn om dat met de rest van de widgets die ik nog heb liggen niet te doen. Ik ben me wel een potje gek om die ook aan te passen

Overigens had ik de link en meta tags al afgesloten

Uit nieuwsgierigheid ben ik toch aanpassingen gaan maken in mijn scripting om tot een werkende xhtml te komen maar het lijkt wel een utopie.
Puur om eens te kijken waar je nu allemaal tegenaanloopt.

- document.body vervangen (wel vreemd, daar een document altijd maar 1 body element bevat, snap best dat het voor de parser een childNode van het xml document is maargoed)

- tagname naar lowercase
- scripting in cdata
- alle tags afgesloten

en toch, .. je gaf aan dat offsetParent wel werkte bij jou, maar bij mij lijkt he tniet goed te gaan. IE geeft al helemaal geen sjoege te meer, het wordt schijnbaar te nieuw voor IE

http://members.chello.nl/m.schopman1/menu/xhtml.html

Voor zover de bruikbaarheid van pure xhtml in de praktijk denk ik dan

Ik heb voor de knutselaars even een rar gemaakt zodat je de bijbehorende files hebt.

http://members.chello.nl/m.schopman1/menu/xhtml.rar

[ Voor 43% gewijzigd door Verwijderd op 25-11-2003 23:16 ]

[Clay]

't is redelijk bruut om contenttype op text/xml te zetten. (al dan niet met .xml extentie of response headers in jsp/asp/php/etc) IE herkent het dan niet meer als html, en dan moet je de stylesheet als <?xml-stylesheet ?> koppelen. met bv. alleen html,body {} kan je dan alleen niet meer alle margins/paddings uitzetten (zit spook element tussen?), met * lukt dat wel, maar om nou gelijk voor alles margins en paddings uit te zetten

De doctype xhtml1.1 errort in winIE, 1.0 werkt wel, maar het doet niet superveel behalve veel tijd kosten om in te laden en te gebruiken

Daarnaast kan je niet meer scripten want de script tag doet niets meer, en IE ondersteunt de type="application/x-javascript" niet. Misschien dat er nog wel mogelijkheden zijn ik heb er ook maar kort mee gepookt, maar je komt zoveel shit tegen dat je het liefst meteen weer wegknikkert.

heeft iemand hier meer ervaring mee (of doe ik iets fout )?

[ Voor 3% gewijzigd door Clay op 25-11-2003 23:08 ]

[Verwijderd]

Ja, ik weet het, dat is bruut, maar anders ziet Mozilla het gewoon als een html-document.
Volgens mij had ik ergens gelezen dat IE het stiekem toch altijd als een html-document behandelt, ongeacht welke extensie. Het was iig niet bruikbaar voor dit soor xml-dingen of zo.

Ben ook toch weer even bezig geweest, kon het niet laten.
http://home.hccnet.nl/m.wargers/test/xhtml/xhtml.xhtml
Het werkt zo ongeveer, geloof ik.

Moest nog wat aanpassingen doen:
- Alle .innerHTML moest worden vervangen door appendchild createtextnode dingen.
- this.menu.style.top = y+'px'; Die px moet erachter, anders pakt die de waarde kennelijk niet.

[Verwijderd]

Clay, je had gelijk. Zo had ik het nog niet bekeken. Het werkt ook nog 's in IE en Safari, dus ik ben nu blij

Voor de content-types heb ik even wat testjes gemaakt, maar ik ben te gaar om ze te testen (en ik ruzie met m'n cache):

Probeer zelf: x.xhtml (application/xhtml+xml), x.xhtm (text/html) en xx.html (ook text/html). Maar allemaal XHTML met script en CDATA.

[Verwijderd]

Je ziet direct al dat MSIE er helemaal niets meer van snapt. Die innerHTML kwam ik vanacht in bed ook achter (ja dat zijn altijd van die ophelderende momenten), aangezien het niet onderdeel is van de DOM.

Van die style.top is toch vreemd. Je zou zeggen, enige wat je nog zou kunnen doen is een parseInt erop uitvoeren, want bijv. 0 is gelijk aan 0px 0pt 0em etc. dus waarom zou je in een dergelijke geval de identifier mee moeten geven.

Het zal allemaal vast in de specs staan, maar ik ben toch wel benieuwd naar een vergelijkingslijst met deprecated Javascript functions onder XHTML. Als er equivalenten zijn is er natuurlijk geen probleem om alvast wat moeite te steken in het aanpassen van functionaliteit naar deze equivalenten tot het moment dat MSIE 6 het laat afweten.

[ Voor 24% gewijzigd door Verwijderd op 26-11-2003 08:32 ]