Onjuiste weergave van een table

Status
Niet open voor verdere reacties.
Flamedog

Flamedog

Gebruiker
Lid geworden
14 jan 2007
Berichten
163
Hey, zou iemand dit op kunnen lossen:

Op de site 'swords.ipbfree.net' heb ik een forum gemaakt, maar het probleem is, de table mist z'n rechterborder van 5px. Aan de linkerkant heeft hij het wel (ga naar de site dan weet je wat ik bedoel).

Ik heb al verschillende dingen geprobeerd, maar het ziet er naar uit dat de laatste kolom van de table te breed is ofzo. Ik weet niet hoe ik dit moet aanpassen in de CSS óf met Board Wrappers.

Kan iemand mij de weg wijzen?
 
Kan je die CSS voor deze form ook een zonder data openen, dus met lege velden in HTML, ofline kan ook. Ik hoop dat je dan ziet dat hij de rechter border wel netjes naast de tabel plaatst.
Je moeten altijd al je opmaak in je CSS defineren, en je data in velden een vast aantal caracters geven, en ook letten op je banners enzo. Zodat de boel niet raar op gaat schuiven, als alles in je CSS goed is gedefineerd.
 
Laatst bewerkt:
Ik kom er niet uit. De CSS klopt niet helemaal met de Board Wrappers ofzo. In Mozilla Firefox is het op een of andere manier wel normaal, maar in IE doet hij raar. Als ik de table width aanpas gebeurt er niks (in beide browsers). Ik zend maar even de codes, als je zin hebt om te kijken naar het probleem:

CSS:
Code: 
/* FIX IE6 Scrollbars bug - Leave this in! */
html { overflow-x: auto; }

/* Body entry, change forum page background colour, default font, font size, etc. Leave text-align:center to center board content
 #ipwrapper will set text-align back to left for the forum. Any other tables / divs you use must use text-align:left to re-align
 the content properly. This is a work around to a known Internet Explorer bug */
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; margin-right: -20px;  margin-left: -20px; background-image:url([url]http://img706.imageshack.us/img706/9679/drsbgrunescape2.png);[/url] background-repeat: repeat-y; background-position: center; background-color: #000000; text-align:center }
TABLE, TR, TD { font-family: Arial, Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #000000; }

a:active, a:visited, a:link { text-decoration: underline; color: #000000 }
a:hover { color: #dfc89d; text-decoration:underline }

fieldset.search { padding:6px; line-height:150% }
label      { cursor:pointer; }
form       { display:inline; }
img.attach { border:5px solid #EEF2F7;padding:2px }

.googleroot  { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help    { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate   { text-align:right;font-weight:bold;font-size:11px;color:#000000;background-color:#dfc89d;padding:4px;margin:0px }

.warngood { color:green }
.warnbad  { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg   { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; border:5px solid #dfc89d;background-color: #d0d0d0 }
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #d0d0d0; border:5px solid #dfc89d;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { background-color: 2e2e2e; margin-left: 50px; margin-right: 50px; margin-bottom: -5px; border: 5px solid #4e412d; }
#submenu img { display:none; } 
#submenu a:link, #submenu  a:visited, #submenu a:active { color: #000; }

#userlinks { border:5px solid #4e412d; background-color:#2e2e2e; }

#navstrip  { font-size: 20px; font-weight:bold; padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#ffffff; padding:6px }

/* Form stuff (post / profile / etc) */
.pformstrip { background-color: #d0d0d0; color:#000000;font-weight:bold;padding:7px;margin-top:1px }
.pformleft  { background-color: #696969; padding:6px; margin-top:1px;width:25%; border-top:5px solid #C2CFDF; border-right:5px solid #C2CFDF; }
.pformleftw { background-color: #ffffff; padding:6px; margin-top:1px;width:40%; border-top:5px solid #C2CFDF; border-right:5px solid #C2CFDF; }
.pformright { background-color: #ffffff; padding:6px; margin-top:1px;border-top:5px solid #C2CFDF; }

/* Topic View elements */
.signature   { font-size: 10px; color: #339; line-height:150% }
.postdetails { font-size: 14px; font-weight: bold }
.postcolor   { font-size: 15px; line-height: 160% }

.normalname { font-size: 10px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { color: #ffffff; font-size: 15px }
.unreg { font-size: 11px; font-weight: bold; color: #d0d0d0 }

.post1 { background-color: #d0d0d0; }
.post2 { background-color: #d0d0d0; }
.postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:0px; background-image: url(style_images/<#IMG_DIR#>/tile_sub.gif) }

/* Common elements */
.row1 { background-color: #ffffff }
.row2 { background-color: #2e2e2e }
.row3 { background-color: #ffffff }
.row4 { background-color: #2e2e2e }

.darkrow1 { background-color: #d0d0d0; color:#2e2e2e; }
.darkrow2 { background-color: #5e5e5e; color:#d0d0d0; }
.darkrow3 { background-color: #ffffff; color:#3A4F6C; font-size: 15px;}

.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }

.titlemedium { font-weight:bold; color:#dfc89d; padding:7px; margin:0px; background-color: # 4a3922 }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #ff0000 }

/* Main table top (dark blue gradient by default) */
.maintitle { vertical-align:middle;font-weight:bold; color:#ffffff; padding:8px 0px 8px 5px; background-color: #5e5e5e }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: underline }

/* tableborders gives the white column / row lines effect */
.plainborder { border:5px solid #4e412d;background-color:#d0d0d0 }
.tableborder { border:5px solid #4e412d;background-color:#000000; padding:0; margin:0 }
.tablefill   { border:5px solid #4e412d;background-color:#d0d0d0;padding:6px;  }
.tablepad    { background-color:#ffffff;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini    { float:left;line-height:1.5em;width:35% }
.pagelinks   { float:left;line-height:1.2em;width:35% }

.desc { font-size:12px; color:#dfc89d }
.edit { font-size: 9px }


.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { white-space:normal; font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { white-space:normal; font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox  { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF }

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue   { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

Board Wrappers: (Header & Body)
Code: 
<body text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="3" topmargin="3" marginwidth="3" marginheight="0">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#fff" height="377" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#000000">
<tr>
<td width="90%" height="100%"  bordercolor="#000000" bgcolor="#d2ad67" bordercolorlight="#000000" bordercolordark="#000000">

<link rel="shortcut icon" href="http://209.85.12.234/11296/184/pip/favicon.gif">
<body bgcolor="#ff0000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#ff0000" vlink="#ff0000">

<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>

Als ik bij de onderste 'table width' aanpas (regel 2), dan gebeurt er niks. Behalve als ik 0 doe, dan flipt hij en krijg ik de forumtables hemelsbreed.
 
Laatst bewerkt:
Toevoeging

Ik heb zojuist de CSS door een validator gehaald: dit is de nette versie van de CSS:

Code: 
BODY { 
font-family : Verdana, Tahoma, Arial, sans-serif; 
font-size : 10px; 
background-image : url(http://img706.imageshack.us/img706/9679/drsbgrunescape2.png); 
background-repeat : repeat-y; 
background-position : center; 
background-color : #000000; 
text-align : center; 
} 
TABLE, TR, TD { 
font-family : Arial, Verdana, Tahoma, Arial, sans-serif; 
font-size : 10px; 
color : #000000; 
} 
a:active, a:visited, a:link { 
text-decoration : underline; 
color : #000000; 
} 
a:hover { 
color : #dfc89d; 
text-decoration : underline; 
} 
fieldset.search { 
padding : 6px; 
line-height : 150%; 
} 
label { 
cursor : pointer; 
} 
form { 
display : inline; 
} 
img.attach { 
border : 5px solid #eef2f7; 
padding : 2px; 
} 
.googleroot { 
padding : 6px; 
line-height : 130%; 
} 
.googlechild { 
padding : 6px; 
margin-left : 30px; 
line-height : 130%; 
} 
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { 
font-size : 11px; 
color : #3a4f6c; 
} 
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { 
font-size : 14px; 
font-weight : bold; 
color : #00d; 
} 
.googlepagelinks { 
font-size : 1.1em; 
letter-spacing : 1px; 
} 
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { 
font-size : 10px; 
color : #434951; 
} 
li.helprow { 
padding : 0; 
margin : 0 0 10px 0; 
} 
ul#help { 
padding : 0 0 0 15px; 
} 
option.cat { 
font-weight : bold; 
} 
option.sub { 
font-weight : bold; 
color : #555; 
} 
.caldate { 
text-align : right; 
font-weight : bold; 
font-size : 11px; 
color : #000000; 
background-color : #dfc89d; 
padding : 4px; 
margin : 0; 
} 
.warngood { 
color : green; 
} 
.warnbad { 
color : red; 
} 
#padandcenter { 
margin-left : auto; 
margin-right : auto; 
text-align : center; 
padding : 14px 0 14px 0; 
} 
#profilename { 
font-size : 28px; 
font-weight : bold; 
} 
#calendarname { 
font-size : 22px; 
font-weight : bold; 
} 
#photowrap { 
padding : 6px; 
} 
#phototitle { 
font-size : 24px; 
border-bottom : 1px solid black; 
} 
#photoimg { 
text-align : center; 
margin-top : 15px; 
} 
#ucpmenu { 
line-height : 150%; 
width : 22%; 
border : 5px solid #dfc89d; 
background-color : #d0d0d0; 
} 
#ucpmenu p { 
padding : 2px 5px 6px 9px; 
margin : 0; 
} 
#ucpcontent { 
background-color : #d0d0d0; 
border : 5px solid #dfc89d; 
line-height : 150%; 
width : auto; 
} 
#ucpcontent p { 
padding : 10px; 
margin : 0; 
} 
#ipsbanner { 
position : absolute; 
top : 1px; 
right : 5%; 
} 
#logostrip { 
margin : 50px 50px 50px 50px;
border : 5px solid #4e412d; 
} 
#submenu img { 
display : none; 
} 
#submenu a:link, #submenu a:visited, #submenu a:active { 
color : #000; 
} 
#userlinks { 
border : 5px solid #4e412d; 
background-color : #2e2e2e; 
} 
#navstrip { 
font-size : 20px; 
font-weight : bold; 
padding : 6px 0 6px 0; 
} 
.activeuserstrip { 
background-color : #ffffff; 
padding : 6px; 
} 
.pformstrip { 
background-color : #d0d0d0; 
color : #000000; 
font-weight : bold; 
padding : 7px; 
margin-top : 1px; 
} 
.pformleft { 
background-color : #696969; 
padding : 6px; 
margin-top : 1px; 
width : 25%; 
border-top : 5px solid #c2cfdf; 
border-right : 5px solid #c2cfdf; 
} 
.pformleftw { 
background-color : #ffffff; 
padding : 6px; 
margin-top : 1px; 
width : 40%; 
border-top : 5px solid #c2cfdf; 
border-right : 5px solid #c2cfdf; 
} 
.pformright { 
background-color : #ffffff; 
padding : 6px; 
margin-top : 1px; 
border-top : 5px solid #c2cfdf; 
} 
.signature { 
font-size : 10px; 
color : #339; 
line-height : 150%; 
} 
.postdetails { 
font-size : 14px; 
font-weight : bold; 
} 
.postcolor { 
font-size : 15px; 
line-height : 160%; 
} 
.normalname { 
font-size : 10px; 
font-weight : bold; 
color : #003; 
} 
.normalname a:link, .normalname a:visited, .normalname a:active { 
color : #ffffff; 
font-size : 15px; 
} 
.unreg { 
font-size : 11px; 
font-weight : bold; 
color : #d0d0d0; 
} 
.post1 { 
background-color : #d0d0d0; 
} 
.post2 { 
background-color : #d0d0d0; 
} 
.postlinksbar { 
background-color : #d1dceb; 
padding : 7px; 
margin-top : 1px; 
font-size : 0; 
background-image : url(style_images/<#IMG_DIR#>/tile_sub.gif); 
} 
.row1 { 
background-color : #ffffff; 
} 
.row2 { 
background-color : #2e2e2e; 
} 
.row3 { 
background-color : #ffffff; 
} 
.row4 { 
background-color : #2e2e2e; 
} 
.darkrow1 { 
background-color : #d0d0d0; 
color : #2e2e2e; 
} 
.darkrow2 { 
background-color : #5e5e5e; 
color : #d0d0d0; 
} 
.darkrow3 { 
background-color : #ffffff; 
color : #3a4f6c; 
font-size : 15px; 
} 
.hlight { 
background-color : #dfe6ef; 
} 
.dlight { 
background-color : #eef2f7; 
} 
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { 
text-decoration : underline; 
color : #ff0000; 
} 
.maintitle { 
vertical-align : middle; 
font-weight : bold; 
color : #ffffff; 
padding : 8px 0 8px 5px; 
background-color : #5e5e5e; 
} 
.maintitle a:link, .maintitle a:visited, .maintitle a:active { 
text-decoration : none; 
color : #fff; 
} 
.maintitle a:hover { 
text-decoration : underline; 
} 
.plainborder { 
border : 5px solid #4e412d; 
background-color : #d0d0d0; 
} 
.tableborder { 
border : 5px solid #4e412d; 
background-color : #000000; 
padding : 0; 
margin : 0; 
} 
.tablefill { 
border : 5px solid #4e412d; 
background-color : #d0d0d0; 
padding : 6px; 
} 
.tablepad { 
background-color : #ffffff; 
padding : 6px; 
} 
.tablebasic { 
width : 100%; 
padding : 0 0 0 0; 
margin : 0; 
border : 0; 
} 
.wrapmini { 
float : left; 
line-height : 1.5em; 
width : 35%; 
} 
.pagelinks { 
float : left; 
line-height : 1.2em; 
width : 35%; 
} 
.desc { 
font-size : 12px; 
color : #dfc89d; 
} 
.edit { 
font-size : 9px; 
} 
.searchlite { 
font-weight : bold; 
color : #f00; 
background-color : #ff0; 
} 
#QUOTE { 
white-space : normal; 
font-family : Verdana, Arial; 
font-size : 11px; 
color : #465584; 
background-color : #fafcfe; 
border : 1px solid #000; 
padding-top : 2px; 
padding-right : 2px; 
padding-bottom : 2px; 
padding-left : 2px; 
} 
#CODE { 
white-space : normal; 
font-family : Courier, Courier New, Verdana, Arial; 
font-size : 11px; 
color : #465584; 
background-color : #fafcfe; 
border : 1px solid #000; 
padding-top : 2px; 
padding-right : 2px; 
padding-bottom : 2px; 
padding-left : 2px; 
} 
.copyright { 
font-family : Verdana, Tahoma, Arial, Sans-Serif; 
font-size : 9px; 
line-height : 12px; 
} 
.codebuttons { 
font-size : 10px; 
font-family : verdana, helvetica, sans-serif; 
vertical-align : middle; 
} 
.forminput, .textinput, .radiobutton, .checkbox { 
font-size : 11px; 
font-family : verdana, helvetica, sans-serif; 
vertical-align : middle; 
} 
.thin { 
padding : 6px 0 6px 0; 
line-height : 140%; 
margin : 2px 0 2px 0; 
border-top : 1px solid #fff; 
border-bottom : 1px solid #fff; 
} 
.purple { 
color : purple; 
font-weight : bold; 
} 
.red { 
color : red; 
font-weight : bold; 
} 
.green { 
color : green; 
font-weight : bold; 
} 
.blue { 
color : blue; 
font-weight : bold; 
} 
.orange { 
color : #f90; 
font-weight : bold; 
}
 
Hoi,
Het is handig als je even de browser erbij vermeldt. Ik had er al eerder naar gekeken in Firefox en daar heb je wel 'n border, dus ik dacht dat 't was opgelost.

Je doctype is niet compleet. Dit hoort te zijn:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
Dit kan in sommige gevallen zorgen voor 'n verschillende weergave in verschillende browsers.

Er zit 'n hele serie fouten in je html, waaronder twee keer 'n <body>. Die fouten moeten er eerst uit, want die kunnen de wildste problemen veroorzaken. Je kunt de html hier controleren op fouten:
http://validator.w3.org/
(De validator controleert niet op de url bij het doctype, omdat je die eventueel door 'n eigen url kunt vervangen, dus die fout zul je daar niet zien. Uiterst onhandig, zou op z'n minst 'n waarschuwing moeten zijn.)
Er is ook 'n hele serie eigenschappen die je gebruikt die niet in alle browsers werken. Ook die worden keurig gemeld door de validator.
Als je geluk hebt is daarmee het probleem opgelost.
 
Ey ik ben ondertussen al een stuk verder. De bug bestaat nog helaas, maar de dubbele dingen zijn eruit.

Alleen 1 vraag; waar moet ik de doctype plaatsen?

dit bedoel ik:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Kan ik dit in het tabelletje 'Additional Metatags' zetten? Of is dit geen metatag?
 
Nee, o gruwel :shocked:
Het doctype is de allereerste regel van je html. Helemaal bovenaan, er mag zelfs geen spatie of lege regel voor staan.
Als ik in je broncode kijk, staat er al 'n doctype. Maar de tweede helft mist, en dat geeft soms problemen. Je kunt het onvolledige gewoon door het volledige vervangen.
Het doctype vertelt de browser wat voor soort html het is, en of het op de nieuwe standaardmanier moet worden weergegeven (die in alle browsers goed werkt), of op de oude manier (waarbij elke browser doet waar-ie zin in heeft). Wat simpel voorgesteld, maar zoiets.
 
Laatst bewerkt:
Thx mensen, jullie zijn übercool :)

Ik heb de doctype gepasted bij 'Document Type Overwrite'. Bugs nu compleet verholpen + alles netjes gecodeerd (mbv validator).

Bedankt! Vraag opgelost.:thumb:
 
Hartstikke mooi! übercool, dat klopt, ik ben snipverkouden en zo en heb 't stervenskoud :D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan