Tables uppför sig fel i safari.

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

Har en sida under omskolning, ska ändra den från att ligga i frames till en sida med meny som includas.
Allt fungerar bra utom att en bild (den streckade linjen brevid menyn) som skall visas i hela sidans längdriktning inte gör de i safari, den visas rätt i Firefox och IE6. Höjden på tabeller är specad i css. exempel på sidan finns på adressen nedan. Är de nån som vet hur ja kan fixa detta så de fungerar, har testat massa olika att speca höjd här och där, men kommer ingen vart.

Sidan: http://vbm.gammlia.se/testman/start.php
Menyn som inkluderas: http://vbm.gammlia.se/testman/meny.html
Css: http://vbm.gammlia.se/testman/vbm.css

edit: borders är påslaget för att man ska se lite enklare hur den uppför sig..
/Johan

  • Medlem
  • Karlstad
  • 2005-03-04 12:27

Börja rensa upp i koden!!!!
Du har flera <body>, <html>, <head> och </head> och tabeller uppe i sidans huvud.
Titta sedan på på tråden från igår (förrgår?) om tabell i Safari. Där finns grunden för hur du kan göra.

Ok! kom på när du skrev att de kan ju vara bra att ta bort alla header/body etc ur filen som includas.
Men även om ja kikar på exemplen i den andra tråden så förstår ja inte hur man får det att fungera?

  • Medlem
  • Karlstad
  • 2005-03-04 13:28
Ursprungligen av Johan S:

Ok! kom på när du skrev att de kan ju vara bra att ta bort alla header/body etc ur filen som includas.
Men även om ja kikar på exemplen i den andra tråden så förstår ja inte hur man får det att fungera?

Gör en sådan tabell som har 100% höjd enligt beskrivningen hos apptools.
Ge den 100% bredd också.
Dela den i 4 eller 5 kolumner, varav en av dom är där du lagt den där streckade kanten.
osv.

Hinner inte, annars kulle jag ge dig kod. Testa själv.

Nu börjar de likna nåt..
http://vbm.gammlia.se/testman/mazzi.php

Är är de mesta rätt förutom att i IE6/Win så blir den gröna cellen med löv högst upp för hög.. den ser fin ut i båda FF och Safari..

ideer?

/Johan

  • Medlem
  • Karlstad
  • 2005-03-04 17:11

Johan,

Ursäkta mig, men du måste för hilskotta se till att koden blir läslig! Det ser ju ut som en katt kräkts och det är ju otroligt tidsödande att försöka leta reda på var olika elements finns. Om du använder Dreamweaver, gå in i preferences -> Code format ->

1. Kryssa i "indent" till MAX 2 spaces (om du vill ha indents över huvud taget).
2. sätt "tab size" till 1 eller 2 (högst) och kryssa i "automatic wrapping after column 76".
3. Prova också "Line break type" som "CR" (Macintosh) eller "LF" (Linux).

Du kommer dessutom garanterat också att få 3-4%mindre filstorlek om du får bort ALL onödig whitespace.

Ska kolla din egentliga fråga senare. Stressad.

EDIT:

Har kollat igenom kaoset snabbt:

Du har delat upp cellerna i en massa colspan och rowspan taggar. Det är livsfarligt. Du måste jobba med nested tables:

Första räkna ut hur många kolumner du behöver i "parent table", dvs den första tabellen. Gör den.
Sätt valign="top" i alla celler (om du nu inte vill ha innehållet i mitten eller i botten av kolumnerna). Placera sedan nya tabeller i kolumnerna.

I ditt fall tror jag en rgundkonstruktion skulle kunna se ut så här:

<table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#CC6600">
<tr>
<td width="15%">Meny, etc. </td>
<td width="2%"> </td>
<td width="83%"><table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#33CC66">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

Jag har en tutorial om principen med "nested tables" här (engelska):
http://www.proformica.com/nested-table-demo.shtml

