CSS i Firefox og IE

<ole>

Hvis du har noget somhelst stående før DTD'en, disabler du væsentlige dele af CSS i IE - hvilket jo kunne være en forklaring. Blot en HTML-kommentar eller en XML-prolog er nok. Læs evt:
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
- under The !DOCTYPE "Switch".

Derudover kan der være andre ting - men det er ikke til at udtale sig om uden at se koden. Desværre er det ofte mere end vanskeligt at finde troværdigt materiale om webkodning på WWW, så det bedste link, jeg kan give er: http://www.w3.org/  :)

- så kan man i øvrigt ikke opbygge websider i CSS. De skrives/opbygges i HTML ... CSS er kun sminke på HTML'en  ;o)

/mvh
</bole>

- og så er det nok i IE, de ser underlige ud, mens FF mere viser dem, som de er skrevet  :)

Måske kan du blive klogere her:

HTML: http://www.webtip.dk/html/html_index.php
CSS: http://www.webtip.dk/typark/typark_index.php

W3 henviser til ovenstående (CSS-/Typark-linket), så kvaliteten må jo næsten være i orden/troværdig.

Apo

Tjah, er det ikke webtip, der henviser til w3c, fordi de har lavet en side, som validerer til html osv. ?-)

-- valideringen sikrer, at siden syntaktisk er korrekt, men ikke om indholdet på nogen som helst led er rigtigt, endsige giver mening for en browser ...

-- og der er graverende fejl spredt ud over de to sider, jeg gad at læse, men måske kan man få en ide om noget, men nogle af fejlene understreges som vigtige sandheder, så det er et problem, at man lærer direkte forkerte ting til at starte med !-)

W3C henviser til webtip her: http://www.w3.org/Style/CSS/learning (I den grønne menu til venstre - lidt nede ad siden).

Hvis siderne er fulde af fejl, burde W3C netop ikke henvise til webtip :-/

"... så kan man i øvrigt ikke opbygge websider i CSS. De skrives/opbygges i HTML ..."

Ole > Hehe, W3C bidrager heller ikke selv til gennemsigtighed: http://www.w3.org/Style/CSS/learning (Nederst på siden findes en knap med teksten: "Made with Cascading Style Sheets") ;-)

Tjah, den side henviser jo også til csszengarden som et art-projekt, og det på trods af, at grundstrukturen i den side absolut ikke kan betegnes som en korrekt måde at bruge Cascading Style Sheets ...

-- og af det kan man så lære, at links ikke nødvendigvis skaber en troværdighed, men i mangel af bedre kan det da godt være at nybegynderen kan få lært noget, som han senere kan bruge, problemet er bare, at f.eks. et af de stylesheets, som refereres på webtip vil validere som gyldig css, men være volapyk for en browser, og i hvert fald give en hel masse overraskelser for den, der tror, at han nu har formatteret sine links, så de gør som han ønsker ,-(

Jep, men som overskrift for links'ne står der: "Some non-English resources:" - hvilket jeg opfatter som en blå-stempling... Men som du skriver skal man åbenbart ikke have en blåøjet tillid til links på W3.org

Det forstår jeg godt, at du forstår det som ...

-- overvejede lige om jeg gad skrive en kritik af de par sider på webtip, jeg havde læst ...

-- men så kom jeg i tanke om referaterne af de oplevelser, andre havde haft med at give konstruktiv kritik til andre danske websites, hvor blandt andet dette emne var behandlet, og så droppede jeg det selvfølgelig !-)

-- og du skal da også lægge mærke til den dato, w3c-siden har, for det var jo på et tidspunkt, hvor ikke mange havde en ordentlig ide om stylesheets, så der var det vigtigt bare at videregive ideen om, at vi her havde et særdeles nyttigt og kraftfuldt redskab !o]

De forskellige webmastere er åbenbart ikke modtagelige over for kritik? Om ikke andet burde de netop være det, hvis kritikken henvender sig til det de skriver om.

Jep, datoen siger 2002 men... Last updated $Date: 2005/07/07. Men det gælder nok ikke links og henvisninger.

-- jeg tror netop det gælder eet nyt link e.l., men ikke de gamle !-)

<ole>

Jeg er 130% overbevist om, at ingen hos W3C overhovedet har læst webtip.dk's sider. Det er garanteret blot for at have noget dansk-sproget - og måske fordi alternativet (html.dk) trods alt blev fundet for ringe  :)

Er der i øvrigt nogen, der har prøvet at klikke på deres 'Valid HTML' banner?  ;D

/mvh
</bole>

*rotflmao*

This Page Is Tentatively Valid HTML 4.0 Transitional, hvis man selv indstiller validatoren til en fornuftig tegntabel ...

yups ... vi tenderer med behørig forsigtighed mod noget brugbart  ;D

Læser man f.eks. om en 'nem menu', vil man støde på dette sheet:

<style type="text/css">
td.menu {
  width:120px;
  height:25px;
  border:0;
  font-size:10pt;
  font-family:Arial;
  text-align:center;
  background-color:transperant;
  background-image:url("menuknap.gif");
  background-repeat:no-repeat;
}
</style>

- hvor man bruger den skrift-størrelses enhed, vi har arvet fra print-industrien (det typografiske punkt - 'pt') og som overhovedet ikke forholder sig til PC-skærmens naturlige modul: 1 pixel - 'px'.

Dernæst nøjes man med at angive en enkelt skrifttype - og ingen generisk. Desuden angives denne med stort begyndelsesbogstav, uagtet at tidlige Gecko-browsere ikke kunne finde skriftsnit, stavet med stort (hvis der er tale om remote CSS-filer).

Baggrundsfarven 'sdavøs' i øvrigt: 'transparent' med 'a' - og ikke 'e'.

På de få andre sider, jeg så, inden mit udslæt begyndte at røre på sig, kunne jeg se, disse fejl blot er ouverturen ... der er bunker af anden 'underholdning', men ikke overvældende meget kvalificeret information på det site  :o|

Jeg får kun denne: "No Referer header found!"

Deres sider er tilsyneladende sidst opdateret 6.6.2002, så de trænger nok til at blive støvet af og opdateret en smule...

- en smule?  ;D

ole > Er det forkert, her anno 2005, at stave font-family med store forbogstaver, eller galdt det kun i 2002?

Med 'font-family' mener jeg skrifttyperne:

font-family: Arial, Tahoma, Sans-Serif;

... Og skal: background-image:url("menuknap.gif"); ikke skrives: background-image:url('menuknap.gif'); - appostroffer i stedet for anførselstegn.

Principielt er der større kompatibilitet i at stave fonts med små bogstaver, så det er selvfølgelig et must ...

-- og Sans-Serif findes slet ikke, der findes kun sans-serif ...

-- store bogstaver hvorsomhelst i etstylesheet er at lægge miner ud for sig selv, medmindre man bruger dem til at læse indholdet lettere, f.eks. ved at navngive klasser o.l. lilleBrunMargin !-)

Faktisk bør der stå:

  background-image:url(menuknap.gif);

-- men alle tre muligheder er fuldt gyldige, i css bruges apostroffer/gåseøjne ellers normalt kun til at angive strenge, som indeholder ulovlige tegn, som f.eks. 'times new roman' !-)

Jeg var ved at skrive nogenlunde det samme, som roenving - og desuden ved jeg positivt, at der har været browsere, der ikke har kunnet læse de store bogstaver. Når jeg ved det, ville jeg være et kvaj, hvis jeg brugte store bogstaver.

Da der jo ikke er andre CSS-properties, hvis værdier staves med stort, er det i øvrigt fjollet, pludselig at indføre dem her  ;o)

Godt så. Så skal jeg have rettet i nogle fonts...

ulovlige tegn... Tænker du på mellemrummene i 'Times New Roman'?

ja - det gør han  ;o)

- eller rettere i 'times new roman'  ;o)

- eller i 'øvlebøvles rålækre og røvphede hjemmelavede skriftsnit'

Ja, i css har mellemrum en special-betydning ligegyldigt hvor det bruges, i selektorer betyder det efterkommer, i egenskaber findes det ikke og i værdier betyder det opremsning af værdier !-)

Jep, jeg sad lige og grinede af den :-D

