Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts

    a problem with my table, i think

    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

    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>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ive not, but i dont believe that to be the problem

  • #4
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    ...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?

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    53
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by jimanji; 11-22-2010 at 08:20 AM.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by jimanji View Post
    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.

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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

    Code:
    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;
    }

  • #8
    New Coder
    Join Date
    Nov 2010
    Location
    North Fort Myers, FL
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I just viewed your page in Firefox and there were no issues whatsoever.

    What browser is the trouble occurring with?

  • #9
    New Coder
    Join Date
    Sep 2010
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    its internet explorer. it works in explorer on some computers and on some older ones is where it messes up

  • #10
    New Coder
    Join Date
    Nov 2010
    Location
    North Fort Myers, FL
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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?

  • #11
    New Coder
    Join Date
    Nov 2010
    Location
    North Fort Myers, FL
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Fat thumbs + iPhone = bad spelling. Sorry about that.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by cstroup View Post
    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, IE bugs and tend to the errors in your code. You should consider losing the tables too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Nov 2010
    Location
    North Fort Myers, FL
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #14
    New Coder
    Join Date
    Sep 2010
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    could this bit of code before my footer be the problem?
    <br class="clearFloat" />

  • #15
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by hheyh222 View Post
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •