[XHTML] Tabel laat 1 pixel ruimte tussen 2 rijen - Softwareontwikkeling

maandag 14 februari 2005 18:38

Acties:

Topicstarter

Ik heb de volgende Valid XHTML Transitional 1.0 code:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <style type="text/css">
 body
{ 
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 cursor: default;
}
table
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
}
td
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
}
a
{
 color:#E06500;
 text-decoration: none;
}
a:Hover
{
 color:#E06500;
 text-decoration:underline;
}
.navigationbutton
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 9pt;
 border: 1px solid;
 background: #ECECEC;
 border-color: #5F5D5C;
 width: 150px;
}
.subnavigationbutton
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 9pt;
 border: 1px solid;
 background: #ECECEC;
 border-color: #5F5D5C;
 width: 120px;
}
.sub2navigationbutton
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 9pt;
 border: 1px solid;
 background: #ECECEC;
 border-color: #5F5D5C;
 width: 89px;
}
 </style>
</head>
<body>

   <table width="202" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td colspan="7" height="10">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td width="26" height="1" style="border-left: 1px;">[img]"images/spacer.gif"[/img]</td>
     <td width="15" style="border-left: 1px;">[img]"images/spacer.gif"[/img]</td>
     <td width="15">[img]"images/spacer.gif"[/img]</td>
     <td width="120" colspan="3">[img]"images/spacer.gif"[/img]</td>
     <td width="26">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td width="150" colspan="5"><input type="button" onclick="document.location.href=''" value="menu1" class="navigationbutton" /></td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td colspan="7" height="10">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td colspan="5"><input type="button" onclick="document.location.href=''" value="menu2" class="navigationbutton" /></td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td colspan="7" height="10">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td colspan="5"><input type="button" onclick="document.location.href=''" value="menu3" class="navigationbutton" /></td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    
    <tr>
     <td colspan="7" height="10">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td colspan="5"><input type="button" onclick="document.location.href=''" value="menu4" class="navigationbutton" /></td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td style="border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
     <td colspan="3">[img]"images/spacer.gif"[/img]</td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td rowspan="2">[img]"images/spacer.gif"[/img]</td>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td style="border-bottom: 1px solid black; border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
     <td rowspan="2" colspan="3"><input type="button" onclick="document.location.href=''" value="submenu1" class="subnavigationbutton" /></td>
     <td rowspan="2">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td height="10" style="border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td height="10" style="border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
     <td colspan="3">[img]"images/spacer.gif"[/img]</td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td rowspan="2">[img]"images/spacer.gif"[/img]</td>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td height="10" style="border-bottom: 1px solid black; border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
     <td rowspan="2" colspan="3"><input type="button" onclick="document.location.href=''" value="submenu2" class="subnavigationbutton" /></td>
     <td rowspan="2">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td height="10" colspan="3">[img]"images/spacer.gif"[/img]</td>
     <td width="15">[img]"images/spacer.gif"[/img]</td>
     <td width="15" style="border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
     <td width="90">[img]"images/spacer.gif"[/img]</td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td height="10" colspan="3">[img]"images/spacer.gif"[/img]</td>
     <td height="10">[img]"images/spacer.gif"[/img]</td>
     <td style="border-bottom: 1px solid black; border-left: 1px solid black;">[img]"images/spacer.gif"[/img]</td>
     <td rowspan="2"><input type="button" onclick="document.location.href=''" value="sub2menu1" class="sub2navigationbutton" /></td>
    </tr>
    <tr>
     <td height="10" colspan="7">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td colspan="7" height="10">[img]"images/spacer.gif"[/img]</td>
    </tr>
    <tr>
     <td>[img]"images/spacer.gif"[/img]</td>
     <td colspan="5"><input type="button" onclick="document.location.href=''" value="menu5" class="navigationbutton" /></td>
     <td>[img]"images/spacer.gif"[/img]</td>
    </tr>
   </table>
   
</body>
</html>

Ik heb nu in alle TD's effe de code [img]"images/spacer.gif"[/img] neergezet zodat je kan als je de border van de tabel aanzet goed kan zien hoe de structuur is.

