Anybody here good with coding?

[Soccerman77]

I have a site and I am running into a few things that I can't seem to fix. The first is something that I have had in my site for over a year and today it continue to go to the footer when I place it in my sidebar.. Here it is..


</div>
<TABLE border="1" cellpadding="3" cellspacing="0" bgcolor="Darkblue" >
<TR>
<TH COLSPAN="2"><center><font color="White ">Penn State Football 2007</font></center></TH>
</TR>
<TR>
<TD bgcolor="White"></a></td>
<TD ROWSPAN="2"><font color="White">Penn State Football</font>

<font size="1" color="White">Penn State at Michigan St

Franklin Field

Saturday November 17, 2007

Kick-off: 3:30, ABC
</font></TD>
</tr>
</tr>


The next is a drop down menu that I made, for some strange reason when I click go, nothing happens.

</TABLE>


<form name="form2"><select name="select2" size="1" style="background-color:# #0000FF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="">The Nits
<option value=""></option>
<option value="http://gopsusports.cstv.com/" target="newwin">Official Site</option>
<option value="http://www.gopsf.com/#home" target="newwin">Go Penn State Football</option>
<option value="http://gloryofoldstate.blogspot.com/" target="newwin">There is No Name On My Jersey</option>
<option value="http://runupthescore.wordpress.com/" target="newwin">Run Up The Score</option>
<option value="http://www.blackshoediaries.com/" target="newwin">Black Shoes Diaries</option>
<option value="http://laschout.com/" target="newwin">Lasch Out</option>
<option value="http://www.lionzmania.com/" target="newwin">LionzMania </option>
<option value="http://happyhourvalley.wordpress.com/" target="newwin">Happy Hour Valley</option>
<option value="http://www.zombienationpsu.blogspot.com/" target="newwin">Zombie Nation</option>
<option value="http://blog.psufan.com/index.html" target="newwin">This Guy</option>
<option value="http://www.thenittanyline.blogspot.com/" target="newwin">The Nittany Line</option>
<option value="http://www.geocities.com/psulionsden/" target="newwin">The Lion’s Den</option>
<option value="http://pennstatetailgate.com/index.html" target="newwin">Penn State Tailgate</option>
<option value="http://www.alionstale.com/index.html" target="newwin">A Lions Tale</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form2.select2)">

<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>


Thanks

[thecoalman]

Impossible to determine what the issue could be without the entire code, first use a validator to fix any issues it finds: http://validator.w3.org/

Fix the first error it finds then revalidate, some errors will cause a cascading affect and produce errors that would not be there if you fix the first one.

Having said that you're code is a mess, standard coding practices dictate we should use lower case for markup:

Looking better already:

<table border="1" cellpadding="3" cellspacing="0" bgcolor="Darkblue" >
<tr>
<th colspan="2"><center><font color="White ">Penn State Football 2007</font></center></th>
</tr>
<tr>
<td bgcolor="White"></a></td>
<tdrowspan="2"><font color="White">Penn State Football</font>

<font size="1" color="White">Penn State at Michigan St

Franklin Field

Saturday November 17, 2007

Kick-off: 3:30, ABC
</font></td>
</tr>
</tr>
</table>

Let's give it proper tabs so it's easier to read:

Looking much better

<table border="1" cellpadding="3" cellspacing="0" bgcolor="Darkblue" >
	   <tr>
	   	   <th colspan="2"><center><font color="White ">Penn State Football 2007</font></center></th>
	   </tr>
	   
	   <tr>
	   	   <td bgcolor="White">
		   	   </a>
			   
                   </td>
                   <tdrowspan="2">
		           <font color="White">Penn State Football</font>
<font size="1" color="White">Penn State at Michigan St
Franklin Field
Saturday November 17, 2007
Kick-off: 3:30, ABC
</font>
		   </td>
	   </tr>
	   </tr>
</table>

We'll start with the first 4 lines, You should be using CSS for formatting you can specify this in the tag or better yet in a exteranl stysheet, check here for CSS, http://www.w3schools.com/css/default.asp . th(table heading) tags automatically center so we don't need that. cellspacing and some other table attributes are not well supoorted in IE6 so we'll leave them out of the css.

<table border="1" cellpadding="3" cellspacing="0" style="background-color:"#0000A0;" >
	   <tr>
	   	   <th colspan="2" style="color: #FFF;">Penn State Football 2007</th>
	   </tr>

The next few lines are where the real trouble starts, you have a </a> tag without a starting <a> tag, that gets deleted. The alt attribute is for the seeing impaired and should indicate what the image is. I'm assuming you want these images side by side centered within their own cells. the images that you have linked too are far larger than the dimensions. you should resize them. Browsers generally do a poor job of dynamically resizin imges client side.:

<table border="1" cellpadding="3" cellspacing="0" style="background-color:#0000A0;" >
	   <tr>
	   	   <th colspan="2" style="color: #FFF;">Penn State Football 2007</th>
	   </tr>
	   
	   <tr>
	   	   <td style="background-color:#FFF;">
		   	   
		   </td>
		   <td style="background-color:#FFF;">
			   
		   </td>
	   </tr>

Your second table cell has no space between the tag and the arrtibute rowspan. The attribute is the wrong one anyway, you want to use colspan instead. We split off each sentence ito it's own <td> with a colspan of 2. You also have a extra ending </tr> tag that gets deleted. I added the css for aligning everything centered in the table tag:

<table border="1" cellpadding="3" cellspacing="0" style="background-color:#0000A0; text-align:center;" >
	   <tr>
	   	   <th colspan="2" style="color: #FFF;">Penn State Football 2007</th>
	   </tr>
	   
	   <tr>
	   	   <td style="background-color:#FFF;">
		   	   
		   </td>
		   <td style="background-color:#FFF;">
			   
		   </td>
	   </tr>
	   
	   <tr>
           <td colspan="2" style="background-color:#0000A0; color:#FFF;">
		       Penn State at Michigan St.
		   </td>
	   </tr>

	   <tr>
           <td colspan="2" style="background-color:#0000A0; color:#FFF;">
		       Franklin Field
		   </td>
	   </tr>
	   
	   <tr>
           <td colspan="2" style="background-color:#0000A0; color:#FFF;">
		       Saturday November 17, 2007
		   </td>
	   </tr>
	   
	   <tr>
           <td colspan="2" style="background-color:#0000A0; color:#FFF;">
		       Kick-off: 3:30, ABC
		   </td>
	   </tr>
</table>

This can actually be made cleaner by applying css classes isnstead of putting it right in the tag. Also note the forum is messing mith my tabs and it would look much nicer viewed as source or in text editor.

For your drop down box do search for "onchange drop down". here's one example. not that you need javascript enabled for this to work.:

<form name="jump1">
<select name="myjumpbox"
 OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

annnnd Go Penn State.... argaagagagahahahahaha... <---- thats the best I could come up with for lion sound.

[brushswinger]

Well soccerman did not even reply, but ya have given me a few pointers, and i can tell you put a lot of work into that reply. Thankyou

[thecoalman]

and i can tell you put a lot of work into that reply. Thankyou

Well not a whole lot, I have the tools to streamline the process and don't have to reference what I'm using. Having a good HTML editor makes a world of difference.

Try www.coffeecup.com , by the looks of the screenshots the free editor isn't much different than the pay for version.

Here's same code in the editor, note the color highlighting. Makes it easy to spot mistakes as the highlighting will break in lot of cases if you mess something up:

[zoobie]

Abusing tables is not recommended for several reasons.
I haven't used tables in 4 years.
Your best bet is to learn page display using CSS @ www.codingforums.com like I did.
Your pages will load faster and fluidly display regardless of user resolution.

[thecoalman]

True Zoobie but i wasn't about to go into the whole CSS box model , that's something you need to learn on your own and even then it becomes an issue because of poor cross browser support.

[zoobie]

I drag CSS pages thru Firefox and IE and haven't noticed any issues. Good enuf for me and most.
I read the first few chapters of "Designing without tables" and the author starts by saying tables were so confusing and he got totally lost...ha ha. Luckily, we can use CSS also for fluid placement or we'd all still be using tables.
You mean IE's lag in CSS versions?
MS shoulda skipped a few and updated to the latest but I guess that would make too much sense.
Last I looked, the latest CSS version was a thing of beauty in coding efficiency.

[thecoalman]

I mean you don't get consistent behavior especially in fluid designs with floats and columns, try this (BTW using a table this is quite simple to do):

Create a 2 column layout where the left column is static width of 150px and the right column is fluid. Your basic layout like you have here. Now place an image into your right column that exceeds the available space in your window. i.e. for it to fit you need to scroll right.

Now before you get all excite if it works in IE of FF try it in the other one. You can do it but not without a lot of work. My solution is absolute positioning as it voids all cross browser issues. For tables all you need is to do is have two TD's with the left one being static width.

[lordsmurf]

CSS is a bitch.

Saying "use CSS" and actually using CSS are different. I use more and more CSS now, but cold turkey changeover has been almost impossible. Even then, there's not anything inherently wrong with a couple of tables. Sometimes it cannot be avoided.

[thecoalman]

Sometimes it cannot be avoided.

It can be but you have to work at it sometimes. Besides it looks so puurrrrrrrty when viewing the source.