Archief - Css: Verkeerde tables in FireFox

lyno · 8 jul 2005

Ik ben een site aan het maken met table's, Alles zag er goed uit, tot ik het opende in Firefox. De tabellen stonden niet meer op hun plaats, waren dus versprongen, maar IE geeft alles goed weer. Ik heb in mijn css gerbuik gemaakt van position maar dat helpte ook niet.

Oorspronkelijk bestand: (geen position) Als je in IE kijkt, zo moet het zijn.
Wel met position Als je nu in IE kijkt, is het bijna hetzelfde, juist de drie tables staan in het midden daar, maar ze moeten verspreid zijn.

P.S Voor mijn css en html code kan je kijken bij paginabron. Als het niet lukt, het staat hier ook;

Eerste link:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
			
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
<!--
body {
 text-align: center;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 }
 
table { 
 border-collapse: collapse;
 }
 
.tabeldrie {
 background-color: #4b4b48;
 height: 180px;
 width: 260px;
 }
 
.tabelgroot {
 background-color: #4b4b48;
 text-align: left;
 margin: 0 auto;
 height: 555px;
 width: 760px;
 }
 
.midden {
 background-color: #555749;
 margin: auto;
 }
 
.links {
 background-color: #828282;
 height: 35px;
 width:760px;
 }

.banner {
 height: 150px;
 }

-->
</style>
</head>
<body>


<table class="midden" width="780">
 <tr>
  <td class="banner">banner
	</td>
 </tr>
 <tr class="links">
  <td>link
	</td>
 </tr>
 <tr>
  <td>
	 <table cellspacing="10">
	  <tr>
	   <td class="tabeldrie"><b>Latest News:</b>
		 </td>
		 <td class="tabeldrie"><b>Sponsers:</b>
		 </td>
		 <td class="tabeldrie"><b>Match results:</b>
		 </td>
		</tr>
	 </table>
	</td>
 </tr>
 <tr>
  <td>
	 <table cellspacing="10">
	  <tr>
		 <td class="tabelgroot">hoogte 555px, breedte 760px
		 </td>
		</tr>
	 </table>
	</td>
 </tr>
</table>

 	
		
</body>
</html>

Tweede link:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
			
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
<!--
body {
 text-align: center;
 }
 
table { 
 border-collapse: collapse;
 }
 
.midden {
 background-color: #555749;
 margin: 0 auto;
 }
 
.tabeldrie {
 background-color: #4b4b48;
 text-align: left;
 position: relative; 
 top: 10px;
 left: 0px;
 }
 
.tabelgroot {
 background-color: #4b4b48;
 text-align: left;
 position: relative;
 left: 0px;
 
 }
 
.links {
 background-color: #828282;
 height: 35px;
 width: 760px;
 }

.banner {
 height: 150px;
 }
-->
</style>
</head>
<body>


<table class="midden" width="760" height="955">
 <tr>
  <td class="banner">banner
	</td>
 </tr>
 <tr class="links">
  <td>
			link
	</td>
 </tr>
 <tr>
  <td>
	 <table height="180" width="260" cellspacing="10">
	  <tr>
	   <td class="tabeldrie"><b>Latest News:</b>
		 </td>
		 <td class="tabeldrie"><b>Sponsers:</b>
		 </td>
		 <td class="tabeldrie"><b>Match results:</b>
		 </td>
		</tr>
	 </table>
	</td>
 </tr>
 <tr>
  <td>
	 <table height="555" width="755" cellspacing="10">
	  <tr>
		 <td class="tabelgroot">hoogte 555px, breedte 760px
		 </td>
		</tr>
	 </table>
	</td>
 </tr>
</table>

 	
		
</body>
</html>

DarkBone · 8 jul 2005

Je mag geen eenheidsaanduiding (in dit geval px)gebruiken in je attributen om de grootte / breedte aan te duiden!

cellspacing="10px"
wordt dus
cellspacing="10"

idem voor de width van je grote tabel

Eigenlijk is het slecht dat IE het toch goed weergeeft, want zo ontdek je je fout nooit natuurlijk

Opmerking:
Eigenlijk dien je tabellen niet te gebruiken om je layout op te maken!
Werken met DIV's, aangezien je met vaste groottes werkt is dit zeker niet moeilijker.

lyno · 8 jul 2005

bedankt

maar het probleem blijft bestaan. Bestaat er toch geen mannier zo, want ik zou graag eerst die tables zeer goed onder de knie hebben, voor ik met div's begin te werken.

Skratz · 8 jul 2005

