Javascript table issue

lgbtsource

07-26-2009, 01:06 AM

I'm using Javascript for my table, however when I put a table underneath the first one it makes go up into the logo area of the page. You can see what I mean here (http://lgbtsource.com/buddhism.html) on my site. I used the html <br> code to solve the issue, but it messes up in certain browsers. So, I'm looking for a way that doesn't involve the <br> code, but not sure what to use in it's place.

The code for both javascript tables is:

<script language="JavaScript" type="text/javascript">

</script>

The code for the full page is:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>LGBTSource - Your Source For LGBT Orgzanizations & Services</title>

<meta name="keywords" content="gay, bisexual, gay tv, gay movies, gay men, gay celebrities, homosexuality, homosexual, gay marriage, dating, dating sites, lgbt directory, gay directory, lesbian, trans, transgender, queer, intersex, ftm, mtf, genderqueer, gender****, lgbt resources, bisexual, bi, questioning, lgbt christian, tranny, gay actors, gay resources, ***, religion, gay religion " />
<meta name="description" content="LGBTSource is a free LGBT directory listing service that is updated daily." />

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<style>

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #837669;
}

h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #649632;
}

h1 { font-size: 44px; }

h2 { font-size: 26px; }

h3 { }

p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}

ul, ol { }

blockquote { }

a { color: #649632; }

a:hover { text-decoration: none; }

a img {
border: none;
}

img.left {
float: left;
margin: 7px 30px 0 0;
}

img.right {
float: right;
margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
float: left;
line-height: normal;
}

.list1 li img {
margin: 0 30px 30px 0;
}

.list1 li.alt img {
margin-right: 0;
}

/* Header */

#header-wrapper {
}

#header {
width: 1000px;
height: 40px;
margin: 0 auto;
background: #608F30;
border-bottom: 1px solid #2D4516;
}

/* Menu */

#menu {
float: left;
width: 680px;
height: 40px;
}

#menu ul {
margin: 0;
padding: 13px 0 0 20px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
}

#menu a {
display: block;
float: left;
margin-right: 17px;
padding: 5px 12px;
text-decoration: none;
font: 14px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
background: #39561D;
color: #FFFFFF;
}

/* Search */

#search {
float: right;
width: 305px;
height: 40px;
}

#search form {
float: right;
margin: 0;
padding: 12px 20px 0 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
border: none;
}

#search-text {
width: 135px;
height: 18px;
padding: 3px 0 0 5px;
background: #ECF9E4;
color: #658453;
}

#search-submit {
height: 21px;
margin-left: 12px;
color: #39561D;
}

/* Page */

#page {
width: 960px;
margin: 0 auto;
padding: 0 20px;
background: url(images/img01.jpg) repeat-x left top;
}

/** LOGO */

#logo {
height: 148px;
}

#logo h1, #logo p {
float: left;
margin: 0;
padding: 0;
line-height: normal;
}

#logo h1 { padding-top: 45px; }

#logo h1 a {
text-decoration: none;
color: #39561D;
}

#logo h1 a:hover { text-decoration: underline; }

#logo p {
padding: 65px 0 0 15px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
color: #B6ACA2;
}

#logo p a {
text-decoration: none;
color: #B6ACA2;
}

#logo p a:hover { text-decoration: underline; }

/* Content */

#content {
float: left;
width: 660px;
}

/* Post */

.post {
margin-bottom: 25px;
}

.post .title {
margin-bottom: 3px;
padding: 2px 0px;
border-bottom: 1px dashed #B4F59D;
}

.post .meta {
margin: 0 0 3px 0;
padding: 2px 30px 2px 0px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
color: #B6ACA2;
}

.post .meta a { color: #B6ACA2; }

.post .entry {
padding: 25px 0px;
}

.post .links {
margin: 0 250px 0 0;
padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
padding-left: 17px;
}

/* Sidebar */

#sidebar {
float: right;
width: 240px;
margin-top: -100px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 30px;
padding: 0 0 20px 0px;
}

#sidebar li ul {
line-height: 200%;
}

#sidebar li li {
margin: 0;
padding: 0;
}

#sidebar h2 {
margin: 0 0 20px 0px;
padding: 2px 0 2px 0px;
border-bottom: 1px dashed #B4F59D;
font-size: 18px;
}

#sidebar p {
line-height: 200%;
}

/* Calendar */

#calendar {
}

#calendar caption {
padding-bottom: 5px;
font-weight: bold;
}

#calendar table {
width: 100%;
border-collapse: collapse;
border-right: 1px solid #F5F2EF;
}

#calendar thead th {
padding: 5px 0;
text-align: center;
border-top: 1px solid #F5F2EF;
border-left: 1px solid #F5F2EF;
background: #F5F2EF;
}

#calendar tbody td {
padding: 5px 0;
text-align: center;
border-top: 1px solid #F5F2EF;
border-left: 1px solid #F5F2EF;
}

#calendar tfoot td {
padding: 5px;
}

#calendar tfoot #next {
text-align: right;
}

#calendar #today {
background: #E7F1E1;
}

/* Footer */

#footer {
width: 1000px;
margin: 0 auto;
padding: 0;
background: #333333;
}

#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
line-height: normal;
color: #B5ADA5;
}

#footer a {
color: #B5ADA5;
}

</style>

</head>

<body>
<div id="header-wrapper">
<div id="header">
<div id="menu">

<ul>
<li class="current_page_item"><a href="http://www.lgbtsource.com/">Home</a></li>

<li><a href="http://www.lgbtsource.com/about.html">About</a></li>

<li><a href="http://lgbtsource.com/contact.html">Contact</a></li>

<li><a href="http://www.lgbtsource.com/directory.html">Directory</a></li>

<li><a href="http://www.lgbtsource.com/dictionary.html">Dictionary</a></li>

</ul>
</div>



</div>



<div id="page">
<div id="logo">
<BR>
<img src="http://www.logomaker.com/logo-images/9930aae30a43f90b.gif"/>
<a href="http://www.logoworks.com"><img src="http://www.logomaker.com/images/logos.gif" alt="logo design" border="0"/></a>
<BR>
</div>


<div id="content">
<div class="post">
<a name=top></a>
<h2 class="title"><font face="arial"><CENTER>Buddhism Listings</CENTER></font></h2>

<div class="entry">
<script language="JavaScript" type="text/javascript">

</script>

<p align="center"><a href='#top'>Back To Top</a></p>

<script language="JavaScript" type="text/javascript">

</script>

</div>

</div>
</div>


<div id="sidebar">
<ul>
<li>
<h2>
<CENTER><font face="arial">Search</font></CENTER>
</h2>

<p>
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="017423447592127873841:t1p4qsb55nc" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box〈=en"></script>

</p>

</li>

<li>

<h2>
<CENTER><font face="arial">Directory FAQ</font></CENTER>
</h2>

<font color="#000000" size="2" face="Arial">
Need help navigating the directory? Please visit the <a href="http://www.lgbtsource.com/directory-faq.html"><font color="#0000ff">Directory FAQ</font></a>.</font></p>

</li>

<li>

<h2>
<CENTER><font face="arial">New & Updated Additions</font></CENTER>
</h2>

<font color="#000000" size="2" face="Arial">
This site is currently being construted, so please bear this in mind.
</font>

</li>

<li>

<h2></h2>

<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</li>

</ul>

</li>
</ul>

</div>


<div style="clear: both;"> </div>
</div>


<div id="footer">
<p>Copyright (c) 2009 LGBTSource.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.
</p>
</div>



</body>
</html>

Thanks,
James

venegal

07-26-2009, 03:00 AM

Just so I get that right: You are using Javascript to print out large chunks of markup consisting of tables that are styled by inline CSS? That has to be the worst idea I came about in a long time.

Please get your code straight (npi)!

Kill that whole Javascript. Putting Javascript into a HTML file, the only purpose of which is printing out (static!) HTML is just plain silly. Put HTML into your HTML file, and that's that.

