a problem with my table, i think

hheyh222

11-19-2010, 04:51 PM

On some computers or browsers, my page looks perfect, but on others, my table gets moved below my vertical menu. i cant figure out if its the table itself, or if theres a div problem somewhere.

heres the page http://****************/michigan/alpena.html

heres the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="http://****************/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://****************/listmenu.js" type="text/javascript"></script>
<title>Alpena</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<style type="text/css" media="all">

</style>
<style type="text/css" media="print">


</style>


<script type="text/javascript" src="http://****************/menu.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="http://****************/menu.css" />
</head>
<body>
<div id="outerWrapper">
<div id="header"></div>
<div id="topNavigation">
<ul class="level-0" id="cssmw">
<li><span><a href="http://****************/">Home</a></span></li>
<li><span><a href="#">Maps</a></span>
<ul class="level-1">
<li><span><a href="http://****************/states/michigan.html">Michigan</a></span></li>
<li><span><a href="http://****************/mappage.html">United States</a></span></li>
<li><span><a href="http://maps.google.com/maps?hl=en&tab=wl">Get Directions</a></span>
</li></ul>
<li><span><a href="http://****************/promotions.html">Promotions</a></span>

<li><span><a href="http://****************/aboutus.html">About Us</a></span></li>
<li><span><a href="#">Contact Us</a></span>
<ul class="level-1">
<li><span><a href="http://****************/forconsumers.html">For Consumers</a></span></li>
<li><span><a href="http://****************/forcustomers.html">For Customers</a></span></li>
<li><span><a href="http://****************/advertise.html">Advertise With Us</a></span></li>
</ul></li></ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw'); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw0'); }, true); }</script>
</div>
<div id="contentWrapper">
<div id="leftColumn1">
<div id="leftColumnContent">
<ul class="treemenu">
<li class="treenode">

MENU CODE OMITTED FOR LENGTH

</ul></li></ul></div>

</div>
<div id="rightColumn1"></div>

<table id="Table_01" width="700" height="1400" border="0" cellpadding="0" cellspacing="0">
<td height="600" colspan="3" align="right" valign="top" background="http://****************/images/cityimages/alpena.jpg">
<embed src="http://www.weatherlet.com/weather.swf?locid=49707&unit=s" quality="high" wmode="transparent" bgcolor="#CC00CC" width="170" height="65" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br>

</td>
</tr>
<tr>
<td width="13" height="837" rowspan="2" background="http://****************/images/cityimages/citypagebg5.jpg"></td>
<td width="440" height="439" valign="top" background="http://****************/images/cityimages/citypagebg6.jpg">
<center>For Upcoming Events go <bR /><a href="http://www.alpenacvb.com/calendar-of-events-63/">Here</a><br /><br />
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showCalendars=0&height=250&wkst=1&bgcolor=%233333ff&src=en. usa%23holiday%40group.v.calendar.google.com&color=%232952A3&ctz=America%2FNew_York" style=" border-width:0 " width="350" height="250" frameborder="0" scrolling="no"></iframe></center></td></tr>
</table>
<div id="content">

</div>
<br class="clearFloat" />
</div>
<div id="footer"><a href="http://****************/">Home</a> | <a href="http://****************/mappage.html">Start Your Search</a> | <a href="http://****************/promotions.html">Promotions</a> | <a href="http://****************/aboutus.html">About Us</a> | <a href="http://****************/advertise.html">Advertise With Us</a> <br />

This site is trademark and copyright © 2010 ****************<img src="http://****************/images/spacer.gif" width="1" /></div>

</div>
<script type="text/JavaScript">var TFN='';var TFA='';var TFI='0';var TFL='0';var tf_RetServer="rt.trafficfacts.com";var tf_SiteId="1739g1f6c2f869064a6f991e398a762edb3b8453389fch16";var tf_ScrServer=document.location.protocol+"//rt.trafficfacts.com/tf.php?k=1739g1f6c2f869064a6f991e398a762edb3b8453389fch16;c=s;v=5";document.write(unescape('%3Cscript type="text/JavaScript" src="'+tf_ScrServer+'">%3C/script>'));</script><noscript><img src="http://rt.trafficfacts.com/ns.php?k=1739g1f6c2f869064a6f991e398a762edb3b8453389fch16" height="1" width="1" alt=""/></noscript>
</body>
</html>

teedoff

11-19-2010, 06:16 PM

Have you validated your code yet? I saw several list items that weren't coded within a <ul> or <ol> tag. Might not be your problem, but definately worth a fix.

hheyh222

11-21-2010, 05:07 AM

ive not, but i dont believe that to be the problem

BulletTimeBill

11-21-2010, 09:47 AM

...you don't believe the 27 errors and 6 warnings your site outputs has anything to do with a table being slightly mis-aligned in some browsers? I would really consider looking at that first, but otherwise i'm guessing it's a css issue?

jimanji

11-21-2010, 10:31 PM

I don't want to disappoint you but you have to change your table to ccs/div. I have removed all tables from my 42 pages. The problems with tables will never stop. If you want to change their size in the future, you will remember me.

You can download table2css trial. It will convert some pages even in trial version. After that repair errors & warnings.

Good luck.

teedoff

11-22-2010, 01:19 AM

hheyh222

11-22-2010, 01:40 PM

Ive done away with the tables, and I tried fixing that top menu, I found the solution for the problem with the menu on the validator site but it made everything look messed up so I dont know what else to do about that. Even without the tables, Im still having the problem of that section being shoved below my side menu. Im trying it on a different page now

http://****************/michigan/traversecity.html

heres my html for that area

<div id="content" align="right">
<embed src="http://www.weatherlet.com/weather.swf?locid=49686&unit=s" quality="high" wmode="transparent" bgcolor="#CC00CC" width="170" height="65" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</div>
<div id="content2" align="center">
For Upcoming Events go to <bR /><a href="http://www.visittraversecity.com/events-33/"><img src="http://www.visittraversecity.com/images/ht_images/Links/tccvb_white_small.gif" /></a><br /><br />
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showCalendars=0&height=250&wkst=1&bgcolor=%233333ff&src=en. usa%23holiday%40group.v.calendar.google.com&color=%232952A3&ctz=America%2FNew_York" style=" border-width:0 " width="350" height="250" frameborder="0" scrolling="no"></iframe><br />
<p align="center" class="style4">Corporate Sponsors <img src="http://****************/images/tinylogo.gif" width="16" height="16" /></p>
<a href="http://www.prestigeconstructiongroup.com/"><img src="http://****************/images/cityimages/tcsponsors/prestige-construction.jpg" width="141" height="65" /></a>
<a href="http://www.teamelmers.com/"><img src="http://****************/images/cityimages/tcsponsors/ELMERS%20LOGOsm.jpg" width="118" height="65" /></a> <br />
<a href="http://www.tcfood.com/"><img src="http://****************/images/cityimages/tcsponsors/tc.jpg" width="140" height="65"/></a>
<a href="http://www.unitedbuildingcenters.com/"><img src="http://****************/images/cityimages/tcsponsors/brown_lumber_logo.jpg" width="122" height="65"/></a>

</div>

heres my css for the whole page

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
}

body {
background-color: #074b73;
color: #2a2d2e;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 24px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
}
h1 {
color: #000099;
font-size: 36px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
text-align: center;
}
h2 {
color: #6982B5;
font-size: 18px;
font-weight: bold;
line-height: 20px;
border-bottom: 1px solid #939FB7;
padding-bottom: 5px;
}
a, a:link {
color: #007cba;
font-weight:bold;
text-decoration:underline;
}
a:visited {
color: #007cba;
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #000099;
text-decoration: underline;
}
a:focus {
color: #13399D;
}
a:active {
color: #13399D;
}
#outerWrapper {
margin: 0 auto 20px;
text-align: left;
width: 920px;
background: #fff url(http://****************/content-bg.png) repeat-y left 13px;
}
#outerWrapper #header {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 24px;
padding: 0px 10px;
height: 158px;
background: url(http://****************/banner.gif) no-repeat left top;
}

#outerWrapper #topNavigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 11px;

