XHTML & CSS i olika webbläsare...

Tråden skapades och har fått 25 svar. Det senaste inlägget skrevs .
1

Har precis börjat koda om min hemsida i XHTML och CSS. Men jag kom inte särskilt långt innan IE5(Win) och Mozilla började bråka.
Jag har en enkel sida utan tabeller och fyra "områden": top, menu, main och bottom, ung. som frames. I "main" har jag dessutom en iframe för att kunna skrolla längre textstycken.

Länk

I Safari ser sidan ut precis jag vill ha denmen som sagt, IE och Mozilla vill inte.

Källkoden till XHTML-sidan:

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...">
<html xmlns="http://www.w3.org/1999/xhtml" lang="SE">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>familjen Holmers hemsida - i XHTML</title>
	<link rel="stylesheet" href="xhtml_css.php" type="text/css" />
</head>
<body>
	<div id="top_frame">
	top
	</div>
	<div id="menu_frame">
	<a href="main.php?page=1" target="main_iframe">Hem</a><br />
<a href="main.php?page=2" target="main_iframe">Länkar</a><br />
	</div>
	<div id="main_frame">
		<iframe id="main_iframe" src="main.php" width="90%" height="100%" scrolling="auto" name="main_iframe">
		main		
<p>Your browser does not support iframes</p>
		</iframe>
	</div>
	<div id="bottom_frame">
	bottom
	</div>
</body>
</html> 

CSS-filen:

#top_frame { background-color: #dcdcdc; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:115px; }
#menu_frame { background-color: #cccccc; position:absolute; left:0;  top:115px; right:0; bottom:24px; width: 195px; height:auto; }
#main_frame { background-color: #c0c0c0; position:absolute; left:195px; top:115px; right:0; bottom:24px; width: auto; height:auto; }
#bottom_frame { background-color: #bbbbbb; position:absolute; left:0; top:auto; right:0; bottom:0px; width: 100%; height:24px; }
#main_iframe { position: absolute; left:0; top:0; right:0; bottom:24px; width:100%; border:0 solid black; padding: 0; margin: 0; 
scrollbars: auto; background-color: #ffffff }
body { margin: 0px; padding: 0; background-color: #fff; line-height: 1.8em; }

Vad gör jag för fel? Jag har precis börjat läsa in mig på XHTML, har aldrig haft tid tidigare. Är det ett nybörjarfel? Eller måste man trixa för få det att funka i alla läsare? Jag har verkligen försökt att följa standarderna för XHTML och CSS.

EDIT: Mozilla gillar inte "DOCTYPE"-taggen i början. Tar man bort den så ser allt bra ut. IE däremot gillar ingenting. Men det är ömsesidigt...

Senast redigerat 2003-07-24 16:02

har lite kort om tid just nu, men vill hinna med att säga att det är bra att du vill sätta dig in i www-standarder och allt vad därtill hör, du gör en bättre framtid tillsammans med oss andra!

har du kört xhtml/css filerna igenom några validators? om inte, gör det, strular det fortfarende skall jag med glädje hjälpa dig lite senare.

http://jigsaw.w3.org/css-validator/validator-uri.html
http://validator.w3.org/

Man måste trixa för att få saker och ting att fungera men ofta går det utan att använda fula knep (utnyttja buggar i de olika webbläsarna).

Det verkar som om IE inte stödjer absolut positionering där höjden bestäms av marginaler från sidkanten....

Jag föreslår att du har en meny till vänster som täcker hela vänsterkanten (height: 100%) det fungerar i IE (använder version 6 till Windows).

Annars så är det väl mest smågrejer som att du verkar ha glömt "px" i css-en för body-taggen. "code:" kanske du borde ta bort, fungerar inte i IE annars (för mig). Och så "bottom: 0px" för top_frame stämmer väl inte?

Sedan om du vill vara riktigt standardiserad så kanske du borde använda en div-tag med overflow: auto istället för en iframe. Blir mindre komplext så då det handlar mer om presentation än struktur.

Här är en tråd som behandlar ett liknande problem:

http://www.webmasterworld.com/forum83/328.htm

Har du löst det än förresten och hur gjorde du?

Sidan är validerad med w3c:s program, vilket man numera kan se på sidan

Det undre värdet på top_frame (bottom) ska mycket riktigt vara 115px. Hjälpte dock inte i IE. Samma sak med "px".

Har du ett värde "0" så ska inte px-attributet behövas, noll är noll såsom 0 mm = 0 km. Fast code-attributet är borta nu.

Tack för tipset med skrollande lager, testade med en stor bild. Kloka ungar...

Mozilla gillar som sagt inte DOCTYPE-definitionen i början, undrar varför egentligen?

Senast redigerat 2003-07-25 13:17
Citat:

Skrevs ursprungligen av Marcus Holmer
Mozilla gillar som sagt inte DOCTYPE-definitionen i början, undrar varför egentligen?

Vad menar du med "inte gillar"? Jag får inga felmeddelanden?

Varför kör du transitional? Får inte det följden att varje webbläsare tolkar koden på sitt eget sätt istället för att följa standarder?

Tillägg: hittade detta på nätet:

Citat:

A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.
I
n this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)