Now all you got left is a styling problem, which would ideally be solved by killing those tables and letting those inline styles accompany them to worst practices limbo, mark the content up semantically and use a stylesheet for layout.

That's not a Javascript problem any more though, so you are in the wrong forum.

lgbtsource

07-26-2009, 03:23 AM

I'm really new to coding and only know HTML. I put the table in Javascript (via a HTML to Javascript convertor) because when it was in purely HTML and was massively screwed up in most browsers. So, I put in Javascript to try and see if it would solve the issue and it did. So, I kind of really don't see the point of putting it back in just pure html.

I'm not sure how, as you say, using Javascript to print out large chunks of markup consisting of tables that are styled by inline CSS is a bad idea? If someone could explain to me as why that is a bad idea, that would be great. I know that I don't a lot of coding, but I do want to get better. That is why I'm asking questions. So, if you could expain why it is a bad idea, instead of just saying that it is a bad idea I'd really appreciate it. If I knew that something was a bad idea I wouldn't do it in the first place. To me, it's not obvious in any sense of the word.

Thanks for any help,
James

P.S. It is not my intention to come accross as rude or anything of that sort, I just want to learn what my mistakes are as to avoid them in the future.

venegal

07-26-2009, 02:04 PM

Sure I'll explain.

First, the Javascript:

All it does is literally print out static HTML, so just after it ran, the HTML the browser sees is exactly the same it would have been, had you just put the HTML itself in there. You say that the latter gave you screwed up results. Now, I simply won't believe they were any more (or differently) screwed up than with the Javascript "solution", which comes with a lot of downfalls:

- Maintainablility:

Suppose you want to change something. Since it's not HTML any more, wysiwyg is out the window, as are (if you, like me, prefer to just write your code) code highlighting and code hints. If someone else wants to change something, and they don't know which program you used, they will have to write their own HWJS (HTML wrapped in Javascript; that's not a thing, I just made that up) to match up yours, manually escaping quotes and all that other painful stuff.

So, that's not good.

- Accessibility:

Believe it or not, there ARE user agents that don't do Javascript, and if those users, say, at a workplace with a restrictive security policy, or using a mobile device, want to see your content, they are just out of luck. "Graceful Degradation" has been quite the buzzword, which means that users not quite meeting the requirements for the full experience should at least be able to see your content somehow, or, at the very least, be made aware that they are missing out on content.

That buzzword has been replaced by some new ones, like "Progressive Enhancement", which means that you start out with a basic page accessible to everyone (even if they are only using a text browser) and add functionality for those user agents that support it. "Unobtrusive Javascript" is another one, basically meaning that the Javascript functionality should be encapsuled in its own component that can be put in for extra functionality, or just left out, which should leave you with a fully intact and functional HTML site.

That one is entangled with another buzzword, "Separation of Concerns", which means that the different components that make up your site should have their own separated and clearly defined responsibilities. If you want to change content, you do that in your HTML, if you want to change layout, you go to your CSS, if you want to change extra functionality, you change your neatly encapsuled Javascript. I should have put that one under "Maintainability", but I'm just writing that stuff up as it pops into my head.

Now, another accessibility thing is SEO: Google won't see your Javascript-added HTML, so if that's interesting content you want indexed, you are just out of luck.

So, that's not good either.

So much for the Javascript. Next point: Tables:

HTML tables for layout fell out of the graces of web developers when CSS came along, and for good reason: They are difficult to maintain, and they don't comply with yet another buzzword, "Semantic HTML". The idea behind that is that your HTML markup should just define what's what as precisely as possible with HTML, but shouldn't do any layouting of it's own. Another "Separation of Concerns" thing.

Apart from that though, there's another important point there: People are not the only ones reading your pages. While your tables are neatly converted to some human readable layout by the browser, programs reading your site are out of luck there. They are presented with a table, notice that it's not really containing any tabular data, and just disregard it for whatever they were looking for. That could have been a google bot deciding that, if you don't tell it what's what, it won't bother going through the trouble of finding out itself, or it could have been the bot of, say, an event site walking the web trying to find interesting events to list, but it won't consider yours because it can't find them within that table mess.

Apart from HTML tables I can give you another example of non-semantical markup there: At the end of this post, you'll find a highlighted line. I did that so you will definitely read it. That's the "human" part of it. You see a yellow line, you read it. In order to highlight it, I used ICODE tags though, which are supposed to be used to mark up inline code snippets. A bot trying to index and archive usable Javascript snippets will choke on it, and while that particular bot might have had the malicious intent of stealing intellectual property for its own coding site and is good riddance, generally that's not a good thing.

Now as for the inline styles:

Separation of concerns again. If you want to change the looks, you should have to go to your CSS, and that's that. With inline styles you have to wade through all the content, which doesn't have anything to do with the looks, in order to find the property you want to change.

With your site it's worse though; not only will you have to wade through all the content, you also have to go through all the Javascripts, since that's where your inline styles are to be found. So, basically, if you want to change one thing in your site, you have to search through everything you have there, because that one thing could be located anywhere.

Now, I guess that pretty much sums it up and explains why I wrote "You are using Javascript to print out large chunks of markup consisting of tables that are styled by inline CSS? That has to be the worst idea I came about in a long time." before.

Now that's one long post; I hope you'll take your time taking it all in and do some best practices research on your own.

lgbtsource

07-26-2009, 07:06 PM

I'm responding to make sure I'm getting what you wrote correctly. I know that I'm going to sound clueless and might mangle the understanding of what you wrote. I had to look up a bunch of the buzzwords you wrote and basing my understandings of it on what I read. A lot of what I find is meant for those already familiar with said topics and leave me with only very little more knowledge then when I began searching for infomation. Again, I just want to learn.
When it comes to "Graceful Degradation" all I really can understand is that there are users who don't have Java or Javascript running on their computers for whatever reason. So, that means I should basically create the site in CSS and/or HTML only? I litteraly typed in "What is Graceful Degradation?" to Yahoo, Google, and Bing and looked up the article on Wikipedia and all I understood from it is that I should only make a website using CSS, because using Javascript won't show up on a good portion of other people's browsers. Most only talked about computer outages or something called "fault tolerance".
So, my main question is how do you create a page that can at the same time be seen both by those who allow for Javascript to be seen and for those that don't? I was looking at examples and from what I saw is the Javascript is mainly used for menu navagation and that somehow were able to have both a Javascript and (I assume) a Css one.
The next issue is the whole "Seperation of Concerns" wher I once again looked it up on all the major serach engines. My concern is that the CSS I got for my site is one that I got for my template, which I got from freecsstemplates.org. Like I've said before I don't know any CSS and I don't want to screw up the CSS that makes up my template. I'm afaird to touch the CSS for fear of screwing it up beyond repair. My issue with the CSS (beyond not knowing it, of course), is the fact that I want to have CSS specifcally for the tables I want to create. For instance the ones on my front page and the one that was the focus of my starting this thread. I'm not even sure that it is possible that I could have CSS that is meant for the tables that are different from the main CSS that lays out the page template.
I've tried to find a html to css converter, but to no luck. I posted about that in a different thread to which someone said that there were no realible converters, after me searching hours and hours for one that is free. I've tried looking for CSS table creators which I've found a few, but all have layouts I don't want. I've also tried looking for CSS style sheet creators for just the tables and that won't interfere with the CSS that I have for the template.
For instance, here's a code I got using the CSS code generator at HTMLbasix.com:

body.table
{
font-size:12px;
cursor:hand;
font-family:Arial;
color:black;
background-color:white;
text-align:left;
vertical-align:top;
margin-top:1px;
margin-bottom:1px;
margin-left:1px;
margin-right:1px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
border:silver solid;
border-width:1px;
}

I've no idea how to even what to apply the above code as a html table that I want it to be. I think it has to do with calling it a class in a table, but again I'm not sure what the coding is.
The HTML table I want it to create is this one:

<table style="vertical-align: top; float:left; background-color:#FFF; width:4%;">
<tr>
<td></td>
</tr>
</table>
<table style="vertical-align: top; float:center; background-color: #E8F1D4; width: 92%; border: 1px solid;">
<tr>
<td style="padding: 0px; background-color: #E8F1D4; width: 100%;text-align:center;"><span style="font-size:150%;"><span style="color: #000000;">Buddhism</span></span></td>
</tr>
</table>
<table style="vertical-align: top; float:right; background-color:#FFF; width:4%;">
<tr>
<td></td>
</tr>
</table>
<table style="background-color: #FFFFFF; width: 100%;">
<tr>
<td style="vertical-align: top; padding: 5px"></td>
</tr>
</table>
<table style="vertical-align: top; float:left; background-color:#FFF; width:15%;">
<tr>
<td></td>
</tr>
</table>
<table style="float:center; background-color: #3B5323; width: 92%; border: 1px solid;">
<tr>
<td style="padding: 0px; font-family:Comic Sans, Comic Sans MS,cursive;background-color: #3B5323;width: 100%;text-align:center;"><span style="font-size:120%;"><span style="color: #FFFFFF;">Gay Men's Buddhist Sangha</span></span></td>
</tr>
</table>
<table style="vertical-align: top; float:right; background-color:#FFF; width:4%;">
<tr>
<td></td>
</tr>
</table>
<table style="vertical-align: top; float:left; background-color:#FFF; width:4%;">
<tr>
<td></td>
</tr>
</table>
<table style="float:center; width: 92%; border: 1px solid silver;">
<tr>
<td style="text-align:center; padding: 0px; background-color: #8dab50; border: 1px solid; width: 20%;"><strong>About</strong></td>
<td style="padding: 0px; background-color: #F2F2F2; border: 1px solid silver; width: 80%;">Seeks to introduce the teachings of the Buddha to gay men and help them to preserve a healthy and positive self-image particularly about their sexuality.</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="text-align:center; padding: 0px; background-color: #8dab50; border: 1px solid; width: 20%;"><strong>URL</strong></td>
<td style="padding: 0px; background-color: #F2F2F2; border: 1px solid silver; width: 80%;"><span style="margin-left:2px"><a href="http://www.gaysangha.org/" onclick="window.open(this.href, '_blank'); return false;">Gay Sangha</a></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="text-align:center; padding: 0px; background-color: #8dab50; border: 1px solid; width: 20%;"><strong>Date Added</strong></td>
<td style="padding: 0px; background-color: #F2F2F2; border: 1px solid silver; width: 80%;"><span style="margin-left:2px">19 April 2009</span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="text-align:center; padding: 0px; background-color: #8dab50; border: 1px solid; width: 20%;"><strong>Categories</strong></td>
<td style="padding: 0px; background-color: #F2F2F2; border: 1px solid silver; width: 80%;"><span style="margin-left:2px">Buddhism</span></td>
</tr>
</table>
<table style="vertical-align: top; float:right; background-color:#FFF; width:4%;">
<tr>
<td></td>
</tr>
</table>

Also, I don't have a clue as to what you are referring to with the inline style and having to wade through the content. The only Javascript I'm using is the tables on the Buddhism page and I don't know what that has to do with Javascript.

For semantic html, what I get from reading up on it is that it involves making your site SEO friendly and it reads HTML and it doesn't read Javascript.

A lot of my problems with coding and learning is the fact is that I'm dyslexic and takes me FOREVER to do anything. I often misspell words or forget to put a word in at all and this can lead to confusion, even more so if it is another commonly used word for whatever the topic is. Just writing this response took me close to 4 hours because of trying to understand the things you were talking about and having to go to dictionary.com to look up even the most basic words such as "involves" or "style". I also having trouble explaining things (both in speech and in writing) because I can't think of the correct word to use and have to find another word that I can remember how to spell. I use a thesaurus a lot due to this. That is why it took me about 6 months, at least 2 hours a day to learn HTML and I still have a few things to learn from HTML. Because of the dyslexia I often need things to be explained to me in a very basic fashion, especially when I'm learning something brand new.

Thanks for any help,
James

P.S. I really do appreciate the help because I need it.