height: 30px;
padding: 0 0px;
background: url(http://****************/navbg.png) repeat-x center;
margin-right: 20px;
margin-left: 20px;

}
#outerWrapper #topNavigation ul a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
height: 30px;
width: 120px;
padding: 0 0px;
background: url(http://****************/navbgover.png) repeat-x center;
margin-right: 0px;
margin-left: 0px;

}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 0px;
width: 170px;
}
#outerWrapper #contentWrapper #rightColumn1 {
float: right;
padding: 20px 0px 10px;
width: 0px;
}
#outerWrapper #contentWrapper #content {
margin-top:0px;
margin-bottom:0px;
margin-right:10px;
margin-left:160px;
padding: 20px;
width: 700px;
height: 600px;
background-image: url(http://****************/TraverseCity.jpg); background-repeat: no-repeat;

}
#outerWrapper #contentWrapper #content2 {
margin-top:10px;
margin-bottom:0px;
margin-right:10px;
margin-left:160px;
padding: 20px;
width: 700px;
height: 600px;

}
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}
#outerWrapper #footer {
padding: 10px 30px 0px;
background: url(http://****************/footer-bg.png) no-repeat left top;
height: 75px;
color: #FFFFFF;
text-align: center;
}
#leftColumnContent {
padding: 20px 0px 10px;
width: 170px;
}
#outerWrapper #contentWrapper {
padding-right: 25px;
padding-left: 25px;

}
#leftColumn1 ul, #rightColumn1 ul {
margin: 0px;
padding: 10px 0px 20px;
}
#leftColumn1 ul li, #rightColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a, #rightColumn1 ul li a {
display: block;
padding: 4px 4px 4px 10px;
background: url(http://****************/li-dot.gif) no-repeat left top;
border-bottom: 1px solid #E0E0E0;
}
#leftColumn1 ul li a:hover,#rightColumn1 ul li a:hover {
background: #F0F1F4 url(http://****************/li-dot.gif) no-repeat left top;
text-decoration: none;
}
.fltlft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.fltrt {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
#content ul li {
margin-bottom: 5px;
}
#content blockquote {
border-left: 5px solid #BAC2D1;
margin-left: 15px;
background: #ECEEF2;
padding: 5px 10px;
margin-right: 15px;
}

#content blockquote blockquote {
background: #F8F9FA;
}

.sidebarlt {
background: #EBEDF1;
padding: 6px;
border: 1px solid #C6CCD9;
}
.sidebardk {
color: #FFFFFF;
background: #7786A4;
border: 1px solid #556481;
padding: 6px;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
color: #FFFFFF;
}

#footer a, #footer a:hover, #footer a:visited, #footer a:active {
color: #FFFFFF;
}
#credit {
text-align: center;
background: #2E3645;
color: #576682;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
color: #576682;
}

cstroup

11-22-2010, 10:06 PM

I just viewed your page in Firefox and there were no issues whatsoever.

What browser is the trouble occurring with?

hheyh222

11-22-2010, 11:32 PM

its internet explorer. it works in explorer on some computers and on some older ones is where it messes up

cstroup

11-23-2010, 12:31 AM

cstroup

11-23-2010, 12:32 AM

Fat thumbs + iPhone = bad spelling. Sorry about that.

Excavator

11-23-2010, 01:13 AM

Old IEs have trouble with lots of CSS. Come to think of it, IE just has trouble with CSS. Maybe it will be more compatible with the new HTML & CSS. do you think you'll have a lit of users on older IE?

Hello hheyh222,
That's just not true. IE6 can be a bear to get working right but it uses CSS just fine.
While I don't have IE6 to see test your site in, I'd bet the issue you are seeing is called float drop and you're best bet is to study your box model (http://www.w3.org/TR/CSS2/box.html), IE bugs (http://www.positioniseverything.net/explorer.html) and tend to the errors in your code (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2F****************%2Fmichigan%2Falpena.html). You should consider losing the tables (http://www.hotdesign.com/seybold/everything.html) too.

cstroup

11-23-2010, 02:29 AM

Ok. Well thanks for the correction. I have had a tremendous amount of difficulty with older IE (and read the same from others). Perhaps I gave up on it too quickly.

hheyh222

11-24-2010, 02:54 AM

could this bit of code before my footer be the problem?
<br class="clearFloat" />

teedoff

11-24-2010, 02:59 AM

could this bit of code before my footer be the problem?
<br class="clearFloat" />

Thats used to clear floats so that the footer goes back to normal document flow.

