Can I stop this from happening?

@ObdormioAug 21.2004

I’m not very experienced with HTML or writing webpages, but I’ve been making a page for a RPG club. While I made it I tested it in Opera and Firefox, and it looked perfecty fine in both of them. But then, when I opened it in explorer, it looked horrible, all the different cells had moved around, instead of stying put. As I said, I’m not very experienced with HTML, and I don’t know what’s wrong.

My page can be seen ~~[URL=http://home.no/obdormio/index2.html]~~here[/URL]. The links don’t work, it’s just the front page. All the pages are built the same way, just with different text and pictures.

Can anybody tell me if this can be fixed? I’ve searched around, looking for an answer, and it seems most people reccomend using css instead of tables, which I tried, but didn’t manage to wrap my head around, and my attempt ended up looking a lot worse than this, so I’m just trying to find out if this is salvagable.

Thanks for your help.

to post a comment

HTML

20 Comments(s) _↴

@PhillMcAug 21.2004 — #Your tabular layout is to blame ?. As you can see, tables react differently in many browsers. They are also not meant for layout purposes but for Tabular (2 Dimensional) data. I do not see a way to rememdy this, as I do not work with tables, other than a CSS/DIV layout conversion. CSS is easy. I'll actually dare to call it [I]child's play[/I]. It will make you site much more accessible as CSS is accepted in almost any browser; tables are not. ?

Head to [URL=http://www.w3schools.com]W3 Schools[/URL] for complete CSS tutorials.

@hypnoseekerAug 21.2004 — #Try this:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>Oblivion  Rollespillklubb</title>

</head>

<body background="images/bgoblivion.gif">

<div align="center">

<center>

<table border="0" width="700" cellspacing="0" cellpadding="0">

<tr>

<td width="100%">

<table border="0" width="700" style="font-family: Arial; font-size: 10pt" cellspacing="0" cellpadding="10" height="32">

<tr>

<td width="150" valign="top" align="center" height="149"><img border="0" src="images/upperleftlogo.gif" width="144" height="144"></td>

<td width="550" valign="top" align="center" height="149"><FONT face=Arial size=+4><b>Oblivion <br>Rollespillklubb</b></FONT></td>

</tr>

 <tr>
   <td width="150" height="1" valign="top" align="left">
   Bilder<br>
   Søknadskjema<br>
   Hva skjer?<br>
   Bøker<br>
   Rollespill<br>
   Linker<br>
   E-post
   </td>
 
   <td width="550" rowspan="2" valign="top" align="left" height="1">Hei!<br>
   Oblivion Rollespillklubb er en rollespillklubb for ungdommer som holder til i Ålesundsområdet. 
   Vi spiller for det meste Fabula (et norsk rollespill), men nå skal vi begynne med Ars Magica, 
   Dungeons and Dragons, Wheel of Time RP og Ringenes Herre-miniatyrer.
   <p>
   Denne siden inneholder innformasjon om klubben, datoer, steder osv. for de neste rollespillkveldene. 
   Oblivion Rollespillklubb er helt gratis og du trenger ingen tidligere erfaring med rollespill 
   for å bli medlem. Et medlemskap har ingen forpliktelser, men du kan bli spurt om å være vert 
   for neste rp-kveld, og har da lov til å si ja eller nei.<br>
   Blant klubbens få medlemmer finnes hekta Fantasy-fans og om du lurer på noe i den sammenheng, 
   kan vi helt sikkert hjelpe. Som sagt, du trenger ikke å ha spilt rollespill før.
   </p>
   <p>Dersom du vil være med en kveld, så er det helt gratis, ingen forpliktelser og ingen sure miner. 
   Vi vil gjerne ha deg med! Klubben er åpen for alle, så sant du bor i Ålesundsområdet. Vi er som 
   regel fire-fem stykker som holder til hos en av lederne. Om du har noen spørsmål, ta kontakt 
   med klubbens leder, Eyvind Volle på [email][email protected][/email], eller på 
   mobil (99334650) eller hjemmetelefon (70191003).
   </p>
   <p>Velkommen til rollespillkveld!</p>
   </td>
   </tr>
 
   <tr>
   <td width="150" valign="bottom" align="left" height="68"><img border="0" src="images/valid-html401.png" width="88" height="31"></td>
   </tr>
   </table>
  </td>

</tr>

</table>

</center>

</div>

</body>

</html>

Select everything between <html> and </html>

Copy this

Paste it into notepad

Name it [B]Oblivion Rollespillklubb.htm[/B]

Make sure that your graphics are in a folder called [B]images[/B] below this document.

If you like I could show you step-by-step how this code was created.

Just let me know by posting here.

@PhillMcAug 21.2004 — #I wouldn't do that. That document was written in FrontPage, which will probably only work as intended in Internet Explorer. That, and it is also written in tables. You would be much better off heading to W3Schools and learning CSS.?

@hypnoseekerAug 21.2004 — #Hi PhillMc,

Our friend will probably do just that... in his own time. It seemed to me that he wanted to have something up and running right now.

The fact that the code was written in FrontPage does not imply in any manner whatsoever that it will only work in IE.

On the contrary, the way I wrote this code was to specifically work in any browser that is currently in use.

It is simple and follows established basic rules of html. I could have written it in the notepad. The result would have been the same.

For a beginner, tables are easier to grasp. That is my observation, and so long as the result is efficient and works in every browser does it really matter which method was used?

@UncommonerAug 21.2004 — #what people use other brousers besides IE? why? ?

@rhsundergroundAug 21.2004 — #i use opera, which is teh roxor ?. most people that don't use IE either use netscape or one of the mozilla products. there are others available, but not commonly used.

@PhillMcAug 21.2004 — #Fact is, tables do not work in all browsers. CSS works in more browsers than tables do.

It would take less than a day to learn the basics of CSS. It's simple. More simple than stitching together a table, and then trying to get it to work the same way in every browser.

I have 9 browsers installed: IE, FireFox, NS, Opera, Avant, Amaya, Safari (on a VM), IE for Mac (on a VM) and Konqueror (on a VM). I use them all for testing but only use FireFox for surfing. Fact is, Internet Explorer is not a Standards Compliant Browser.

Why do something the wrong way the first time when it will be harder to fix it later? Tables are not accessible, as they were not made for layout.

Please note my intention is not to offend. ?

@hypnoseekerAug 21.2004 — #Oh, I know of one or two people who just LOVE Microsoft and Billy Gates so much that they would rather bite their toe off than to use IE for surfing the internet.

As webmasters, we must be aware of the fact that around 20% of users do not want IE at all. And 20% of the millions of viewers is a lot of people that don't see your site the way you wrote it.

It is a fine judgement call a lot of the time.

@UncommonerAug 21.2004 — #yea! what he sayed. PhillMc is right CSS is really REALLY easy. though i have yet to find a soultion to my sight issues with it i think there may be one there....

though i have found a TON of ways to make my life alot easier

@hypnoseekerAug 21.2004 — #G'day Phil,

My intention is not to offend either... so we won't ?

I do agree with you that pages containing poorly written tables are nothing short of disastrous. We've all seen such websites at one time or another.

It is also true that tables were not meant for layout. But since they can be then why not? Especially if one was to follow religiously a coding method that adhered to strict "rules of engagement" (for want of a better phrase)

Tables have been around for much longer than CSS. Therefore every browser recognizes them quite well.

What the browsers do not recognize is badly written code with nesting logic out of synch. But let's not forget... the tables are not to blame... bad coding is.

So let's accept that there exists a "correct" way of using tables. Let's also add Obdormio's dilemma...

"and it seems most people reccomend using css instead of tables, which I tried, but didn't manage to wrap my head around, and my attempt ended up looking a lot worse than this, so I'm just trying to find out if this is salvagable."

What I provided is exactly what Obdormio was looking for in this forum - today... right now... Suggestions that he ought to learn CSS are good but sadly they do not provide an immediate solution to his problem. And he is here looking for that help.

Another point to ponder on. Many find CSS easy to follow and understand... they are the fortunate ones because there are a heck of a lot of people out there that can not follow CSS at all... or at least have significant difficulties to overcome.

Come on, people. If you write sound and logically well designed web pages, your method of achieving this objective should not be cast in stone.

All of us are different and we do things in different ways... as long as we don't stuff things up and make an ass of ourselves then it should not matter too much how it was done. ?

@JupacAug 21.2004 — #How do you use FrontPage???

I just think that notpad is easier.?

What the browsers do not recognize is badly written code with nesting logic out of synch. But let's not forget... the tables are not to blame... bad coding is.[/QUOTE]

Make Sure Its Valid

MSIV ?

@PhillMcAug 21.2004 — #You'll have to forgive me, hypno; I am extremely anal rententive and strictly by the book (comes with the territory of application development). It is true that tables have been around longer than CSS, but almost every browser renders tables it's own way. I see and understand your point of, "if it works, then what's the problem"; my point is, from a programmatic standpoint, there are literally hundreds of ways to do something, but there is only one correct way. I agree that tables can be used for layout, but the fact that it is not their purpose makes it incorrect. CSS was created with the explicit purpose of creating and styling layout; which makes it the right way.

Also, what happenend to getting back on the proverbial horse when one falls off? One will get nowhere fast if he gives up on the first failure. ?

@MstrBobAug 22.2004 — #You'd be better off with something like this:

[SIZE=1]

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Oblivion Rollespillklubb&lt;/title&gt;
 &lt;meta name="description" content="hjemmesiden til en rollespillklubb i Ålesund"&gt;
 &lt;meta name="keywords" content="rollespill, RPG, Fabula, Ars Magica, Warhammer, Ålesund, D&amp;amp;D, Dungeons, Dragons, Wheel of Time, WoT, klubb, rollespillklubb, RPGklubb, fantasy, bøker, bokanmeldelser"&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
 &lt;style type="text/css"&gt;
 body {margin:0;padding:0;background:url('http://home.no/obdormio/bgoblivion.gif') top left repeat;color:#000000;text-align:left;font-size:100%;font-family:Verdana, Arial, sans-serif;}
 #left {position:absolute;top:5px;left:5px;width:150px;}
 #right {position:absolute;top:5px;left:160px;margin-bottom:20px;}
 #nav {list-style-type:none;padding:0;margin:0;}
 a:link, a:hover, a:active {text-decoration:none;color:#3F3F49;}
 a:visited {text-decoration:none;color:#3F3F49;}
 img {border:0;}
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="right"&gt;
 &lt;h1&gt;Oblivion Rollespillklubb&lt;/h1&gt;
 &lt;p&gt;Hei!&lt;/p&gt;
 &lt;p&gt;Oblivion Rollespillklubb er en rollespillklubb for ungdommer som holder til i 
 Ålesundsområdet. Vi spiller for det meste Fabula (et norsk rollespill), men 
 nå skal vi begynne med Ars Magica, Dungeons and Dragons, Wheel of Time RP og 
 Ringenes Herre-miniatyrer.&lt;/p&gt;
 &lt;p&gt;Denne siden inneholder innformasjon om klubben, datoer, 
 steder osv. for de neste rollespillkveldene. Oblivion Rollespillklubb er helt 
 gratis og du trenger ingen tidligere erfaring med rollespill for å bli medlem. 
 Et medlemskap har &lt;strong&gt;ingen&lt;/strong&gt; forpliktelser, men du kan bli spurt om å være vert for
 neste rp-kveld, og har da lov til å si ja eller nei. &lt;/p&gt;
 &lt;p&gt;Blant klubbens få medlemmer finnes hekta Fantasy-fans og om du lurer på noe i den sammenheng, kan vi helt 
 sikkert hjelpe. Som sagt, du trenger ikke å ha spilt rollespill før.&lt;/p&gt;
 &lt;p&gt;Dersom du vil være med en kveld, så er det helt gratis, ingen forpliktelser og 
 ingen sure miner. Vi vil gjerne ha deg med! Klubben er åpen for alle, så sant du 
 bor i Ålesundsområdet. Vi er som regel fire-fem stykker som holder til hos en av 
 lederne. Om du har noen spørsmål, ta kontakt med klubbens leder, Eyvind Volle på 
 &lt;a href="mailto:[email protected]"&gt;
 [email][email protected][/email]&lt;/a&gt;, eller på mobil (99334650) eller 
 hjemmetelefon (70191003).&lt;/p&gt;
 &lt;p&gt;Velkommen til rollespillkveld!&lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="left"&gt;
 &lt;a href="index2.htm"&gt;&lt;img src="http://home.no/obdormio/upperleftlogo.gif"alt="Forside" title="Oblivion Rollespillklubb"&gt;&lt;/a&gt;
 &lt;ul id="nav"&gt;
 &lt;li&gt;&lt;a href="bilder.htm"&gt;Bilder&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="soknad.htm"&gt;Søknadskjema&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="events.htm"&gt;Hva skjer?&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="boeker.htm"&gt;Bøker&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="rspill.htm"&gt;Rollespill&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="linker.htm"&gt;Linker&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="e-post.htm"&gt;E-post&lt;/a&gt;&lt;/li&gt;
 &lt;li style="margin-top:50px;"&gt;&lt;a href="http://validator.w3.org/check?uri=referer"&gt;&lt;img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/SIZE]

@PeOfEoAug 22.2004 — #[i]Originally posted by hypnoseeker [/i]

[B]Oh, I know of one or two people who just LOVE Microsoft and Billy Gates so much that they would rather bite their toe off than to use IE for surfing the internet.

As webmasters, we must be aware of the fact that around 20% of users do not want IE at all. And 20% of the millions of viewers is a lot of people that don't see your site the way you wrote it.

It is a fine judgement call a lot of the time. [/B][/QUOTE] Am I one of them? I use firefox, but I also use w2k3, iis, sql server, asp.net, so on and so fourth.

There really is not correct table for layout. The reason is tables do not linearize in non graphicsl or audio braille browsers, even if it is valid, it can never be semantically correct. I have made tables linearize, but you have to go way out of your way to do it. It involves complete css styleing for the table. You might as well just use the semantic markup if you were going to do all of that.

@hypnoseekerAug 22.2004 — #G'day Phill,

You know, this is the second time I have been pulled up for flying in the face of conventional wisdom this week.

On another forum there was a lass who had a problem with not knowing how to make outlook start automatically with windows. She had recently migrated to windowsXP and found the new interface confusing and unfamiliar.

One person was adamant that the best course for her was to learn and accept the new interface wheras I suggested that she change the look of windowsXP to the more familiar look of windows98.

A mild gentelmanly debate developed.

This is the second time I am putting forward views that not everyone agrees with. All I can say is the same as I said at the other place, I favour using the path of least resistance to achieve an objective.

I am not unlike Obdormio. I, too, have difficulties in grasping the finer points of CSS.

Frankly, a lot of CSS is simply too confusing to me and not very intuitive at all. Like our friend, I tried my hand at developing web pages using CSS alone and all I have for my efforts is a big fat zero.

Now, what do people like me do to solve this problem? Do we just slink away into some deep cavern never to be seen again? Or do we deal with all situations as best as we can... even though it may fall outside of orthodox thinking. Is there really no room for us?

You might want to point out and say: if that is my view, I ought to keep it to myself and not give advise to others because it is "incorrect".

I'd find no problem with that observation because I do not have a habit of frivolously telling people that this is what they should do all the time.

But today's situation is unique. Someone else who had a problem where conventional wisdom did not suffice asked for assistance. I gave it to them in a manner I believed they could understand.

If conventional medicine can not provide a cure then what's wrong with using alternative medicine so long as it it works?

@MstrBobAug 22.2004 — #[i]Originally posted by hypnoseeker [/i]

[B]If conventional medicine can not provide a cure then what's wrong with using alternative medicine so long as it it works? [/B][/QUOTE]

First off, who said that there was no proper, CSS solution? No one. That layout is very basic. I've personally yet to see a layout which cannot be done with CSS. However, I've seen layouts that can't be done withOUT CSS.

And the problem with you "alternative medicine" is that it doesn't work. Look I'm not affending you, but plain and simple, CSS is the best way to do all styling. It's its purpose, it's supported by all modern graphical browsers, and allows a site to degrade nicely to an all text-format for screen readers, non-graphical browsers, and for much older browsers (Like IE 3.0 *shudders*)

Now yes, anyone can use tables to trick a browser into displaying things a certain way. Because that's what you're doing, tricking the browser. CSS is as simple as it gets, and a lot easier to design with than tables. It looks intimidating, but it's not if you sit down and learn it. There's a lot of myths going around about there not being full browser support. There isn't. IE lags far behind with standards support. But table based layouts can easily be converted into cross-browser CSS layouts. It's the newer, more intricate ones that IE can't handle. But patience, the tide is turning...

@hypnoseekerAug 22.2004 — #G'day PeOfEo,

The reason is tables do not linearize in non graphicsl or audio braille browsers[/QUOTE]

Now THAT is a mighty argument in favour of CSS and people like myself should make an extra effort to come to grips with this technology.

Speaking for myself, that is exactly what I am doing right now. I do not find it easy by any means... so what? I know that what's gotta be done has to be done ?

@ObdormioauthorAug 22.2004 — #Thank you for all your replies, and for your help. The page now functions, and I ham happy.

I am very interested in learning css, and I'm looking at the link PhillMc posted. But this particular page is not one I intend to spend a lot of time on, at least not at this time.

Thank you for both help with fixing the tables and with tips on learning css.

@rhsundergroundAug 22.2004 — #no problem ?

@PeOfEoAug 23.2004 — #[i]Originally posted by hypnoseeker [/i]

[B]G'day PeOfEo,

Now THAT is a mighty argument in favour of CSS and people like myself should make an extra effort to come to grips with this technology.

Speaking for myself, that is exactly what I am doing right now. I do not find it easy by any means... so what? I know that what's gotta be done has to be done ? [/B][/QUOTE] its very easy once you get the hang of the syntax. I find it easier to use then tables. You should download lynx.

http://browsers.evolt.org/?lynx/

I have 2.81 I think. If 2.81 doesnt work, try 3.8, one works one doesnt. Lynx can give you a good perspective on how non graphical browsers handle stuff. If you site works on lynx, its an ok bet that it works on other platforms.

Also in #HTML _↴

Home page doesn't work in Safari...HTML(marquee) in Delphi forums Application activation from browser (like E-mule href="e2dk://..." way)

Success!

Help @Obdormio spread the word by sharing this article on Twitter...

Tweet This

Can I stop this from happening?

20 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Can I stop this from happening?

20 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #HTML _↴