Jag tror att samma sak händer när man väljer transitional istället för strict i sin dokumentinformation, d v s man deklarerar att man inte kommer att köra fullt ut på standarder, och att varje webbläsare därför tolkar koden lite hur den vill - därför skiljer det sig åt mellan dina olika webbläsare.

Har jag fel här får någo rätta mig

Har nu bytt till strict. Hämtade definitionen på w3schools men Mozilla renderar fortfarande sidan fel. Det är bara i Safari som det funkar som det ska.

Tar jag däremot bort DOCTYPE-kommentaren så fungerar sidan i Mozilla/Camino också. Varför är det så? Mozilla följer ju standarderna...

Sidan är nu verifierad som XHTML 1.0 strict och även CSS-filen är verifierad. Så vad gör jag för fel?

Citat:

Skrevs ursprungligen av Marcus Holmer
Har nu bytt till strict. Hämtade definitionen på w3schools men Mozilla renderar fortfarande sidan fel. Det är bara i Safari som det funkar som det ska.

Tar jag däremot bort DOCTYPE-kommentaren så fungerar sidan i Mozilla/Camino också. Varför är det så? Mozilla följer ju standarderna...

Sidan är nu verifierad som XHTML 1.0 strict och även CSS-filen är verifierad. Så vad gör jag för fel?

Det verkar i så fall som om du följer standarderna rent tekniskt, men att du kanske försöker lösa något på ett sätt som det inte är tänkt man skall göra det, så kallad "ful-kod".

Dessvärre har jag varit tjänstledig i ett år och därför inte hållt på så mkt med html och css (därmot med php) så jag är inte så inläst på det för tillfället. Återkom om några veckor

Jag förstår fortfarande inte exakt vad problemet är för sidan ser ok ut hos mig i Mozilla. Men om problemet är att det blir en vertikal scrollbar trots att sidan bara ska ta upp en skärm i storlek så kanske du borde prova att ändra line-height. Det verkar som om Mozilla töjer ut block så att de är minst 1 rad höga (bakgrunden syns dock bara i blockets satta höjd).

Fixar det problemet?

Sidan ska se ut så här: skärmdump, Safari. Så ser den också ut i Mozilla-läsare om jag tar bort DOCTYPE-definitionen men när jag lämnar kvar den funkar det bara i Safari.
Fulkod hoppas jag verkligen inte att det är, det är ju egentligen bara fyra DIV-taggar och ett stylesheet, som ser ut så här i aktuell version:

#top { background-color:#CCCCCC; position:absolute; left:0; 
top:0; right:0; bottom:115px; width:100%; height:115px; 
z-index: 1; border-bottom: 1px solid black; margin-bottom: 1px; 
padding-bottom:1px; }

#menu { background-color:#C0C0C0; position:absolute; left:0; 
top:115px; right:195px; bottom:32px; width: 195px; height:auto; 
z-index: 1; }

#main { background-color:#BBBBBB; position:absolute; left:195px; 
top:115px; right:0; bottom:32px; width: auto; height:auto; 
z-index: 2; overflow: auto; }

#bottom { background-color:#CDCDCD; position:absolute; left:0; 
top:auto; right:0; bottom:0; width: 100%; height:32px; 
z-index: 1; }

body { margin: 0px; padding: 0px; background-color: #fff; 
font-family: verdana, sans-serif; font-size: 12px; 
line-height: 1.8em; z-index: 1; }

Jag har som sagt verifierat koden och allt är ur den synvinkeln ok, kanske behövs ett "fulhack" för att det ska funka i alla läsare?

Citat:

Skrevs ursprungligen av Marcus Holmer
Har nu bytt till strict. Hämtade definitionen på w3schools men Mozilla renderar fortfarande sidan fel. Det är bara i Safari som det funkar som det ska.

Tar jag däremot bort DOCTYPE-kommentaren så fungerar sidan i Mozilla/Camino också. Varför är det så? Mozilla följer ju standarderna...

Sidan är nu verifierad som XHTML 1.0 strict och även CSS-filen är verifierad. Så vad gör jag för fel?

