[Tables in HTML] IE doet raar en Opera/Mozilla/NS niet - Softwareontwikkeling

vrijdag 27 september 2002 15:21

Acties:

Topicstarter

Ik ben bezig met een site te maken voor een bepaalde opdracht. Ik had hiervoor een psd gemaakt in Photoshop, so far so good. Ook het omzetten van het PSDtje naar tabellen enzo geconverteerd en dat ging ook goed. Alles is geconverteerd en alles staat in HTML. Maar nu komt mijn probleem, ik heb alles in kladblok gemaakt en net ff nagekeken in Dreamweaver, ff alles netjes gezet. Previewen in Opera ging allemaal prima:

Afbeeldingslocatie: http://home.planet.nl/~venro108/GoT/opera.jpg

Afbeeldingslocatie: http://home.planet.nl/~venro108/GoT/opera.jpg

Ik denk ook ff kijken in IE....

Maar dat zag er wat minder best uit:

Afbeeldingslocatie: http://home.planet.nl/~venro108/GoT/ie.jpg

Hoe kan dit? De source kan je verkrijgen door deze page ff te bekijken, volgens mij zit er nix fout aan of mis ik iets?

http://home.planet.nl/~venro108/InI/Apollo/try.htm

Thnx voor jullie commentaar vast

vrijdag 27 september 2002 15:26

Acties:

André

Analytics dude

Volgens mij gaat er iets fout met je row en colspan, je kunt het simpel zien door even je border van de tabel op 1 te zetten.

vrijdag 27 september 2002 15:26

Acties:

Hangloozz

{ @$%&# }

zowiezo is het niet slim om te c0den in notepad, daarnaast is het ook niet handig om te ontwikkelen op Opera; IE is tenslotte de grootste doelgroep.

Ik zie:
- een document zonder DTD
- ongequote value's
- een TR zonder eind-tag
- een TD zonder eind-tag

www.jurgroessen.nl

vrijdag 27 september 2002 15:30

Acties:

Willem

Probeer daarnaast je cellen uit te lijnen, met < td valign="top" >
of in CSS: < td style="vertical-align:top;" >

Motor (of auto) onderhoud bijhouden

vrijdag 27 september 2002 15:31

Acties:

Verwijderd

trek hem anders eens door een validator. http://validator.w3.org is een vrij goede

. Als je site daar doorheen komt dan zal IE hem over het algemeen ook wel begrijpen, met her en der uitzondering, kijk ook eens op http://www.w3schools.com, daar staat veel info over welke tags door welke browser worden ondersteund.

vrijdag 27 september 2002 15:38

Acties:

J0YR1D3R

Topicstarter

Ik gebruik ten eerste notepad omdat dat moet voor de opdracht

Maarja, ik gebruik zelf Opera als std browser, vandaar. In IE kijk ik natuurlijk ook, dat is logisch, 90% gebruikt IE en daar moet die het dus altijd doen. Verder is dit een van me eerste HTML frutsels enzo, never worked with CSS, ga me er wel in verdiepen. Ik zal alles nog een keer goed doorkijken, ik dacht het ergste al te hebben gehad

Nog 1 vraagje, waarom doet hij het in Opera wel goed dan? Corrigeert die eventuele fouten?

_{ben er vnvd en lees de reacties dan wel}

vrijdag 27 september 2002 15:39

Acties:

InZane

Kwestie van (hele) slordige code. Kijk eens goed naar je table zou ik zeggen.. als je het dan nog niet ziet

vrijdag 27 september 2002 15:46

Acties:

syllaz

Je moet alle tables/cellen op pixelniveau dichtzetten.
Dus de breedte/hoogte van je buttons/plaatjes in je <td></td> tags zetten.
Anders krijg je em natuurlijk nooit sluitend. Vooral NS4 is hier heel strikt in

vrijdag 27 september 2002 16:10

Acties:

Verwijderd

leer CSS.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0px;
    height: 100%;
}
img {
    display: inline;

}
.menu {
    left: 0px;
}
.main {
    left: 150;
    top: 101;
    position: absolute;
    
}
-->
</style>
</head>

<body>
[img]"try_files/top.jpg"[/img]<br>
[img]"try_files/home.jpg"[/img]<br>
[img]"try_files/gear.jpg"[/img]<br>
[img]"try_files/locations.jpg"[/img]<br>
[img]"try_files/links.jpg"[/img]<br>
[img]"try_files/contact.jpg"[/img]<br>
[img]"try_files/logo.jpg"[/img]<br>
[img]"try_files/content.jpg"[/img]  
</body>
</html>

zondag 6 oktober 2002 22:04

Acties:

J0YR1D3R

Topicstarter

ff schoppie: ik heb het volgende nu:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Welkom op de Apollo Adventures Website!</TITLE>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=772 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR> <TD> [img]"images/top.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/navbar/home.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/navbar/gear.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/navbar/locations.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/navbar/links.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/navbar/contact.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/logo.jpg"[/img]</TD> </TR>
  <TR> <TD> [img]"images/content1.jpg"[/img]</TD> </TR>
</TABLE>
</BODY>
</HTML>

zie ook http://home.planet.nl/~venro108/InI/Apollo/try.htm

Ik krijg het maar niet voor elkaar zonder css om die tabellen goed te krijgen. Ik heb zelf echt de hele tijd zitten klooien maar ik kom er niet uit en kan geen goede handleiding vinden. De bedoeling hoe het moet kun je vinden @ http://home.planet.nl/~venro108/InI/Apollo/home.htm

Zou iemand dat ff snel kunnen kijken?

Thnx!

zondag 6 oktober 2002 22:33

Acties:

Mafioso

Hier kun je precies zien wat wel en niet mag met HTML : http://www.w3.org/TR/html4/
Dan is het opzich makkelijk als je dat weet, je zult nl de rest aan moeten vullen met CSS ....
info over CSS : http://www.w3schools.com/css/

zondag 6 oktober 2002 22:41

Acties:

Hangloozz

{ @$%&# }

nou vooruit.
Wat je in dit geval nodig had waren een rospan en een colspan (row overspanning en column overspanning).
Ik moet zeggen dat tabellen behoren tot de lastigere html onderdelen dus veel geklooi hoort erbij

[edit:] Mafioso: een beginnende html'er stuur je niet naar W3C, daar paniekt ie allen maar van

hier de code zoals je hem nodig hebt:

code:

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Welkom op de Apollo Adventures Website!</TITLE>
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <TABLE width="772" border="0" cellpadding="0" cellspacing="0">
        <TR>
            <TD colspan="2">[img]"images/top.jpg"[/img]</TD>
        </TR>
        <TR>
            <TD>[img]"images/navbar/home.jpg"[/img]</TD>
            <TD rowspan="6">[img]"images/content1.jpg"[/img]</TD>
        </TR>
        <TR>
            <TD>[img]"images/navbar/gear.jpg"[/img]</TD>
        </TR>
        <TR>
            <TD>[img]"images/navbar/locations.jpg"[/img]</TD>
        </TR>
        <TR>
            <TD>[img]"images/navbar/links.jpg"[/img]</TD>
        </TR>
        <TR>
            <TD>[img]"images/navbar/contact.jpg"[/img]</TD>
        </TR>
        <TR>
            <TD>[img]"images/logo.jpg"[/img]</TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

letop: als je de </td>'s op een nieuwe regel zet krijg je gaps tussen je images, dat kun je voorkomen door die </td>'s weer direct achter de <img src....> te zetten of door er een break achter te zetten:

code:

1 2	<td>[img]"".....><br> </td[/img]

zie maar

www.jurgroessen.nl

zondag 6 oktober 2002 22:41

Acties:

r0bert

edit:
Was net iets te laat zo te merken

maar alsnog:

Waarom is http://home.planet.nl/~venro108/InI/Apollo/home.htm niet goed ? CSS (level 1) werkt volgens mij wel gewoon in alle browsertjes.. tenminste wel wat jij tot nu toe gebruikt

En als je perse met een table wilt werken, maak dan een breedte van 2 kolommen en gebruik rowspan voor je 'content'-cel.. (en voor de titel evt een colspan..)

zondag 6 oktober 2002 22:46

Acties:

J0YR1D3R

Topicstarter

r0bert schreef op 06 oktober 2002 @ 22:41:
edit:
Was net iets te laat zo te merken maar alsnog:

Waarom is http://home.planet.nl/~venro108/InI/Apollo/home.htm niet goed ? CSS (level 1) werkt volgens mij wel gewoon in alle browsertjes.. tenminste wel wat jij tot nu toe gebruikt

En als je perse met een table wilt werken, maak dan een breedte van 2 kolommen en gebruik rowspan voor je 'content'-cel.. (en voor de titel evt een colspan..)

Moet met Tables volgens de opdracht, css was wel goed, maar hij moet ook met tables vandaar. Ik had dus ook een colspan van 2 eerst en een rowspan van 6, dus dat klopt wel, ik ga nu kijken wat ik nou fout doe. Tabellen zijn niet echt mijn favo onderdeel dus

edit: w3c is wel een goeie leerschool hoor, ik ga d'r is nog wat lezen denk ik

zondag 6 oktober 2002 23:09

Acties:

Verwijderd

J0YR1D3R schreef op 06 oktober 2002 @ 22:46:

Moet met Tables volgens de opdracht ...

Tabellen zijn hier gewoon echt niet nodig, en zeker niet voor bedoeld. Dit is volgens mij een van de beste voorbeelden van fout HTML gebruik.

Ik vraag me ook af wat het nut is van shadow3333's stylesheet rule die alle afbeelding de property display: inline; meegeeft, aangezien images inline level elementen zijn, en dat juist dat ervoor zorgt dat die witruimte ontstaat. display: block; zou het oplossen.

Dit is weer een goed moment om even met m'n voorbeeldjes te spammen. Kijke eens naar de volgende pagina's:
Pagina met stylesheet en script Pagina zonder stylesheet of script

Dat verschil in het menu kun je onmogelijk voor elkaar krijgen als je een deel van de feitelijke layout vastlegt in je HTML source. Het truuckje dat ik daar gebruikte is op de pagina van de topicstarter ook zeer goed toe te passen.

Zoals ik al zei wordt die witruimte gecreëerd door witruimte die grenst aan een inline level element. Witruimte rond block-level elementen wordt genegeerd. Je kunt het dus oplossen door die witruimte weg te halen, en dus eigenlijk <td><img></td> aan elkaar op één regel te zetten, òf door van die images block-level elementen te maken, met die CSS regel display: block;

zondag 6 oktober 2002 23:09

Acties:

Hangloozz

{ @$%&# }

W3C bepaalt de webstandaard maar is IMO niet echt een goede (beginners)leerschool, meer een naslagwerk.
w3schools is daarentegen wel een aardig uitgangspunt, maar voor zover ik weet hebben die op bedrijfstechnisch niets met elkaar te maken.

www.jurgroessen.nl