...

View Full Version : a problem with my table, i think



hheyh222
11-19-2010, 05: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" />
<!-- TemplateBeginEditable name="metatags" -->
<script src="http://****************/listmenu.js" type="text/javascript"></script>
<title>Alpena</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css" media="all">
<!--
@import url("http://****************/styles.css");
-->
</style>
<style type="text/css" media="print">
<!--
This is the stylesheet for web page printing. It is optional.
-->
<!--
@import url("http://****************/print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 170px;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 170px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://****************/menu.js"></script>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="http://****************/menu_ie.css" />
<![endif]-->
<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"><!-- TemplateBeginEditable name="leftsidebar" -->
<div id="leftColumnContent">
<ul class="treemenu">
<li class="treenode">

MENU CODE OMITTED FOR LENGTH

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



<!-- TemplateEndEditable --></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&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;height=250&amp;wkst=1&amp;bgcolor=%233333ff&amp;src=en. usa%23holiday%40group.v.calendar.google.com&amp;color=%232952A3&amp;ctz=America%2FNew_York" style=" border-width:0 " width="350" height="250" frameborder="0" scrolling="no"></iframe></center></td></tr>
</table>
<div id="content"><!-- TemplateBeginEditable name="maincontent" -->


<!-- TemplateEndEditable --></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, 07: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, 06:07 AM
ive not, but i dont believe that to be the problem

BulletTimeBill
11-21-2010, 10: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, 11: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, 02:19 AM
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.

No thats not true. Tables used as he has used them are fine. Tables used to display tabular data are ok, tables for page layout are whats not ok.

hheyh222
11-22-2010, 02: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"><!-- TemplateBeginEditable name="maincontent" -->
<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" />

<!-- TemplateEndEditable --></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&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;height=250&amp;wkst=1&amp;bgcolor=%233333ff&amp;src=en. usa%23holiday%40group.v.calendar.google.com&amp;color=%232952A3&amp;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&nbsp;<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, 11:06 PM
I just viewed your page in Firefox and there were no issues whatsoever.

What browser is the trouble occurring with?

hheyh222
11-23-2010, 12:32 AM
its internet explorer. it works in explorer on some computers and on some older ones is where it messes up

cstroup
11-23-2010, 01:31 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?

cstroup
11-23-2010, 01:32 AM
Fat thumbs + iPhone = bad spelling. Sorry about that.

Excavator
11-23-2010, 02: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, 03: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, 03:54 AM
could this bit of code before my footer be the problem?
<br class="clearFloat" />

teedoff
11-24-2010, 03: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, 04: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, 05: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, 05: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, 06:55 AM
yay! i fixed everything. i just changed the background color of my outer wrapper. thanks to everyone for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum