Avatar billede lequet Nybegynder
23. juli 2002 - 19:10 Der er 7 kommentarer og
2 løsninger

Mozilla problem med table-less design

Hej, jeg sidder og roder med et forholdsvist avanceret table-less design. Siden virker 100% i IE 6.0 (Går ud fra 5.0 0g 5.5 heller ikke klager), men I Mozilla har jeg været nødt til at lave et lille "hack" i mit stylesheet for at siden ser normal ud (taler om display : table ; koden)

Dette gør at min hover på menulinksne ikke virker, og at min "fold-ud menu" ikke virker, hvilket den gør hvis jeg fjerner display : table ;

Det irriterer mig lidt, da jeg har været nødt til at lave nogle browser tjecks for at sikre at Mozilla og NS 6+ brugere også kan bruge siden, uden at det samtidigt går ud over IE brugerne (som jo nok er i flertal :) Dette vil jeg gerne undgå, så både IE og Mozilla/NS brugere ser samme side, og at den virker ens i begge tilfælde.

I kan se siden her :
http://80.62.209.214/new/index.php

Mit Stylesheet kan ses her :
http://80.62.209.214/new/main.css

Og hvis i vil se hvad jeg mener med mine JS work-arounds, kan i se min JS kode her :
http://80.62.209.214/new/main.js

Fjerner jeg display : table ; virker det som sagt også i Mozilla, men siden ser knapt så køn ud.

Der er 2 krav til en evt. løsning :

1. Siden overholder XHTML 1.0 Strict standarden, og det SKAL den blive ved med, så ingen underlige ikke-standard løsninger, tak.

2. Siden er med vilje lavet 100% uden tabeller (som en udfordring for mig selv :), og det SKAL den fortsat være, så ingen forslag om at lave det med tabeller (hvilket selvfølgelig ville være meget nemmere, men ingen udfordring ;)

Håber der er nogen til stede med god erfaring i table-less designs :)
Avatar billede =maddog= Nybegynder
23. juli 2002 - 19:31 #1
well. NS6 og O4 opfatter display:table . Det gør IE ikke (nogen udgave). Er du sikker på du ikke udnytter en fejl parsing til at få din effekt. Prøv evt. display:block; hvilket jeg tror IE 'fejl-oversætter' til.
Avatar billede lequet Nybegynder
23. juli 2002 - 19:35 #2
Har prøvet alle værdier for display lige fra block, inline, run-in, marker til table, table-cell, table-row-group og så videre... Men kun table får Mozilla til at vise siden korrekt (bortset fra de detaljer med menuen)

IE reagerer slet ikke, uanset hvilken værdi jeg bruger i display, det er stadig det samme, hvilket gør det meget nemmere for mig at den ikke brokker sig over det :)
Avatar billede =maddog= Nybegynder
23. juli 2002 - 19:43 #3
jeg misforstod dig. sorry. jeg troede at display:table; var en nødvendighed.
problemet kan opstå, fordi menulink (eller hvad du kalder det) arver fra #frame, eller det kan være en generel bug, der skal rapporteres til BugZilla.
Hvis du forsøger at sætte
#frame .menulink {styles}
o.s.v.
fortæller du den at det gælder for klasser indlejret i #frame kaskaden, og hæver derved .menulinks vægtningen.
Avatar billede lequet Nybegynder
23. juli 2002 - 19:50 #4
Er ikke lige sikker på jeg forstod dig helt, men jeg prøvede at rette

a.menulink:link {

til

#frame a.menulink:link {

Hvilket ikke hjalp, men ved ikke om det var det du mente
Avatar billede lequet Nybegynder
23. juli 2002 - 21:39 #5
Fandt en nogenlunde fornuftig løsning ind til videre, da det er mit første forsøg med tableless designs, er det vel udemærket at det ikke er 100% perfekt i alle browsere :)

Nu er den eneste forskel i IE og Mozilla/NS6+ at i IE er siden centreret, det er den ikke i Mozilla, men det er da til at leve med :)

Er ikke helt 100% klar over hvad jeg gjorde, men den største forskel var at jeg satte display til table-cell istedet for table...

maddog > Hvis du lægger et svar, så får du lidt af pointsne :)
Avatar billede =maddog= Nybegynder
23. juli 2002 - 21:42 #6
ok. kanon ide at lege med. man kan rigtigt trixe hvis man kan give fanden i kompatibilitet :)
Avatar billede =maddog= Nybegynder
23. juli 2002 - 21:44 #7
problemet er jo helt klart at dine links 'arver' display:table; og kan ikke overskrives med display:block;. Det vil jeg betragte som en bug, og den bør vel i grunden rapporteres.
Avatar billede lequet Nybegynder
23. juli 2002 - 22:45 #8
Ja, man skal nok være bare en smule ligeglad med kompatibiliet hvis man vover sig ud i den slags... Men det må siges at være en perfekt måde at komme videre med CSS, noget af en udfordring i hvert fald :)

Kan da godt tænkes det er en bug, men er ikke lige sikker på hvordan jeg skulle formulere sådan en bug-report :(

Tager selv lidt af de 100 points tilbage, håber det er OK :)
Avatar billede =maddog= Nybegynder
31. juli 2002 - 11:07 #9
Det er helt OK.

En bug rapport kunne se således ud (til BugZilla)
Bug: display:table exhibits wrong inheritance behaviour
Causal: setting display:table on a HTML entity prevents any display style on nested entities
Bug behaviour: A nested <a> element does not percieve a display:block style and ensists on remaining displayed as a teble element
Expected behaviour: The <a> element have a higher score and would be expected to use a style set explicitly for it instead of inheriting the style from its parent.

Hvad ved jeg. Chancen for at den slags bliver rettet er ligefrem proportional med antallet af udviklere der rapporterer fejlen.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester