HTML & CSSur HTML, XHTML & CSS
29 svar · 1 318 visningar · startad av jwradhe
Hej! Håller på att fixa min förenings hemsida.
Men när ja tar upp den i Mozilla beter den sig precis som jag vill.
Men när ja testar i IE så försvinner loggon som ligger som background på den TD.
Samt att när sidan sträcks ut så sträcks alla sida menyer ut oxå. Vilket ja inte vill. Någon som vet hur ja ska lösa detta på ett bra sätt?
Du måste skicka med lite kod också, eller en länk till sidan, så kan vi hjälpa dig.
jwradhe skrev:
Aj sorry :D
Vill inte vara taskig alls, men du har ju ställt frågan....
Bra försök faktiskt, men underkänt. Det är ganska mycket där som måste göras om. Antingen plugga lite html på t.ex. webdesignskolan.com eller lej ut jobbet.
Ja det va ju bra konstruktiv kritik det dära!
Va ere som är underkännt då? nåt exempel.
jwradhe skrev:
Ja det va ju bra konstruktiv kritik det dära!
Va ere som är underkännt då? nåt exempel.
Han menar nog din html.
Tyvärr så är den så rörig så man kan inte komma med något konkret exempel på hur du kan förbättra sidan.
Förlåt, det kanske lät lite bryskt. Men du har en hel del småfel lite överallt, så det blev liksom lite mycket att kommentera. Jag slöade till där ett ögonblick...
Man kan t.ex. inte ha en bakgrund i en <tr>-tagg, du har inget som "håller ihop" menyn, du ska använda CSS för att formatera, det finns font-taggar i koden, osv....
Okey, men nån som kan HTML lite bättre kanske vet varför just dom dras ut sådär när hela sidan dras ut. Har valt height 100 på dom. Eller tex varför visas in background i tabellen i IE men i mozilla?
ska hem å fixa ihop kodexempel.
Men det roliga är ju att det funkar prima i Mozilla. Ere Ie som inte tillåter sådant då eller?
Hmm...
Njae...
Snarare att olika webbläsare buggar ur på olika sätt.
Flytta
background="logga.jpg"
från <tr> till <td colspan="2"> så får du fram bilden.
Det där med att sidspalten "dras ut" har förmodligen att göra med att höjder på tabellceller bredvid en "rowspan-cell" fördelas lite olika i olika webbläsare. Särskilt jobbigt blir det när du väljer att ställa webbläsaren i "standards mode" (vilket du gör iom att du valt den <!DOCTYPE du valt - se mer i t.ex. http://hsivonen.iki.fi/doctype/ ) samtidigt som du kör med tabeller och rowspans som layoutmetod...
Testa om det inte blir skillnad om du väljer en annan <!DOCTYPE.
Tabeller för layout fungerar enligt mina erfarenheter inte särskilt bra om man inte vill acceptera att köra i "quirks mode" med allt vad det innebär av webbläsarkompatibilitetsstrul...
Men det är en annan historia.
Testa och se om något av förslagen löser något av problemen - om inte, ge oss fler detaljer och fråga igen ;)
Okey, bild delen funka ju! helt korrekt. Men vet inte riktigt vilka ja ska testa utav doctype koderna. Förslag?
Nejdå, det har inget med DTD (doctype) att göra. Det är summan av alla småfel som får en del webbläsare att gå i taket.
Jag nämnde några problem förut. Här är fler:
Du har flera tabeller med samma id. Ett id får bara användas en gång på samma sida. Det är därför det kallas "id".
Du har tabeller med 380px bredd och inuti har celler med 400px bredd.
"Height" har aldrig varit ett godkänt mått på tabeller.
Dim matematik går inte ihop. Kolla bredden på cellerna och paddingen och kolla bredden på tabellen.
Danne V skrev:
Nejdå, det har inget med DTD (doctype) att göra
Jodå - fenomenet att vänsterspaltens olika delar "dras ut" i MSIE beror med stor sannolikhet på just det i just den här typen av tabellayout! :moose
Betrakta dessa exempel i MSIE (måtten skiljer gentemot tabellen i problemet, men tvåspaltslösningen är densamma som används där)
Tvåspaltstabell med <!DOCTYPE för "Quirks mode"
Samma tvåspaltstabell med <!DOCTYPE för "Standards mode" (typ)
Min punkt - Om man nu nödvändigtvis måste använda tabeller för layout (vilket jag anser är en dålig idé) måste man antagligen hålla sin sida i "Quirks mode" för att undvika problem med hur tabellcellshöjder fördelas vid sidan av en "rowspan-cell" - och "Quirks mode" är för mig också en dålig idé. Det funkar naturligtvis, och det finns workarounds - men det ger garanterat strul. ;)
Förresten - jwradhe
Om du skippar "rowspan-lösningen" och kör menyerna i vänsterspalten som en tabell i tabellen (eller varför inte div:ar :e ) slipper du problemet.
Samma exempel med en tabell i tabellen för vänsterspalt med sidan i "Standards mode"
Försök nu bara inte sätta höjd på tabellen i vänsterspalten till 100% för det kommer inte att fungera i andra fall än när du (som i exemplen) har en höjd i ett "fast" mått (dvs det funkar när "yttre" tabellen har en höjd angiven i pixel, men inte när den har en höjd i angiven procent)
... och, som sagt, även om CSS-layouter har sina sidor de med och kan vara svåra att få grepp om till en början, är tabeller alltså ingen bra idé för att göra layouter med eftersom man kommer att tvingas lära sig en massa knep som borde varit glömda för länge sedan om man vill bli riktigt bra på det helt enkelt. :birp
... och hursomhelst kan du få hjälp även med tabeller här på wF även om vi kanske inte gillar dem :birp
/red: ... och ja, jag vet att det inte finns height på tabeller i rekommendationen och att man bör använda style="height:200px" om man vill att sidan skall validera, men det är liksom en annan fråga det och den är redan avhandlad i tråden ;)
jarvklo!
Åkej, jag ska inte ta gift på att det ska funka med en riktig DTD. Men jag var tabellernas okrönte mästare tidigare, och visst, jag undvek colspans och rowspans så långt det gick, men använde dom ändå ibland och har aldrig någonsin sedan 1998 hört talas om detta, så jag är beredd att nästan ta gift i alla fall.
Däremot så har som sagt "height" aldrig varit ett attribut för tabeller, vare sig det är i % eller px. Och jag tror inte att detta ändrats bara för att man använder CSS. Och jag tror att det är det som spökar och på nåt underligt sätt får tabellen att breda ut sej i IE.
En "height" på en tabell får man genom att sätta attributet på cellerna.
Men jag sitter på Mac mest - och just nu. PC:n är nersläckt för kvällen. Men jag ska kolla detta imorgon.
Förresten, båda dina länkar till "samma" dokument fast med olika DTD pekar till samma sida. Klant. ;)
Hmm...
När vi ändå är igång med nagelfarningen så spelar det ingen roll om man kör med stilmallsdefinierade höjder heller ...
Quirks med style - Standards med style ;)
Danne V skrev:
Förresten, båda dina länkar till "samma" dokument fast med olika DTD pekar till samma sida. Klant. ;)
haha såkandegå :e :e :e :birp
Nu är det hursomhelst fixat - Bra att du såg det :birp.
jarvklo skrev:
Hmm...
När vi ändå är igång med nagelfarningen så spelar det ingen roll om man kör med stilmallsdefinierade höjder heller ...
Quirks med style - Standards med style ;)
Jag tror du missförstod.
Jag menar att du inte kan ha "height" för tables, vare sig i html eller CSS. Hela attributet ska bort. Väck. DTD:n har inte med saken att göra alltså.
Och jag tror att det är just "height" för hela tabellen (som alltså aldrig varit giltig kod) som ställer till det. Kanske i samband med "height" på cellerna och padding eller nåt, eller bara för sig själv. Men där tror jag problemet ligger.
Men, det har ju hänt att jag misstagit mig förr. Jag ska kolla imorron i PC:n.
Hmm...
CSS2.1 skrev:
The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value is treated as a minimum height.
Källa: http://www.w3.org/TR/CSS21/tables.html#height-layout :bire
icke-standardattributet "height" för tabeller har fungerat (med browserspecifikt stöd, men utan stöd i W3C:s rekommendationer) sedan Hedenhös ungefär - vilket framgår av t.ex. http://blooberry.com/indexdot/html/tagpages/t/table.htm om inte annat (för att dra upp ett gammalt referensverk som var pålitligt redan före sekelskiftet) ;)
Man får, som du säger, ta höjd för är att det finns automatik som kickar in när man överspecificerar sina höjder (om t.ex. summan av de angivna höjderna för raderna i tabellen inte stämmer med den angivna höjden på tabellen) och att det därför inte alltid blir som man tänkt sig om man "räknar fel".
Men man får även ta höjd för att även den situationen hanteras lite olika beroende på vilken mode man kör sidan i...;)
... så - som sagt - <!DOCTYPE *kan* spela in i den typ av tabell-layout som den här tråden handlar om helt enkelt :P
Ska väl testa bygga om den i divvar då. Vad är fördelen med divvar igentligen?
jarvklo skrev:
Hmm...
CSS2.1 skrev:
The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value is treated as a minimum height.
Källa: http://www.w3.org/TR/CSS21/tables.html#height-layout :bire
icke-standardattributet "height" för tabeller har fungerat (med browserspecifikt stöd, men utan stöd i W3C:s rekommendationer) sedan Hedenhös ungefär - vilket framgår av t.ex. http://blooberry.com/indexdot/html/tagpages/t/table.htm om inte annat (för att dra upp ett gammalt referensverk som var pålitligt redan före sekelskiftet) ;)
Man får, som du säger, ta höjd för är att det finns automatik som kickar in när man överspecificerar sina höjder (om t.ex. summan av de angivna höjderna för raderna i tabellen inte stämmer med den angivna höjden på tabellen) och att det därför inte alltid blir som man tänkt sig om man "räknar fel".
Men man får även ta höjd för att även den situationen hanteras lite olika beroende på vilken mode man kör sidan i...;)... så - som sagt - <!DOCTYPE *kan* spela in i den typ av tabell-layout som den här tråden handlar om helt enkelt :P
Jag tycker att det är lite tråkigt att du hellre börjar polemisera över principer och teorier och låtsas (?) att inte förstå vad det är jag försöker få fram istället för att kolla hur det praktiska resultatet av mitt förslag kan tänkas funka. För det är ju det som räknas, eller hur?
IE är den enda webbläsare som någonsin haft stöd för "height" i tabeller, vad jag vet i alla fall. Det har aldrig varit giltig kod, aldrig varit standard, aldrig validerat.
Jag tror att det är just det attributet i samverkan med de exakta höjderna på cellerna (och kanske den förvirrade källkoden i övrigt) som ställer till det. Självklart kan jag ha fel. Men jag tycker i alla fall det är värt att testa tesen praktiskt istället för att börja tjafsa om teorier. Särskilt hänvisningar till css2 eftersom just IE är ökänt för att ha det sämsta stödet av alla webbläsare för just det.
Därför har jag gjort iordning ett antal sidor på olika sätt och med olika DTD. Jag hoppas att trådskaparen (eller nån annan) kan kolla hur dom uppför sig, för när jag kollade i IE6 på XP, så är det inget som "sträcks ut" alls, vare sig tabellen, celler eller länkar. Allt ser ut som det ska.
Här är dom:
http://test.proformica.com/index.html <- html 4.01 transitional med height för tabellen.
http://test.proformica.com/index-no-height.html <- html 4.01 utan height för tabellen.
http://test.proformica.com/401-strict.html <- html 4.01 strict med height för tabellen
http://test.proformica.com/quirks.html <- ingen DTD alls med height för tabellen.
Notera att alla som har "height" för tabellen har måttet "100%". Trådskaparens första försök hade "400px" om jag inte minns fel. Det kanske blir annorlunda då. Inte vet jag.
Men jag hoppas i alla fall att ovanstående empiriska tester kan ge en fingervisning om var felet kantänkas vara, oavsett om det är DTD:n eller "height" eller kanske t.o.m. en kombination av båda. Eller nåt annat.
Har tagit bort alla height nu.
Men som min tidigare fråga. Hur kan divar göra min design/layout bättre?