Jeg har altid skrevet skrifttyper med store forbogstaver (som det eneste i mine styles/stylesheets)

- men man skal nok lige passe på den sidste skrift ... den kommer vist endnu ikke med standard-installationen af Windows  ;D

roenving > Så times new roman skal altså indkapsles således: font-family: arial, 'times new roman'; ?

Men du har vel planer om at inkludere den i en Linux-distribution ?-)

Tjah, nu ville jeg aldrig blande arial og times sammen, men hvis du tilføjer en generisk skrifttype får du noget rigtigt, f.eks.

font-family: garamond, 'times new roman', serif;

Sammensætningen var kun for at illustrere mit spørgsmål ;-) Jeg undgår helst at bruge 'times new roman' :-§

For lige at gå lidt tilbage i teksten:

Dvs. at: background-image:url('menuknap.gif'); helst skal skrives som: background-image:url(menuknap.gif);

... Er det fordi det ellers kan give problemer i nogle browsere?

Ditto, og det gælder generelt serif-skrifter til skærm-brug ...

-- iøvrigt kan man vel tilføje punktet med punkter, brug ikke de to forskellige størrelser px og pt, for selvom IE undersætter pt til px har visse andre browsere den grimme vane at tage betegnelserne alvorligt, og så er et punkt altså ca. 0,35mm og en px ca. 0,2 - 0,28 mm afhængig af skærmen ...

Næh, men man skal altid bruge no-nonsense ...

Jeg bruger kun px til at angive størrelser på skrifttyper (Sikkert fordi jeg gerne vil være sikker på hvor stor skriften er på mine sider, i alle browsere).

Puha, jeg læste lige lidt tilbage, det gælder om at holde tungen lige i munden, hvis man skal forstå sammenhængen, for adskillige kommentarer refererer ikke til den umiddelbart foranliggende, men til den en eller to foran !-)

... Så fik jeg rettet skrifttyperne så de nu er med små forbogstaver, og linkangivelser nu uden apostroffer :-)

Ja, man skal se sig godt for, når først der kommer gang i skriveriet. Jeg forstod f.eks. først sammenhængen i oleboles: 'øvlebøvles rålækre og røvphede hjemmelavede skriftsnit', efter at det var blevet klart for mig, at times new roman, skal skrives som 'times new roman'.

Vi må håbe at kfisker trods alt får noget ud af, at vi har 'spammet' hans spørgsmål :-D

Jeg overlever nok.... Synes det virker ret håbløst på en eller anden facon, at få en hjemmeside til at vises korrekt i både firefox og IE, da det ikke bare er en boks eller 2 det er galt med.

Prøv f.eks. at se www.b91randers.dk.

Det er da ganske nydeligt. Uden at have set undersider, kan jeg kun få øje på én lillebitte forskel - og én fejl, som vist hurtigt er rettet  ;o)

Den lille forskel gider jeg ikke engang at forholde mig til. Den består i, at teksten 'Hjælp' ved siden af din LogIn-knap er lodret centreret i FF - men ikke i IE.

Fejlen er, at din sorte ramme klapper sammen i FF. Jeg går udfra, det handler om absolut-positionerede eller floatede elementer. De fylder nemlig ikke noget i deres omgivelser. Det betyder, man er nødt til at sætte - i hvert fald - en højde på evt. omkransende elementer, da disse ellers kollapser p.gr.a. 'manglende' indhold  :)

Hvordan kan jeg sætte højre på elementerne, når de ikke skal være et fastlåst antal pixels.

Ideén er jo netop at de skal udvide sig med indholdet.

Hvis du sætter height på vil IE, medmindre der er overflow:hidden; udvide elementet ...

-- I FF opnås det samme ved at sætte min-height !-)

Okay, det vil jeg prøve at kigge på.... Se om jeg kan få siden (som den først) til at vises pænt i både IE og FF.

Hmm... jeg har en boks der omkranser alt under toplogoet.

Sætter jeg en height på denne (mainpage), følger den ikke indholdet, men stopper ved præcis den højde jeg har angivet...

Hvilken browser bruger du til at se det først i ?-)

-- Gecko-maskinerne vil tage det, man skriver som height i et element alvorligt, medmindre der også er en min-height ...

