Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[CSS] Containern följer inte med texten

1
Skriv svar
Permalänk
Medlem
●

[CSS] Containern följer inte med texten

Jag sitter och testar lite med något faux columns-liknande. Jag lyckas få det helt rätt i IE, men det ser lika fel ut i både Firefox och Opera. Någon som vet vad jag glömt att göra?

HTML: http://viek.frac.dk/css/index.htm
CSS: http://viek.frac.dk/css/style.css

Jag vill då få texten att komma inne i diven med "den fina ramen". Någon som har någon idé om vad jag kan göra?

Marginalerna ser lite konstiga ut i Firefox och Opera också. Mer än tio pixlar som jag har skrivit.

Tacksam för svar. /Viktor

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

I det här fallet så är det nog så att har du ju sagt att höjden på #main ska vara 650px då blir den det också. Att IE tolkar detta fel är ju MS problem. Du bör alltid utgå från en webbläsare som stödjer webbstandarderna något sådär och tweaka för äldre och sämre webbläsare. Det är betydligt enklare.

#container har height satt till auto vilket innebär att den kommer att kollapsa höjdmässigt och bli så liten som den kan. Dess child är ju #main där höjden är satt till 650px. #container blir alltså 650px + ev. paddings och margins som spelar in. Inget konstigt här alltså. Gör om, gör rätt.

Sen har du helt och hållet tagit dig vatten över huvudet när du använder dig av dokumenttypsdeklarationen för XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Om du inte vet vad det innebär att använda XHTML 1.1 så gör det inte. Jag rekommenderar att du byter till vedertagen HTML 4.01 eller XHTML 1.0 Transitional. Du kan t.ex. inte servera XHTML 1.1 till IE.

Visa signatur

10 RTFM
20 RTFAQ
30 STFW

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av andrin
I det här fallet så är det nog så att har du ju sagt att höjden på #main ska vara 650px då blir den det också. Att IE tolkar detta fel är ju MS problem. Du bör alltid utgå från en webbläsare som stödjer webbstandarderna något sådär och tweaka för äldre och sämre webbläsare. Det är betydligt enklare.

#container har height satt till auto vilket innebär att den kommer att kollapsa höjdmässigt och bli så liten som den kan. Dess child är ju #main där höjden är satt till 650px. #container blir alltså 650px + ev. paddings och margins som spelar in. Inget konstigt här alltså. Gör om, gör rätt.

Sen har du helt och hållet tagit dig vatten över huvudet när du använder dig av dokumenttypsdeklarationen för XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Om du inte vet vad det innebär att använda XHTML 1.1 så gör det inte. Jag rekommenderar att du byter till vedertagen HTML 4.01 eller XHTML 1.0 Transitional. Du kan t.ex. inte servera XHTML 1.1 till IE.

Tack för ditt svar.

Tack också för att du berättade vilken version av XHTML jag ska använda. Har letat runt och frågat massor med gånger, men aldrig något svar. Men om man skulle använda 1.0 så tyckte W3Schools att man skulle använda Strict om man arbetade mycket med CSS och det är väl nästan det jag gör? Ska jag ändå använda Transitional?
Du verkar veta mycket om de olika versionerna så jag undrar om du kan berätta lite mer om skillnaderna?

Och om någon annan vet skillnaderna mellan versionerna skulle jag uppskatta om ni också skrev ett inlägg.

Usch, jag uttryckte mig rätt dåligt ovan. Jag hittade knappt några synonymer. Ursäkta.

- - - - - - - - - -

Jag satte #main:s höjd till "auto" också och då dras ju hela bakgrunden upp eftersom den bara räknar med de satta höjderna. Men hur gör jag för att få bakgrunden att följa med? Jag har varit inne på AListApart och kollat på faux columns, men jag tycker inte att de förklarar så mycket hur de gör. Men om jag sätter höjden 680 pixlar på #container för att få sidan i "normalläge" så att den ser bra ut utan för mycket text - hur gör jag då för att få bakgrunden att följa med när det blir mer text? Jag sätter höjden i #container till 680 pixlar nu då.

- - - - - - - - - -

Jag fixade det med att bakgrunden inte följde med texten genom att använda faux columns. Jag hade visst inte förstått hela artikeln innan. Så nu är det fixat. Men marginalerna är fortfarande lite fel i Firefox och Opera. Det ser dock rätt ut i IE.
Sedan blir det inte så mycket padding mellan footertexten och kolumntexten även om jag satt den till 18 pixlar.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Citat:

Ursprungligen inskrivet av andrin

Sen har du helt och hållet tagit dig vatten över huvudet när du använder dig av dokumenttypsdeklarationen för XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Om du inte vet vad det innebär att använda XHTML 1.1 så gör det inte. Jag rekommenderar att du byter till vedertagen HTML 4.01 eller XHTML 1.0 Transitional. Du kan t.ex. inte servera XHTML 1.1 till IE.

Varför har han tagit sig vatten över huvudet, när han använder xhtml 1.1?
xhtml 1.1 är bara en uppdatering av 1.0 strict.

Använder man content-type: text/html, tolkar webbläsarna koden som vanlig htmlkod och inte som xml.

Jag kör med xhtml 1.1. Innan så körde jag 1.0 strict.

Man ska alltid sträva efter att skriva strikt kod för att göra sidorna framtidsäkra.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Override
Varför har han tagit sig vatten över huvudet, när han använder xhtml 1.1?
xhtml 1.1 är bara en uppdatering av 1.0 strict.

Använder man content-type: text/html, tolkar webbläsarna koden som vanlig htmlkod och inte som xml.

Jag kör med xhtml 1.1. Innan så körde jag 1.0 strict.

Jag använder den här tagen:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Jag börjar bli lite smått förvirrad nu. Vilken ska jag använda? 1.0 Transitional, 1.0 Strict, 1.1?

Och så ska vi ställa frågan om hur man fixar till marginalerna och paddingen mellan footern och kolumnen?

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Använd xhtml 1.1

1. Du lär dig att skriva strikt och ren kod som validerar.
2. Du gör dina sidor säkra för kommande webbläsare.

Lite mer info: http://www.w3.org/International/articles/serving-xhtml

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Override
Varför har han tagit sig vatten över huvudet, när han använder xhtml 1.1?

För att XHTML 1.1 rekomenderas (SHOULD, as as described in RFC 2119) serveras som xml. Att servera XHTML 1.1 som text/html är alltså ett fel på HTTP-nivå.

Citat:

Ursprungligen inskrivet av Override
xhtml 1.1 är bara en uppdatering av 1.0 strict.

Helt fel. XHTML 1.1 är en total modularisering av XHTML 1.0.

Citat:

Ursprungligen inskrivet av Override
Använder man content-type: text/html, tolkar webbläsarna koden som vanlig htmlkod och inte som xml.

Nej, egentligen inte. Den kommer att tolka det som tag soup. Tänk så här: Servern serverar ett validerat XHTML 1.1 dokument som text/html. I HTTP-headern står det alltså: 'Här kommer det html'. Webbläsaren tänker: 'Wow! Ett html dokument (go inte html-mode), det vet jag exakt vad jag ska göra med. Undra vad det är för nånting? Vad? Den här dokumenttypsdeklarationen finns inte i min lista över html-dokumenttypsdeklarationer. (go inte tag soup-mode) Ok, jag får väl göra det bästa av situationen.'.

Citat:

Ursprungligen inskrivet av Override
Jag kör med xhtml 1.1. Innan så körde jag 1.0 strict.

Jag säger inte att det inte går. Men har du gjort det rätt så kommer användare få upp en 'Save As'-dialog varje gång de försöker efterfråga en sådan 'sida' med IE.

Citat:

Ursprungligen inskrivet av Override
Man ska alltid sträva efter att skriva strikt kod för att göra sidorna framtidsäkra.

Självklart. Men sidorna måste också vara 'historiesäkra'

Edit
Jag citerar från dokumentet du länkar till:

Citat:

XHTML 1.0 can also be served as XML, and XHTML 1.1 is always served as XML.

Vidare kan man ju också fördjupa sig i http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/

Senast redigerat
Visa signatur

10 RTFM
20 RTFAQ
30 STFW

Redigera
Citera flera Citera
Permalänk
Medlem
●

Vad ska man använda? Det verkar ju råda väldigt delade meningar om detta. Finns det någon enklare dokumentation rörande detta förutom den andrin länkade till, då jag inte riktigt hittade vad jag letade efter. Jag hittar inte heller det där om att 1.0:an kan serveras som antingen XHTML eller XML, medan 1.1:an bara kan serveras som XHTML på den andra sidan. Men jag skumläste bara.

Jag designar mina sidor enbart genom CSS och serverar dem som "text/html", så det borde väl bli en strikt version. XHTML 1.0 Strict eller XHTML 1.1?

Är "<![CDATA[ ]]>" också något som måste användas i XHTML? Innanför script- och style-tagarna?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

jag tycker du ska köra på xhtml 1.1

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Hehe roligt, satt just och funderade på detta idag och tänkte starta en tråd om det, vad som egentligen är rätt. Körde mina sidor som XHTML 1.1 förut, men efter denna tråd av andrin så ändrade jag mig till 1.0. Varför är alla så förtjusta i att validera emot 1.1 egentligen? Finns det/vet ni om några förbättringar, eller är vi alla lite versionskåta och försöker sikta så högt som möjligt? Aja, håller mig till 1.0, W3C säger att det är vad jag bör köra och då kör jag det. De har för det mesta väldigt vettiga idéer så Ni som validerar emot 1.1, varför gör ni det? Bara nyfiken här

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Jag testade att byta ut

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

mot

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />

Testade sidan i IE och Firefox. Sidan fungerar i båda webbläsarna.

Jag kör med xhtml 1.1

Redigera
Citera flera Citera
Permalänk
Medlem
●

De där meta-elementen gör ju inte att dokumentet serveras som text/html resp. application/xhtml+xml. För att servera krävs det inställningar på serversidan. Antingen i själva webbservern eller i ett server-side-skript (PHP, ASP etc.). Meta-elementen i det här kontextet hjälper bara till om en användare väljer att spara dokumentet och tittar på det senare från lokal disk.

Visa signatur

10 RTFM
20 RTFAQ
30 STFW

Redigera
Citera flera Citera
1
Skriv svar