Dit is een navigatiemenu, en maakt gebruik van 3 levels.
Tussen submenu2 en sub2menu1 word 1 pixel ruimte onterecht opengelaten. In IE6 en Firefox 1.0 zie je dus 1 pixel leegte, en bij Opera 7.54 gaat het wel goed en sluit het lijntje goed aan op de submenu2 button. Dit is dus ook de bedoeling.
Net zoals tussen menu4 en submenu1.

Ik ben al uren hiermee bezig om dit goed te krijgen maar het lukt gewoon niet en weet niet waar het inzit. Nou las ik al in een ander topic iets over als je in een tabel veel rowspans en colspans gebruikt dit gedoemt is te mislukken.

Ik wil dit gewoon goed hebben zonder reacties als:
Waarom gebruik je geen andere techniek?
Gebruik geen tables en houd je layout en data gescheiden.

Dus graag alleen serieuze reacties... $_/-\o_$

maandag 14 februari 2005 18:52

Acties:

Rowanov

Kop eens wat anders...

Heb je een online testcase? Misschien is het ook wel handig om je code te reduceren om het probleem te isoleren. Over het gebruik van tables voor layout; je bent hier aan het verkeerde adres als je die kritiek niet kan hebben.

maandag 14 februari 2005 18:56

Acties:

Urk

Topicstarter

Rowanov schreef op maandag 14 februari 2005 @ 18:52:
Heb je een online testcase? Misschien is het ook wel handig om je code te reduceren om het probleem te isoleren. Over het gebruik van tables voor layout; je bent hier aan het verkeerde adres als je die kritiek niet kan hebben.

Ja, de online testcase staat hierboven. Sla de bovenstaande code op in een HTML file en run deze.
Alle benodigde code (zoals styles etc.) staan erin.
Ik heb m'n code al gereduceert maar het probleem blijft! Had zelfs het level 3 submenu in een aparte tabel staan geintegreerd in een TD. Maar daar was het probleem ook. Toen dacht ik dat het daardoor kwam maar dat was dus niet zo...

maandag 14 februari 2005 18:58

Acties:

Rowanov

Kop eens wat anders...

Urk schreef op maandag 14 februari 2005 @ 18:56:
[...]

Ja, de online testcase staat hierboven. Sla de bovenstaande code op in een HTML file en run deze.

Ja doei! Een beetje moeite zelf doen kan geen kwaad.

Ik heb m'n code al gereduceert

Ja, of niet. Gereduceerd is een simpele tabel met 1 rij etc.

[ Voor 18% gewijzigd door Rowanov op 14-02-2005 19:03 ]

maandag 14 februari 2005 18:59

Acties:

djc

Urgh, de hele lol van XHTML/CSS is dat je geen tables meer moet gebruiken voor je layout.

Verder: heb je gekeken naar cell-padding, cell-spacing en border-collapse properties?

Edit: spacer images zijn so 1996.

[ Voor 11% gewijzigd door djc op 14-02-2005 19:00 ]

Rustacean

maandag 14 februari 2005 19:03

Acties:

Johnny

ondergewaardeerde internetguru

OMFG

spacer.gif alert!

Jouw probleem is vele malen groter dan een enkele pixel...

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

maandag 14 februari 2005 19:14

Acties:

crisp

Devver

Pixelated

Gebruik geen tables voor layout en houd je content en presentatie gescheiden.

^^^ serieuze reactie!!!

wat is er mis met een geneste list?

Intentionally left blank

dinsdag 15 februari 2005 01:35

Acties:

Urk

Topicstarter

Manuzhai schreef op maandag 14 februari 2005 @ 18:59:
Urgh, de hele lol van XHTML/CSS is dat je geen tables meer moet gebruiken voor je layout.

Verder: heb je gekeken naar cell-padding, cell-spacing en border-collapse properties?

Edit: spacer images zijn so 1996.