Ja, at mestre CSS kræver, man sætter sig grundigt ind i det ... og absolut positionering kan være en slem bitch  :)

Nej, roenving ... hvis et relativt element indeholder absolutte, vil det relative ikke øge sin højde i takt med indholdet i de absolutte. Jeg tror, det er der, køteren ligger  ;o)

roenving...> Mener du hvilken browser jeg ser problemet med height i?
Det er FF.

Den tager en height fuldt alvorligt, medmindre man også sætter en min-height:

height:600px;
min-height:600px;

Sætter jeg følgende:

#mainpage {
        margin:5px 0px 10px 0px;
    position:relative;
        width:762px;
    border: 1px solid #000000;   
        background-color: #CBC7AE;
        color: #000000;
        height: 300px;
        min-height: 300px;
}

... så kan du resultater f.eks. her:
http://www.b91randers.dk/sider/kampe.php?show=513168

-- og husk at rækkefølgen af properties betyder noget så mange steder i css, at er der skyggen af en konflikt ved at bruge en rækkefølge frem for en anden, skal man _altid_ vælge den, som resulterer i, at det man skal bruge yderst står sidst !-)

-- i dette tilfælde:
Fordi der er en potentiel konflikt mellem værdien i min-height og height (kan height overskrive den anden ?-), så bagest med min-height !o]

Yes, Jes - men det hjælper vist ikke. Prøver lige igen:
Hvis spørgeren har et relativt positioneret div, der indeholder nogle absolut positionerede - og indholdet af de absolutte er 'elastisk' - så hjælper det ikke at sætte højde på det relative. Det vil ikke 'flekse' sammen med de absolutte divs indhold .... comprende?  :)

olebole...> Der er ikke noget på siden der er absolut positioneret... alt er relativt positioneret....

- hvordan i alverden kan et div, der har indhold så kollapse? Så er indholdet vel floated?

-- jeg fik tanken, at du brugte floats til at opbygge det !-)

floats vil heller ikke optage plads i Gecko'en !-)

Jeps... floats i massevis.

Synes de er svære at undgå, med mindre jeg i stedet bruger tabeller til at placere boksene ved siden af hinanden??

Eller er der andre smartere løsninger?

Men det er vel også en smart og overskuelig løsning ?-)

Ja, en tabel er jo det logiske element at bruge her  :)

Synes jo positionering med css er mere smart, men kan det ikke virke optimalt i flere browsere, forsvinder det optimale jo....

Jeg fik hjælp til en anden hjemmeside (der også bruger float), hvor jeg i forhold til her, har en css-box i bunden af siden. Ved at sætte clear:both; på, blev den korrekt.

Vil det hjælpe at lave en boks i bunden, der kan "trække" layoutet?

Ja, når du nu er offer for den religiøse vækkelse gående ud på at foretrække CSS-stylede divs til fordel for tabellen ... så ja, du kan clear'e dine floats, hvis du lægger et div i efter dine floats med 'clear:both'

- men hvorfor synes du, det er smartere? Det kræver jo i hvert fald betydeligt mere kode  :)

Prøv det !-)

-- men ofte er den type problemer jo rundet af den tåbelige diskussion med at erstatte tabeller med css, problematikken hedder i mit hovede:

Hvordan finder jeg det element og den kombination af element og style-properties, som giver det mest optimale og bedst overskuelige resultat !-)

Nej, Jes ... det hedder det i _mit_ hovede  ;o)

-- og jeg kan ikke se fordelen i at spare 3 linjer i html-filen, for så at tilføje 5-10 i en css-fil !-)

Jeg er ikke offer for noget som helst religiøst ;o)

Jeg kan derimod vældig godt li' at arbejde med css, og foretrækker at bruge det, frem for tabeller, til den slags positionering....

Men nu blev jeg da klogere på løsningen.

Skal vi ikke udvikle en browser der fortolker css fuldstændig efter w3's standarder, så vi slipper for dette bøvl? ;o)

*LoooL* så kom den zq alligevel  :D
Du kan _ikke_ erstatte tabeller med CSS!

Skal vi virkelig vente på det ?-)

