Full Version: Different views with browsers
Guys, how come the lines at the top show up with firefox and not with explorer. I dont want them there.
Who'd know without a sample page. 
Anyway, looking the source of http://www.bbqlegends.com/ you have:
My guess is that since HTML uses the same border for both the table and its cells and CSS uses separate ones, the above CSS will only remove the table's outer border in Firefox, not the ones between cells.
BTW:
* FrontPage is not a good HTML editor.
* There's also some issues with margins:
It seems IE doesn't render a P's default margin when it's in a TD, never noticed that before. But Firefox does render the margin, so you must set it to zero or (better) simply remove the P element. Ditto for the P around Animated2.gif.
Regarding CanAm_Flag.jpg there is no margin, but since there's no VALIGN=TOP in the TD the image will appear in the vertical middle by default (more or less anyway, since Animated2.gif is in a P with default margins).
* Since you use a standards mode doctype (good) it appears the "margin-left: 7" is ignored since it lacks a unit.
* It's much more practical to use an embedded or external style sheet rather than inline styles. See http://htmlhelp.com/reference/css/style-html.html
Anyway, looking the source of http://www.bbqlegends.com/ you have:
CODE
<table border="1" ... style="border-collapse: collapse; border-width: 0"
My guess is that since HTML uses the same border for both the table and its cells and CSS uses separate ones, the above CSS will only remove the table's outer border in Firefox, not the ones between cells.
BTW:
* FrontPage is not a good HTML editor.
* There's also some issues with margins:
CODE
<td width="33%" style="border-style: none; border-width: medium" height="70" bgcolor="#CA0000">
<p style="margin-left: 7"><img border="0" src="LegendsLogo.jpg" width="400" height="227"></td>
<p style="margin-left: 7"><img border="0" src="LegendsLogo.jpg" width="400" height="227"></td>
It seems IE doesn't render a P's default margin when it's in a TD, never noticed that before. But Firefox does render the margin, so you must set it to zero or (better) simply remove the P element. Ditto for the P around Animated2.gif.
Regarding CanAm_Flag.jpg there is no margin, but since there's no VALIGN=TOP in the TD the image will appear in the vertical middle by default (more or less anyway, since Animated2.gif is in a P with default margins).
* Since you use a standards mode doctype (good) it appears the "margin-left: 7" is ignored since it lacks a unit.
* It's much more practical to use an embedded or external style sheet rather than inline styles. See http://htmlhelp.com/reference/css/style-html.html
QUOTE(Christian J @ Nov 22 2006, 12:48 PM) 
Who'd know without a sample page.
BTW:
* FrontPage is not a good HTML editor.
sorry, forgot to add the link.
any suggestions for a free, easy to use program for dummies?
I've heard Nvu, but I don't really know.
http://www.nvu.com/
The best would be not to use a WYSIWYG at all.
http://www.nvu.com/
The best would be not to use a WYSIWYG at all.
Thanks for all the help. This really is a great site. I have since dl Nvu and am redoing the site. Keep in mind that I stink at this, and am only playing with my own sites to save some money that I dont have : )
I am trying to make it so the page adjusts to different display settings using the % rather than pixels. However when I do that, it creates a large amount of space between the graphics at the top. Is there anything that I can do about that? Is there a better way?
Remember I am a dummy so go slow : )
thanks
I am trying to make it so the page adjusts to different display settings using the % rather than pixels. However when I do that, it creates a large amount of space between the graphics at the top. Is there anything that I can do about that? Is there a better way?
Remember I am a dummy so go slow : )
thanks
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Legends1</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; white-space: nowrap; text-align: left; height: 250px; width: 50%; background-color: rgb(204, 0, 0);"><img
style="width: 400px; height: 227px;" alt="BBQLegends"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/LegendsLogo.jpg"></td>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; text-align: right; background-color: rgb(204, 0, 0);"><img
style="width: 275px; height: 156px;" alt="Flags"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/CanAm%20Flag.jpg"><br>
<br>
<img style="width: 234px; height: 60px;" alt="TBanner"
src="file:///C:/Documents%20and%20Settings/Angela/Desktop/Desktop/BBQLegends/Animated2.gif"></td>
</tr>
</tbody>
</table>
<br>
<table
style="width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; background-color: rgb(204, 0, 0); height: 26px; width: 100%; text-align: center;"><!-- Begin of MTop web button menu code -->
<script type="text/javascript" language="JavaScript1.2">
<!--
var m6057_btnCount = 5;
var m6057_staCount = 3;
var m6057_pressed = -1;
var m6057_btnImages = new Array();
for (i= 0; i< m6057_btnCount; i++)
{
m6057_btnImages[i] = new Array();
for (j= 0; j< m6057_staCount; j++)
{
m6057_btnImages[i][j] = new Image();
m6057_btnImages[i][j].src = 'images/m6057_mbtn' + i + '_' + j + '.gif';
}
}
function m6057_btnMouseOut(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][0].src;
};
function m6057_btnMouseOver(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][1].src;
};
function m6057_btnMouseDown(img)
{
if (m6057_pressed == img)
return;
if (m6057_pressed != -1)
document.images[m6057_pressed].src = m6057_btnImages[m6057_pressed.substring(m6057_pressed.indexOf('_mbtn')+5,m6057_pressed.length)][0].src;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][2].src;
m6057_pressed = img;
};
//-->
</script>
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
id="m6057_mbtn_tb" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="m6057_mbtn_td0"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn0')"
onmouseout="m6057_btnMouseOut('m6057_mbtn0')"
onmousedown="m6057_btnMouseDown('m6057_mbtn0')"
href="index.html"> <img src="images/m6057_mbtn0_0.gif"
name="m6057_mbtn0" alt="Home" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td1"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn1')"
onmouseout="m6057_btnMouseOut('m6057_mbtn1')"
onmousedown="m6057_btnMouseDown('m6057_mbtn1')"
href="History.html"> <img src="images/m6057_mbtn1_0.gif"
name="m6057_mbtn1" alt="History" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td2"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn2')"
onmouseout="m6057_btnMouseOut('m6057_mbtn2')"
onmousedown="m6057_btnMouseDown('m6057_mbtn2')" href="Lore.htm">
<img src="images/m6057_mbtn2_0.gif"
name="m6057_mbtn2" alt="Lore" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td3"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn3')"
onmouseout="m6057_btnMouseOut('m6057_mbtn3')"
onmousedown="m6057_btnMouseDown('m6057_mbtn3')"
href="Legends.htm"> <img src="images/m6057_mbtn3_0.gif"
name="m6057_mbtn3" alt="Legends" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td4"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn4')"
onmouseout="m6057_btnMouseOut('m6057_mbtn4')"
onmousedown="m6057_btnMouseDown('m6057_mbtn4')"
href="Hall%20of%20Fame.htm"> <img
src="images/m6057_mbtn4_0.gif" name="m6057_mbtn4"
alt="Hall of Fame" border="0" height="23"
width="150"></a></td>
</tr>
</tbody>
</table>
<!-- End of MTop web button menu code --> </td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100%; height: 100%;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; background-color: rgb(204, 0, 0); height: 100px; width: 25%; text-align: center;"></td>
<td
style="white-space: nowrap; height: 100%; width: 75%; text-align: justify; vertical-align: top; background-color: rgb(255, 255, 255);"></td>
</tr>
</tbody>
</table>
<br>
<table
style="background-color: rgb(0, 0, 0); width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td style="white-space: nowrap; text-align: justify;"></td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Legends1</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; white-space: nowrap; text-align: left; height: 250px; width: 50%; background-color: rgb(204, 0, 0);"><img
style="width: 400px; height: 227px;" alt="BBQLegends"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/LegendsLogo.jpg"></td>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; text-align: right; background-color: rgb(204, 0, 0);"><img
style="width: 275px; height: 156px;" alt="Flags"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/CanAm%20Flag.jpg"><br>
<br>
<img style="width: 234px; height: 60px;" alt="TBanner"
src="file:///C:/Documents%20and%20Settings/Angela/Desktop/Desktop/BBQLegends/Animated2.gif"></td>
</tr>
</tbody>
</table>
<br>
<table
style="width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; background-color: rgb(204, 0, 0); height: 26px; width: 100%; text-align: center;"><!-- Begin of MTop web button menu code -->
<script type="text/javascript" language="JavaScript1.2">
<!--
var m6057_btnCount = 5;
var m6057_staCount = 3;
var m6057_pressed = -1;
var m6057_btnImages = new Array();
for (i= 0; i< m6057_btnCount; i++)
{
m6057_btnImages[i] = new Array();
for (j= 0; j< m6057_staCount; j++)
{
m6057_btnImages[i][j] = new Image();
m6057_btnImages[i][j].src = 'images/m6057_mbtn' + i + '_' + j + '.gif';
}
}
function m6057_btnMouseOut(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][0].src;
};
function m6057_btnMouseOver(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][1].src;
};
function m6057_btnMouseDown(img)
{
if (m6057_pressed == img)
return;
if (m6057_pressed != -1)
document.images[m6057_pressed].src = m6057_btnImages[m6057_pressed.substring(m6057_pressed.indexOf('_mbtn')+5,m6057_pressed.length)][0].src;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][2].src;
m6057_pressed = img;
};
//-->
</script>
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
id="m6057_mbtn_tb" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="m6057_mbtn_td0"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn0')"
onmouseout="m6057_btnMouseOut('m6057_mbtn0')"
onmousedown="m6057_btnMouseDown('m6057_mbtn0')"
href="index.html"> <img src="images/m6057_mbtn0_0.gif"
name="m6057_mbtn0" alt="Home" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td1"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn1')"
onmouseout="m6057_btnMouseOut('m6057_mbtn1')"
onmousedown="m6057_btnMouseDown('m6057_mbtn1')"
href="History.html"> <img src="images/m6057_mbtn1_0.gif"
name="m6057_mbtn1" alt="History" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td2"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn2')"
onmouseout="m6057_btnMouseOut('m6057_mbtn2')"
onmousedown="m6057_btnMouseDown('m6057_mbtn2')" href="Lore.htm">
<img src="images/m6057_mbtn2_0.gif"
name="m6057_mbtn2" alt="Lore" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td3"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn3')"
onmouseout="m6057_btnMouseOut('m6057_mbtn3')"
onmousedown="m6057_btnMouseDown('m6057_mbtn3')"
href="Legends.htm"> <img src="images/m6057_mbtn3_0.gif"
name="m6057_mbtn3" alt="Legends" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td4"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn4')"
onmouseout="m6057_btnMouseOut('m6057_mbtn4')"
onmousedown="m6057_btnMouseDown('m6057_mbtn4')"
href="Hall%20of%20Fame.htm"> <img
src="images/m6057_mbtn4_0.gif" name="m6057_mbtn4"
alt="Hall of Fame" border="0" height="23"
width="150"></a></td>
</tr>
</tbody>
</table>
<!-- End of MTop web button menu code --> </td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100%; height: 100%;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; background-color: rgb(204, 0, 0); height: 100px; width: 25%; text-align: center;"></td>
<td
style="white-space: nowrap; height: 100%; width: 75%; text-align: justify; vertical-align: top; background-color: rgb(255, 255, 255);"></td>
</tr>
</tbody>
</table>
<br>
<table
style="background-color: rgb(0, 0, 0); width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td style="white-space: nowrap; text-align: justify;"></td>
</tr>
</tbody>
</table>
</body>
</html>
QUOTE(TekEss @ Nov 24 2006, 03:38 PM)
I have since dl Nvu and am redoing the site. Keep in mind that I stink at this, and am only playing with my own sites to save some money that I dont have : )
You would save a lot of time if you learnt how to do it instead. It isn't that hard.
QUOTE
I am trying to make it so the page adjusts to different display settings using the % rather than pixels. However when I do that, it creates a large amount of space between the graphics at the top. Is there anything that I can do about that? Is there a better way?
Set the border attribute in TABLE to something else than 0 while you are working. That way you see what's going on and where. You have two cells in the top row. Thay take up half the page width each (by default). You have aligned the image in the left cell left and the ones in the right cell right. So that's where they are.
QUOTE
<td
style="vertical-align: top; white-space: nowrap; text-align: left; height: 250px; width: 50%; background-color: rgb(204, 0, 0);">;
<img
style="width: 400px; height: 227px;" alt="BBQLegends"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/LegendsLogo.jpg">
</td>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; text-align: right ; background-color: rgb(204, 0, 0);">
style="vertical-align: top; white-space: nowrap; text-align: left; height: 250px; width: 50%; background-color: rgb(204, 0, 0);">;
<img
style="width: 400px; height: 227px;" alt="BBQLegends"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/LegendsLogo.jpg">
</td>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; text-align: right ; background-color: rgb(204, 0, 0);">
BTW is it Nvu that puts those style attributes in? See if you can configure it to leave width and height for images in the HTML. It makes the page load nicer and is where they belong (for now).
Thanks for the help. Kinda learning as I go. Made the changes that you suggested. Page looks good so far. It seems to fit better regardless of screen settings. Still not keen on the buttons as their size seems to be stationary. No where in that software does it allow you a percentage. You punch in the size and then insert the code. If I ever get one page complete,I'll use it as a template and just add content for the rest.
One question, when I am working on the page the cell that contains the buttons shows wider than anything else on the page. Even though it is set to %. Yet when I view the page with a browser it lines up perfectly regardless of display settings. Why is that ?
One question, when I am working on the page the cell that contains the buttons shows wider than anything else on the page. Even though it is set to %. Yet when I view the page with a browser it lines up perfectly regardless of display settings. Why is that ?
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Legends1</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; background-color: rgb(204, 0, 0); text-align: center;"><img
style="width: 400px; height: 227px;" alt="BBQLegends"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/LegendsLogo.jpg"></td>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; background-color: rgb(204, 0, 0); text-align: center;"><img
style="width: 275px; height: 156px;" alt="Flags"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/CanAm%20Flag.jpg"><br>
<br>
<img style="width: 234px; height: 60px;" alt="TBanner"
src="file:///C:/Documents%20and%20Settings/Angela/Desktop/Desktop/BBQLegends/Animated2.gif"></td>
</tr>
</tbody>
</table>
<table
style="width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; height: 26px; width: 100%; text-align: center; background-color: rgb(204, 0, 0);"><!-- Begin of MTop web button menu code -->
<script type="text/javascript" language="JavaScript1.2">
<!--
var m6057_btnCount = 5;
var m6057_staCount = 3;
var m6057_pressed = -1;
var m6057_btnImages = new Array();
for (i= 0; i< m6057_btnCount; i++)
{
m6057_btnImages[i] = new Array();
for (j= 0; j< m6057_staCount; j++)
{
m6057_btnImages[i][j] = new Image();
m6057_btnImages[i][j].src = 'images/m6057_mbtn' + i + '_' + j + '.gif';
}
}
function m6057_btnMouseOut(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][0].src;
};
function m6057_btnMouseOver(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][1].src;
};
function m6057_btnMouseDown(img)
{
if (m6057_pressed == img)
return;
if (m6057_pressed != -1)
document.images[m6057_pressed].src = m6057_btnImages[m6057_pressed.substring(m6057_pressed.indexOf('_mbtn')+5,m6057_pressed.length)][0].src;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][2].src;
m6057_pressed = img;
};
//-->
</script>
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
id="m6057_mbtn_tb" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="m6057_mbtn_td0"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn0')"
onmouseout="m6057_btnMouseOut('m6057_mbtn0')"
onmousedown="m6057_btnMouseDown('m6057_mbtn0')"
href="index.html"> <img src="images/m6057_mbtn0_0.gif"
name="m6057_mbtn0" alt="Home" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td1"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn1')"
onmouseout="m6057_btnMouseOut('m6057_mbtn1')"
onmousedown="m6057_btnMouseDown('m6057_mbtn1')"
href="History.html"> <img src="images/m6057_mbtn1_0.gif"
name="m6057_mbtn1" alt="History" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td2"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn2')"
onmouseout="m6057_btnMouseOut('m6057_mbtn2')"
onmousedown="m6057_btnMouseDown('m6057_mbtn2')" href="Lore.htm">
<img src="images/m6057_mbtn2_0.gif"
name="m6057_mbtn2" alt="Lore" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td3"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn3')"
onmouseout="m6057_btnMouseOut('m6057_mbtn3')"
onmousedown="m6057_btnMouseDown('m6057_mbtn3')"
href="Legends.htm"> <img src="images/m6057_mbtn3_0.gif"
name="m6057_mbtn3" alt="Legends" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td4"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn4')"
onmouseout="m6057_btnMouseOut('m6057_mbtn4')"
onmousedown="m6057_btnMouseDown('m6057_mbtn4')"
href="Hall%20of%20Fame.htm"> <img
src="images/m6057_mbtn4_0.gif" name="m6057_mbtn4"
alt="Hall of Fame" border="0" height="23"
width="150"></a></td>
</tr>
</tbody>
</table>
<!-- End of MTop web button menu code --> </td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100%; height: 100%;"
border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; height: 100px; width: 25%; text-align: center; background-color: rgb(204, 0, 0);"></td>
<td
style="white-space: nowrap; height: 100%; width: 75%; text-align: justify; vertical-align: top; background-color: rgb(255, 255, 255);"></td>
</tr>
</tbody>
</table>
<table
style="background-color: rgb(0, 0, 0); width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td style="white-space: nowrap; text-align: justify;"></td>
</tr>
<tr>
<td
style="white-space: nowrap; text-align: left; background-color: rgb(204, 0, 0);"></td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Legends1</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; background-color: rgb(204, 0, 0); text-align: center;"><img
style="width: 400px; height: 227px;" alt="BBQLegends"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/LegendsLogo.jpg"></td>
<td
style="vertical-align: top; white-space: nowrap; height: 250px; width: 50%; background-color: rgb(204, 0, 0); text-align: center;"><img
style="width: 275px; height: 156px;" alt="Flags"
src="file:///C:/Documents%20and%20Settings/Angela/My%20Documents/My%20Pictures/On%20Disk/BBQ%20Legends/CanAm%20Flag.jpg"><br>
<br>
<img style="width: 234px; height: 60px;" alt="TBanner"
src="file:///C:/Documents%20and%20Settings/Angela/Desktop/Desktop/BBQLegends/Animated2.gif"></td>
</tr>
</tbody>
</table>
<table
style="width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; height: 26px; width: 100%; text-align: center; background-color: rgb(204, 0, 0);"><!-- Begin of MTop web button menu code -->
<script type="text/javascript" language="JavaScript1.2">
<!--
var m6057_btnCount = 5;
var m6057_staCount = 3;
var m6057_pressed = -1;
var m6057_btnImages = new Array();
for (i= 0; i< m6057_btnCount; i++)
{
m6057_btnImages[i] = new Array();
for (j= 0; j< m6057_staCount; j++)
{
m6057_btnImages[i][j] = new Image();
m6057_btnImages[i][j].src = 'images/m6057_mbtn' + i + '_' + j + '.gif';
}
}
function m6057_btnMouseOut(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][0].src;
};
function m6057_btnMouseOver(img)
{
if (m6057_pressed == img)
return;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][1].src;
};
function m6057_btnMouseDown(img)
{
if (m6057_pressed == img)
return;
if (m6057_pressed != -1)
document.images[m6057_pressed].src = m6057_btnImages[m6057_pressed.substring(m6057_pressed.indexOf('_mbtn')+5,m6057_pressed.length)][0].src;
document.images[img].src = m6057_btnImages[img.substring(img.indexOf('_mbtn')+5,img.length)][2].src;
m6057_pressed = img;
};
//-->
</script>
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
id="m6057_mbtn_tb" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="m6057_mbtn_td0"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn0')"
onmouseout="m6057_btnMouseOut('m6057_mbtn0')"
onmousedown="m6057_btnMouseDown('m6057_mbtn0')"
href="index.html"> <img src="images/m6057_mbtn0_0.gif"
name="m6057_mbtn0" alt="Home" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td1"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn1')"
onmouseout="m6057_btnMouseOut('m6057_mbtn1')"
onmousedown="m6057_btnMouseDown('m6057_mbtn1')"
href="History.html"> <img src="images/m6057_mbtn1_0.gif"
name="m6057_mbtn1" alt="History" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td2"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn2')"
onmouseout="m6057_btnMouseOut('m6057_mbtn2')"
onmousedown="m6057_btnMouseDown('m6057_mbtn2')" href="Lore.htm">
<img src="images/m6057_mbtn2_0.gif"
name="m6057_mbtn2" alt="Lore" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td3"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn3')"
onmouseout="m6057_btnMouseOut('m6057_mbtn3')"
onmousedown="m6057_btnMouseDown('m6057_mbtn3')"
href="Legends.htm"> <img src="images/m6057_mbtn3_0.gif"
name="m6057_mbtn3" alt="Legends" border="0"
height="23" width="150"></a></td>
<td id="m6057_mbtn_td4"> <a
onmouseover="m6057_btnMouseOver('m6057_mbtn4')"
onmouseout="m6057_btnMouseOut('m6057_mbtn4')"
onmousedown="m6057_btnMouseDown('m6057_mbtn4')"
href="Hall%20of%20Fame.htm"> <img
src="images/m6057_mbtn4_0.gif" name="m6057_mbtn4"
alt="Hall of Fame" border="0" height="23"
width="150"></a></td>
</tr>
</tbody>
</table>
<!-- End of MTop web button menu code --> </td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100%; height: 100%;"
border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td
style="white-space: nowrap; height: 100px; width: 25%; text-align: center; background-color: rgb(204, 0, 0);"></td>
<td
style="white-space: nowrap; height: 100%; width: 75%; text-align: justify; vertical-align: top; background-color: rgb(255, 255, 255);"></td>
</tr>
</tbody>
</table>
<table
style="background-color: rgb(0, 0, 0); width: 100%; height: 26px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td style="white-space: nowrap; text-align: justify;"></td>
</tr>
<tr>
<td
style="white-space: nowrap; text-align: left; background-color: rgb(204, 0, 0);"></td>
</tr>
</tbody>
</table>
</body>
</html>
TekEss,
Because of the volume of code you are posting I've modified your post to be inside a CODEBOX instead of just CODE. This makes for a scrolling box so that the main page doesn't just scroll for ever.
Now, we've got a little problem with the layout for some reason, which I'll work on on the back end, because your code is not wrapping as it should (this is not your fault). But if you are going to post long pages of code it might be a little more helpful to either use CODEBOX or to attach it as an HTML file.
Thanks,
John
Because of the volume of code you are posting I've modified your post to be inside a CODEBOX instead of just CODE. This makes for a scrolling box so that the main page doesn't just scroll for ever.
Now, we've got a little problem with the layout for some reason, which I'll work on on the back end, because your code is not wrapping as it should (this is not your fault). But if you are going to post long pages of code it might be a little more helpful to either use CODEBOX or to attach it as an HTML file.
Thanks,
John
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.