hheyh222

11-24-2010, 03:46 AM

I increased the width of my outer wrapper and it fixed the problem of the float drop, however now theres a strip of white to the side of the page which can be seen here

http://****************/michigan/traversecity.html

heres my css again

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
}

body {
background-color: #074b73;
color: #2a2d2e;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 24px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;

}
h1 {
color: #000099;
font-size: 36px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
text-align: center;
}
h2 {
color: #6982B5;
font-size: 18px;
font-weight: bold;
line-height: 20px;
border-bottom: 1px solid #939FB7;
padding-bottom: 5px;
}
a, a:link {
color: #007cba;
font-weight:bold;
text-decoration:underline;
}
a:visited {
color: #007cba;
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #000099;
text-decoration: underline;
}
a:focus {
color: #13399D;
}
a:active {
color: #13399D;
}
#outerWrapper {
margin: 0 auto 20px;
text-align: left;
width:950px;
background: #fff url(http://****************/content-bg.png) repeat-y left 13px;
}
#outerWrapper #header {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 24px;
padding: 0px 10px;
height: 158px;
background: url(http://****************/banner.gif) no-repeat left top;
}
#outerWrapper #topNavigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 11px;

height: 30px;
padding: 0 0px;
background: url(http://****************/navbg.png) repeat-x center;
margin-right: 50px;
margin-left: 20px;
}
#outerWrapper #topNavigation ul a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
height: 30px;
width: 120px;
padding: 0 0px;
background: url(http://****************/navbgover.png) repeat-x center;
margin-right: 0px;
margin-left: 0px;

}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 0px;
width: 170px;
}
#outerWrapper #contentWrapper #rightColumn1 {
float: right;
padding: 20px 0px 10px;
width: 0px;
}
#outerWrapper #contentWrapper #content {
margin-top:0px;
margin-bottom:0px;
margin-right:10px;
margin-left:170px;
padding: 20px;
}
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}
#outerWrapper #footer {
padding: 10px 30px 0px;
background: url(http://****************/footer-bg.png) no-repeat left top;
height: 75px;
color: #FFFFFF;
text-align: center;
}
#leftColumnContent {
padding: 20px 0px 10px;
width: 170px;
}
#outerWrapper #contentWrapper {
padding-right: 25px;
padding-left: 25px;

}
#leftColumn1 ul, #rightColumn1 ul {
margin: 0px;
padding: 10px 0px 20px;
}
#leftColumn1 ul li, #rightColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a, #rightColumn1 ul li a {
display: block;
padding: 4px 4px 4px 10px;
background: url(http://****************/li-dot.gif) no-repeat left top;
border-bottom: 1px solid #E0E0E0;
}
#leftColumn1 ul li a:hover,#rightColumn1 ul li a:hover {
background: #F0F1F4 url(http://****************/li-dot.gif) no-repeat left top;
text-decoration: none;
}
.fltlft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.fltrt {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
#content ul li {
margin-bottom: 5px;
}
#content blockquote {
border-left: 5px solid #BAC2D1;
margin-left: 15px;
background: #ECEEF2;
padding: 5px 10px;
margin-right: 15px;
}

#content blockquote blockquote {
background: #F8F9FA;
}

.sidebarlt {
background: #EBEDF1;
padding: 6px;
border: 1px solid #C6CCD9;
}
.sidebardk {
color: #FFFFFF;
background: #7786A4;
border: 1px solid #556481;
padding: 6px;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
color: #FFFFFF;
}

#footer a, #footer a:hover, #footer a:visited, #footer a:active {
color: #FFFFFF;
}
#credit {
text-align: center;
background: #2E3645;
color: #576682;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
color: #576682;
}

thanks very much

santhoshj400

11-24-2010, 04:18 AM

Hi,
it looks better now have you solved it ?? if not can you clearly say where the problem is??

hheyh222

11-24-2010, 04:22 AM

hi,
i solved one problem but another arose.
to the right of the content section theres a vertical strip of white. something in the css isnt wide enough, or moved over is my guess. i just cant figure out what in particular.
thanks

hheyh222

11-24-2010, 05:55 AM

yay! i fixed everything. i just changed the background color of my outer wrapper. thanks to everyone for your help.