-- der er nemlig _ingen_ browsere, der konformer 100% til w3c rekommendationer, hvad var det for en, hvor vi i sidste uge oplevede IE opføre sig eksemplarisk og FF fucke ?-)

Kan heller ikke se det er det jeg gør... Bruger ofte tabeller... men ikke til at positionere elementer på mine hjemmesider med...

Selvfølgelig kan du undgå at bruge tabeller til positionering af hovedelementer på en hjemmeside, men det er bare stadigvæk ikke optimalt pga. den store forskel i fortolkning af kodningen blandt de forskellige browsere...

"*LoooL* så kom den zq alligevel  :D
Du kan _ikke_ erstatte tabeller med CSS!"

olebole > Så du egentlig min kommentar: 14/08-2005 00:57:57 ;-)

kfisker >> Tabeller hører til i det sprog, der hedder HTML - og som indeholder mange andre elementer. CSS er et helt andet sprog, der ingen elementer indeholder, men kan bruges til at klæde HTML-elementer ud og placere dem.

CSS kan bruges til at style alle HTML-elementer med - men kan aldrig erstatte et eneste HTML-element. Du kan altså _ikke_ bruge CSS i stedet for tabeller. Det er noget vrøvl  :)

Ja, man kan undgå, hvad somhelst - men hvorfor dog undgå tabeller? Det ville da være fjollet, når nu man har lavet sådan et fortrinligt element?

apo >> ja, men undlod med vilje at kommentere den. Læs, hvad jeg skriver - og læs, hvad W3C skriver. Med en smule engelskkundskaber i baglommen, er der ingen somhelst misforhold der  :)

apo >> 'Made with [SOMETHING]' er en alm. engelsk vending, der bekendtgør, at [SOMETHING] er en indgrediens .... og CSS er så sandelig en ingrediens på den side. Det her jeg aldrig benægtet.

Vendingen 'opbygge websider i CSS' dækker dog noget helt andet. Det samme gælder 'erstatte tabeller med CSS' eller 'skrive en side i CSS' ;o)

olebole... Korrekt at jeg ikke kan erstatte tabeller med css... men jeg kan erstatte tabeller med andre html-elementer + css.

Anyway, har læst _mange_ indlæg angående denne diskussion, og synes ikke jeg kan bidrage med mere end jeg allerede har gjort (nemlig min holdning), så synes ikke der er grund til at køre videre, uanset hvor interessant vi måtte finde det :o)

Jeg takker for hjælpen og vil lege lidt videre med css-positionering og brugen af tabeller til at erstatte den del af mit design der giver problemer, og så se hvad jeg ender ud med at finde mest belejligt i forhold til min måde at arbejde på / hvad der er mest hensigtsmæssigt i forhold til løsningen.

Takker for deltagelsen.

Roenving og olebold... læg et svar og der er point på vej.

Hmm... Jeg ville oversætte "Made with CSS" til: "Lavet med CSS" - Altså opbygget i CSS, men det kan åbenbart (mis)forstås på flere måder :-)

>>apo

-- sammenhænge kan nogen gange give nogle betydninger, hvor relevansen kun kan fremgå indirekte, et eksempel hevet lige ud af hovedet:

En opskrift på frikadeller har på et website et 'Lavet med salt'-banner, hvilket vil være meget vigtigt, hvis de ellers på websitet har et eller andet (f.eks. noget slanke-noget), hvor salt regnes for en vigtig ingrediens at være opmærksom på ...

-- men det betyder ikke, at du starter med at tage et kilogram salt, når du skal bygge dellerne !-)

>>kfisker

Velbekomme, og må din kraft følge dig '-)

apo >> Hvad er det præcist i det, jeg skriver omkring brugen af HTML og CSS, er det, du ikke er enig i - eller ikke forstår? Mener du, man kan skrive en side i CSS? Mener du, at CSS indeholder elementer? Mener du, at CSS kan erstatte HTML? Hvad er det, der - for dig - virker ulogisk i, at man ikke kan bruge CSS i stedet for HTML?