OK, indien jullie geen tables meer gebruiken, prima! maar ik doe dat nu nog wel. Zeker omdat deze applicatie al bestaat en al wat ouder is maar nu wat functies aan moeten worden toegevoegd.
Zoals je kon lezen hierboven in m'n starttopic heb ik de spacer images alleen even toegevoegd om de border makkelijk zichtbaar te maken. Wellicht niet jullie manier maar het werkt wel.

cellpadding en cellspacing stonden beide al goed en op 0, border-collapse heb ik nu op collapse gezet en dat heeft het probleem opgelost! Hartelijk dank dus! Kende deze CSS property nog niet.

Om toch nog even terug te komen om geen tables te gebruiken voor layout wil ik jullie natuurlijk graag geloven, jullie hebben er wellicht meer verstand van dan ik.
Dus jullie hebben me nu weten te overtuigen om hier eens naar te kijken. Tot op heden maakte ik altijd nog gebruik van tables, gebruik je nu trouwens voor geen een doel TABLES meer? Dat is effe een vraag tussendoor.

Ik ben lid van de nieuwsbrief van Sitepoint.com en ik weet nog van een aardige tijd geleden (heb even teruggekeken in m'n mail) dat Sitepoint een boek promootte genaamd:
HTML Utopia: Designing Without Tables Using CSS
Deze is zelfs online te vinden omdat ik me hiervoor toen heb opgegeven via: http://www.sitepoint.com/books/css1/htmlutopia.pdf
Dit zijn alleen de eerste vier chapters, het complete boek is te koop.

Om dus XHTML te ontwikkelen en programmeren zonder gebruik te maken van TABLES maar alleen met CSS moet ik dit boek dus eens doornemen? Zijn jullie het daarmee eens?
Is dat een goede start en informatiebron om te beginnen daarmee?
Ik hoor graag jullie advies/reacties. $_/-\o_$

[ Voor 3% gewijzigd door Urk op 15-02-2005 01:38 ]

dinsdag 15 februari 2005 01:40

Acties:

Urk

Topicstarter

Het vreemde van m'n bericht hierboven is dat ik als laatste zin van het mailtje van Sitepoint.com lees:

"PS. By the way, we practice what we preach - in early 2003, we redesigned sitepoint.com using only CSS. Other major sites, such as ESPN.com, Wired.com and FastCompany.com, have done the same. Soon, it will be your turn. With HTML Utopia, you're sure to succeed."

Als ik echter de source van www.sitepoint.com bekijken kom ik nog wel TABLE, TR en TD tags tegen, wel maar 2 keer, maar toch.
Die worden gebruikt voor forum topics opsomming.

[ Voor 3% gewijzigd door Urk op 15-02-2005 01:41 . Reden: leestekens ]

dinsdag 15 februari 2005 09:02

Acties:

crisp

Devver

Pixelated

We zeggen ook niet dat tabellen helemaal niet gebruikt horen te worden, alleen dat je ze moet gebruiken waar ze voor bedoelt zijn: voor het weergeven van tabulaire data. Een topic-opsomming is daar een mooi voorbeeld van

Intentionally left blank

dinsdag 15 februari 2005 09:11

Acties:

gvdh81

To got or not to got..

Weet wel dat Internet Explorer een rare en buggy box-model activeert dankzij je tag:
<?xml version="1.0" encoding="ISO-8859-1"?>

Zoek maar even op "box model hack" misschien heb je er wat aan.

dinsdag 15 februari 2005 09:36

Acties:

Verwijderd

IE doet dat niet alleen bij een XML Declaratie, dat gebeurt ook al bij een SGML comment.

dinsdag 15 februari 2005 15:06

Acties:

Urk

Topicstarter

crisp schreef op dinsdag 15 februari 2005 @ 09:02:
We zeggen ook niet dat tabellen helemaal niet gebruikt horen te worden, alleen dat je ze moet gebruiken waar ze voor bedoelt zijn: voor het weergeven van tabulaire data. Een topic-opsomming is daar een mooi voorbeeld van

OK, maar is het boek wat ik hierboven noemde van Sitepoint.com wel een aanrader?
HTML Utopia: Designing Without Tables Using CSS

Pagina: 1

Reageer