Funkar det i IE nu?

Nä, inte riktigt. Det vänstra området (id=menu) har inte full höjd och det högra (id=main) visar ingen bild.

Men det är en förbättring...

Hmmm... Jag tittade på sidan över Mozilla Quirks Mode Behavior och där står det att:

Citat:

The CSS parser accepts colors not beginning with #.

samt

HTML colors are parsed differently (# is not required, and missing digits are filled int differently)

.

Om Mozilla inte är i Quirk mode verkar det som att den inte accepterar färger som inte börjar med #. I din kod har du till exempel

border:0 solid black

Testa att ändra den till #000000 och alla andra liknande as well och se vad det ger för resultat.

Känns som ett långt skott men vad tusan

Mozillas debugger säger följande:

Error: The stylesheet http://www.familjenholmer.com/new/xhtml_css.php was not loaded because its MIME type, "text/html", is not "text/css".

Jag läser ut färger mm mha PHP/MySQL, följdaktligen har css-filen filändelsen .php. Det kan vara grunden till problemet i Mozilla.

IE visar sidan nästan rätt. Mittenområdena stämmer fortfarande inte, där kan jag inte ställa in höjden. Att ange höjden med ett fast värde eller med % funkar tyvärr inte heller då de områdena ska växa om jag förstorar fönstret.

Pröva att klistra in stylesheetet i din xhtml-fil och se om problemet försvinner.

Gör det det kan en lösning vara att helt enkelt köra en include("mitt_css.php") på rätt ställe i din xhtml-fil.

Citat:

Skrevs ursprungligen av Marcus Holmer
IE visar sidan nästan rätt. Mittenområdena stämmer fortfarande inte, där kan jag inte ställa in höjden. Att ange höjden med ett fast värde eller med % funkar tyvärr inte heller då de områdena ska växa om jag förstorar fönstret.

Om du använder % växer det väl när du storleksförändrar fönstret? Läste någonstans om en bugg som gör att du måste ha något kontent för att "spänna ut" ett fält i IE, typ en blank gif med höjden du vill ha. Är dock osäker på exakt vad detta gällde samt var jag läste det men det kan vara en hint om var att felsöka.

Citat:

Skrevs ursprungligen av Marcus Holmer
Mozillas debugger säger följande:

Error: The stylesheet http://www.familjenholmer.com/new/xhtml_css.php was not loaded because its MIME type, "text/html", is not "text/css".

Jag läser ut färger mm mha PHP/MySQL, följdaktligen har css-filen filändelsen .php. Det kan vara grunden till problemet i Mozilla.

well duh!

om du absolut måste ändra grejer i css filen med php får du ju se till att den har rätt MIME format, så skicka med en header som ser till att det blir text/css...

men jag antar du listade ut det själv...

Citat:

Skrevs ursprungligen av scooterbabe
Pröva att klistra in stylesheetet i din xhtml-fil och se om problemet försvinner.

Gör det det kan en lösning vara att helt enkelt köra en include("mitt_css.php") på rätt ställe i din xhtml-fil.

Gjorde en inlcude och det löste MIME-problemet. Nu har jag bara IE-problemet kvar. Att ange ett procenttal funkar inte och att lägga in en X pixel hög bild är ett fulhack som kanske är en sista utväg men inte aktuellt just nu.

Jag SKA fixa det här!

Citat:

Skrevs ursprungligen av Marcus Holmer
Gjorde en inlcude och det löste MIME-problemet. Nu har jag bara IE-problemet kvar. Att ange ett procenttal funkar inte och att lägga in en X pixel hög bild är ett fulhack som kanske är en sista utväg men inte aktuellt just nu.

Jag SKA fixa det här!

ok, får se om jag har förstått rätt? du vill ha din mitten div att sträcka ut sig till hela fönstret om/när man skalar upp det?

ok, då är det så här att en html sidas höjd är aldrig högre än innehållet, dvs inte fönstret som dokumentet körs i.
Dock finns det möjlighet att få det så om man sätter sin body till 100% i höjd (med css då)..

hjälper detta?

och vilken ie snackar vi om här? ie/mac? ie5.5? ie6?

jag kan inte testa så mycket på jobbet eftersom det är ett pc ställe...

Citat:

Skrevs ursprungligen av johan dansk
ok, får se om jag har förstått rätt? du vill ha din mitten div att sträcka ut sig till hela fönstret om/när man skalar upp det?

ok, då är det så här att en html sidas höjd är aldrig högre än innehållet, dvs inte fönstret som dokumentet körs i.
Dock finns det möjlighet att få det så om man sätter sin body till 100% i höjd (med css då)..

hjälper detta?

och vilken ie snackar vi om här? ie/mac? ie5.5? ie6?

jag kan inte testa så mycket på jobbet eftersom det är ett pc ställe...

Det är just IE 5 för PC som bråkar. IE för Macen är inte särskilt högt prioriterad.

Att ange höjden i ett stylesheet till 100% funkar inte i IE 5/PC. Den visar bara bakgrundsfärgen för det området som är fyllt av text, som du sa ovan.

Fuskade nu genom att göra menu-området genomskinligt och lade in bakgrundsfärgen för body-taggen istället. Tyvärr funkar "main" fortfarande inte.

Där syns varken text eller färg.

Citat:

Skrevs ursprungligen av Marcus Holmer
Att ange höjden i ett stylesheet till 100% funkar inte i IE 5/PC. Den visar bara bakgrundsfärgen för det området som är fyllt av text, som du sa ovan.

kommer itne ihåg hur det med ie5/pc exakt, men du angav body (taggen alltså) höjden till 100% med.

ie5.5 förtolkar även boxmodellen fel, så tänk på dina margins och om du absolut måste stödja 5.5 sök på "box model hack" finns beskrivit på en sida av Tantek ganska bra (killen bakom ie/mac renderingsmotorn), för att kompensera för att den räknar fel på margins jämnfört med höjd/bredd...

Citat:

Skrevs ursprungligen av Marcus Holmer
Mozillas debugger säger följande:

Error: The stylesheet http://www.familjenholmer.com/new/xhtml_css.php was not loaded because its MIME type, "text/html", is not "text/css".

Jag läser ut färger mm mha PHP/MySQL, följdaktligen har css-filen filändelsen .php. Det kan vara grunden till problemet i Mozilla.

Om du genererar css-filen med php så måste du explicit ange mime-typen i php-skriptet som spottar ur sig css-data. Om man inte anger mime-typen själv kommer php nämligen att själv ange den förinställda typen ("text/html" ifall man inte ändrat den inställningen). Mime-typen anger du med php:s header()-funktion:

header("Content-Type: text/css");

Tänk bara på att du måste se till att skriptet skickar iväg all header-data innan det börjat trycka innehåll ut till klienten. Antingen gör du header()-anropet först av allt, eller så använder du dig av "output buffering" så kan du göra anropet när som helst (så länge det är innan bufferten töms).

Edit: Såg att någon redan hade sagt ungefär samma sak. Jaja, nu vet du iaf ytterligare ett sätt att lösa mime-problemet på till nästa gång

Senast redigerat 2003-08-03 13:39
Citat:

Skrevs ursprungligen av Samuel K
header("Content-Type: text/css");

Tänk bara på att du måste se till att skriptet skickar iväg all header-data innan det börjat trycka innehåll ut till klienten.

Ett väldigt vanligt fel som är svårt att hitta - det räcker med ett blanksteg någonstans innan "echo header..." för att det skall balla ur

Citat:

Skrevs ursprungligen av scooterbabe
Ett väldigt vanligt fel som är svårt att hitta - det räcker med ett blanksteg någonstans innan "echo header..." för att det skall balla ur

Precis... ett rätt vanligt fel är att man råkat sätta in en blankrad innan "<?php"-taggen, och det kan driva en till vansinne om man inte vet vad man ska leta efter under felsökningen. Men om man använder header()-funktionen tillsammans med php:s output buffering (mitt favoritsätt att lösa det på) så kan man iaf göra anropet närsomhelst under skriptets gång. Allt man behöver göra är att sätta ett anrop till ob_start() allra först i skriptet och ett anrop till ob_end_flush() allra sist.

Ok,

heade-funktionen funkar nu för den separata css-php-filen. Mozilla överlevde det också

IE är dock som sagt fortfarande problemet. Ville kolla in Tantreks sida men den går inte att nå. Har hittat en massa andra sidor med modifierade hack, ska kolla in dem.

Hur kan jag få scroll-funktionen (hjul-mus) att funka med overflow-attributet i div-taggen? Det funkar ju med frames...

Citat:

Skrevs ursprungligen av Marcus Holmer
Hur kan jag få scroll-funktionen (hjul-mus) att funka med overflow-attributet i div-taggen? Det funkar ju med frames...

det finns inget sätt att göra så att system funktioner såsom tex. scrollwheel'et kan anv'ndas, det beror helt på webbläsaren har implementerat det.

möjligen kan det vara så i vissa läsare att div'en måste ha "fokus" typ att man klickar där först eller nått...

1
Bevaka tråden