Senast redigerat 2005-03-04 17:30

ska försöka framkalla mindre kräkande sen, är dock hemgådd från jobbet så ja får ta de på måndag

  • Medlem
  • Stockholm
  • 2005-03-07 09:48

Se alltid till att din sida validerar (validator.w3.org) innan du blir galen över buggar. Tex använder du attributet background på en td, vilket inte stöds av den dtd du använder.

This page is not Valid HTML 4.01 Transitional!

Line 84, column 40: there is no attribute "BACKGROUND"

  <td width="1px" rowspan="7" background="/images/strip.gif">

Ok, men hur fixar ja bg i en cell om ja inte får göra så?

Men jag tror inte att de är den icke-valideringen som gör att den andra cellen kruppar ur i IE..
Den är ju fin på gamla sidan med samma background-tag i td.
Men går de o få så de validerar o ser ut på samma vis så är ju bara de ett plus.

  • Medlem
  • Stockholm
  • 2005-03-07 10:42
Ursprungligen av Johan S:

Ok, men hur fixar ja bg i en cell om ja inte får göra så?

<table>
<tr>
<td id="specialBG">den här cellen har en bakgrund</td>
</tr>
</table>

och sen lite css

#specialBG { background: url(img/backgrounds/blabla.gif); }

Rekommenderar även jag att du provar använda div/css istället för tabell-layout.

Ursprungligen av ivar:

Rekommenderar även jag att du provar använda div/css istället för tabell-layout.

Så snart du haft en kurs med mig i detta ämne

Ursprungligen av Johan S:

Så snart du haft en kurs med mig i detta ämne

Du kan börja här:

A simple introduction to 3 column layouts
Making Simple Work of Complex CSS Layouts
Bring on the tables

  • Medlem
  • Norrköping
  • 2005-03-07 10:26

Du måste sätta en doctype på sidan som talar om för webläsaren vilken version av html som du använder.

Citat:

The DOCTYPE Declaration in your document was not recognized. This probably means that the Formal Public Identifier contains a spelling error, or that the Declaration is not using correct syntax. Validation has been performed using a default "fallback" Document Type Definition that closely resembles HTML 4.01 Transitional, but the document will not be Valid until you have corrected the problem with the DOCTYPE Declaration.

EDIT: Om du inte får tabellerna att funka så kan du ju alltid göra som man ska och inte använda tabeller för design

Ok Danne! Nu är de dax för granskning under luppen

Har tatt hjälp av din tutorial och ditt exempel och skapat nedanstående, är en bättre eller sämmre?

http://vbm.gammlia.se/testman/ny.php

edit: ivar! nu validerar sidan ovan

  • Medlem
  • Karlstad
  • 2005-03-07 14:56
Ursprungligen av Johan S:

Ok Danne! Nu är de dax för granskning under luppen

Har tatt hjälp av din tutorial och ditt exempel och skapat nedanstående, är en bättre eller sämmre?

http://vbm.gammlia.se/testman/ny.php

edit: ivar! nu validerar sidan ovan

Nu ser det väl bra ut, antar jag. Du har ju t.o.m. gjort koden överskådlig.
Har du kollat i olika webbläsare både Mac o PC?
Sitter allt där det ska? Kan man öka fontstorleken i webbläsaren utan att konstruktionen spricker?
I så fall: Grattis.

Beträffande rekommendationer för divs/css från andra: Sure. Den dag du känner för att ta ett kliv upp och lära dig den tekniken, så gör det. Den har många fördelar - men även en del nackdelar. Men om du vet vad det handlar om så är du bättre rustad att välja teknik som passar dig och varje projekt. Det är en fördel.

Men CSS ska du helst använda för att förmatera tabellbaserad layout också.

Håller på gå igenom sidan nu och flytta över de värden som kan va smidigt att behöva ändra, specar på olika celler etc till css. Antar att de är ett steg rätt håll iaf.

Tack för all hjälp!

1
Bevaka tråden