kfisker >> Jeg er om ikke andet glad for, vi fik det præciseret til, at det omhandler dine holdninger. At jeg så opfatter den slags som 'religiøsitet', er vel blot en strid om ord. Hovedsagen er at få slået fast, at din modvilje mod tabeller ikke er funderet i relle problemer omkring tabel-elementet  :)

Jes >> Jeg sad faktisk og tænkte på præcis det samme eksempel ... blot med hvisløg  ;D

- hvidløg  :)

*lol*

-- og tak for point ;~}

olebole > Det er såmænd ikke fordi jeg er uenig med dig, i det du skriver om HTML og CSS (Og, nej. Jeg mener ikke at CSS kan erstatte HTML!), men jeg kunne forestille mig at banneret "Made with CSS" kan være med til at fremme nogle misforståelser omkring det at bruge CSS.

For mig var det at nævne banneret, egentlig kun ment som en sjov (synes jeg) sidebemærkning om et ordspil... men den faldt vist ikke i god jord :-(

roenving > Hvis der på banneret i stedet for "Lavet med CSS", stod "Lavet med HTML", ville betydningen være den samme, isoleret set. Andre, uden den store viden om HTML og CSS, ville måske have let ved at få opfattelsen: "Jamen, W3C skriver jo selv at siden er lavet med CSS, så det kan man godt".

Det var såmænd det eneste jeg ville sige med det (Forsøgt krydret med lidt humor)...

Apo

Nu har jeg fået tre børn med den fremgangsmåde, men jeg kan se, man også kan lave tøj på samme måde ... Hannah-pige kan i hvert fald:
    http://www.madewithlovebyhannah.com/  ;o)

Der står ikke 'Lavet med CSS' - men 'Made with CSS'. Sproglige vendinger kan for det første ikke oversættes direkte.
Dernæst kan man i roenvings eksempel både skrive 'Lavet med salt' - og 'Lavet med svinekød'. Begge dele er korrekt - men meningen er i virkeligheden vidt forskellig.
Saltet er kun et sparsomt brugt krydderi (CSS), mens svinekød er hovedbestandelen (HTML).

Hvis du føler det, somom din kommentar ikke faldt i god jord, kan det hænge sammen med, at roenving og jeg i forvejen kæmper en hård kamp for at få dette emne gjort klart for andre brugere. Det er faktisk _meget_ vigtigt for folks forståelse af CSS og deres brug af sproget.

I første omgang lod jeg den passere - men anden gang begyndte den nok at irritere en smule, da det syntes ret tydeligt, at det ikke var et spørgsmål om forståelse - men udelukkende ordkløveri. Det var vel bare lidt distraherende i situationen - sorry  :)
- og ja, det kan uden tvivl afstedkomme misforståelser. Det viser sig desværre gang på gang, at folk klamrer sig til den slags løsrevne 'bibelcitater' og tror, de indholder selveste sandheden  :o|

kfisker >> og tak for points  ;o)

olebole > Jeg ved at I kæmper for at hjælpe folk til, at få en forståelse for både HTML og CSS. Det er bl.a. gennem jeres kamp, ved at læse jeres indlæg, at jeg selv (Synes jeg selv) er nået meget langt mht. HTML og CSS, på ganske få måneder - Og tak for hjælpen til det :-)

Jeg have ikke regnet med at indlægget ville være irriterende eller distraherende for nogen, men i så fald beklager jeg - For det var ikke meningen. Du har helt ret i at mit indlæg omkring banneret faktisk var ordkløveri, men ment som et 'humoristisk' (alt er relativt) indslag omkring den måde, jeg synes at banneret kan fejllæses på.

Dernæst ville jeg påpege, at f.eks. banneret let, af andre, kan opfattes som en modsigelse af det, både du og roenving kæmper for at forklare andre.

Jeg ved det - og har det også langt bedre med din kommentar nu, efter debatten er afsluttet. I øjeblikket virkede det bare lidt "åh nej, ikke to simultane fronter!"-agtigt. I substansen tror jeg såmænd, vi er helt enige - og den umiddelbare irritation er forlængst væk.
Det er ikke så stort og det gemmer sig lidt i slutningen af en linje, men jeg mente virkelig mit:
Sorry  ;o)

Jeg så det første gang, og det er helt i orden :-)