Line 54, column 41: there is no attribute "height"

en ge moet eigenlijk altijd een eenheidsaanduiding gebruiken, anders weet de browser toch niet wat je wil, en neemt die maar iets (meestal em dacht ik).

voor de rest snap ik eigenlijk niet wat uw probleem is.
ik denk dat ge die bordercollapse weg wilt in die genestte tabel, als het dat is moet ge border-collapse: separate zetten

lyno · 8 jul 2005

Dit bedoel ik.

Ik heb dit gemaakt en in IE geeft hij ook degelijk weer wat ik moet hebben.

Maar in firefox ziet het er anders uit. En dat wil ik oplossen, maar hoe?

lyno · 10 jul 2005

niemand

?

ChroMe · 10 jul 2005

px moet er idd wel altijd bijstaan behalve bij 0, en je kan best zorgen dat het in FF werkt, IE past toch de helft van de CSS regels fout toe...

Grtz

DarkBone · 10 jul 2005

Skratz zei:
en ge moet eigenlijk altijd een eenheidsaanduiding gebruiken, anders weet de browser toch niet wat je wil, en neemt die maar iets (meestal em dacht ik).

ChroMe zei:
px moet er idd wel altijd bijstaan behalve bij 0, en je kan best zorgen dat het in FF werkt, IE past toch de helft van de CSS regels fout toe...

Grtz

Ik had het dan ook helemaal niet op zijn CSS code, ik verwijs naar het gebruik van px in zijn attributen van zijn html-tags. Daar wordt geen eenheidsaanduiding gebruikt, behalve %. Er wordt standaard aangenomen dat het om pixels gaat tenzij je eeen percentage opgeeft!

Skratz · 11 jul 2005

peuuut, tis niet omdat het niet perse moet volgens de standaard, dat het niet aangewezen is van het wel te doen. dus wel eenheidsaanduiding bij zetten, dat word ook door het w3c aangeraden.

en wat dat probleem betreft, heb ik het blijkbaar toch goed begrepen en heb ik dus de oplossing al gegeven.
ie neemt die bordercollapse niet over en firefox wel (vermoedelijk omdat het zo hoort) en die moet ge dus expleciet afzetten om uw gewenst resultaat te bekomen.

lyno · 11 jul 2005

Skratz zei:
peuuut, tis niet omdat het niet perse moet volgens de standaard, dat het niet aangewezen is van het wel te doen. dus wel eenheidsaanduiding bij zetten, dat word ook door het w3c aangeraden.

en wat dat probleem betreft, heb ik het blijkbaar toch goed begrepen en heb ik dus de oplossing al gegeven.
ie neemt die bordercollapse niet over en firefox wel (vermoedelijk omdat het zo hoort) en die moet ge dus expleciet afzetten om uw gewenst resultaat te bekomen.

Echt bedankt

Kmoet geen gebruik maken van position relative enzo, met seperate werkt het !

Bedankt

DarkBone · 11 jul 2005

Sorry Skratz, maar ik vind dit terug in de DTD van xHTML strict:

Code:

<!ATTLIST table
  %attrs;
  summary     %Text;         #IMPLIED
  [color=red]width       %Length;       #IMPLIED[/color]
  border      %Pixels;       #IMPLIED
  frame       %TFrame;       #IMPLIED
  rules       %TRules;       #IMPLIED
  cellspacing %Length;       #IMPLIED
  cellpadding %Length;       #IMPLIED
  >

en wat verder wordt length gedefinieerd

Code:

<!ENTITY % Length "CDATA">
    <!-- nn for pixels or nn% for percentage length -->

(de DTD vind je hier: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd)

Dat is ook wat je terugvindt op:
http://www.w3schools.com/tags/tag_table.asp (bij attribuut width staat % of px)

Soit, als ge de DTD bestudeerd ziet ge ook dat er zo'n dingen als MultiWidth bestaan, en dan is een relatieve aanduiding bijvoorbeeld ook toegelaten.

Ge zijt vrij om mij het tegendeel te bewijzen natuurlijk, ik leer zelf graag bij

Maar zoals ik het nu zie blijf ik bij men standpunt

Archief - Css: Verkeerde tables in FireFox

lyno

Legacy Member

DarkBone

Legacy Member

lyno

Legacy Member

Skratz

Legacy Member

lyno

Legacy Member

lyno

Legacy Member

ChroMe

Legacy Member

DarkBone

Legacy Member

Skratz

Legacy Member

lyno

Legacy Member

DarkBone

Legacy Member