www.webdeveloper.com
+ Reply to Thread
Results 1 to 9 of 9
  1. 07-28-2011 06:59 AM #1
    daz_omega
    daz_omega is offline Registered User
    Join Date
    Jul 2011
    Posts
    4

    table tds displaying incorrectly in IE

    Hi, I am currently working on producing a web page and I have hand coded the HTML tables that produce the design of the web page. I created this in firefox to make sure my code validates in XHTML. however if I load the same page in IE the TD's appear squashed and the design looks bad.

    Below is the HTML code that I used to develop this web page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="ss_styles.css"/>
</head>
<body>
<table border="0" width="100%">
<tr>
	<td><img src="logo.jpg" border="0" /></td>
</tr>
</table>
<table id="maintable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="5%">&nbsp;</td>
<td width="5%">&nbsp;</td>
<td width="15%">&nbsp;</td>
<td width="50%">&nbsp;</td>
<td width="15%">
<span class='login'>
Logged in as <?php $_SESSION['valid_user']." ?>
</span>
</td>
<td width='5%'>&nbsp;</td>
<td width='5%'>&nbsp;</td>
</tr>
<tr>
<td width='5%'>&nbsp;</td>
<td id='topleft' width='70' height='70'>&nbsp;</td>
<td id='topbar' width='80%' colspan='3'>&nbsp;</td>
<td id='topright' width='70' height='70'>&nbsp;</td>
<td width='5%'>&nbsp;</td>
</tr>
<tr>
<td width="5%">&nbsp;</td>
<td width="5%" id="leftbar">&nbsp;</td>
<td width="15%">
<table border="0">
<tr>
<td><a href="admin.php">Home</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">League Table</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="insert_data_form.php">Add</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="delete_data_form.php">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">League Information</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">Tournament Information</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Add</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="adminheaders">Goalscorer Information</td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Add</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Update</a></td>
</tr>
<tr>
<td><img src="arrow.jpg" border="0"/><a href="update_data_form.php">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="logout.php">Logout</a></td>
</tr>
</table>
</td>
<td colspan="2" width="65%">
<table border="1" width="100%">
<tr>
</td>
<td width="5%" id="rightbar">&nbsp;</td>
<td width="5%">&nbsp;</td>
</tr>
<tr>
<td width='5%'>&nbsp;</td>
<td width='5%' id="bottomleft" height="70">&nbsp;</td>
<td width='80%' colspan='3' id="bottombar">&nbsp;</td>
<td width='5%' id="bottomright" height="70">&nbsp;</td>
<td width='5%'>&nbsp;</td>
</tr>
<tr>
<td colspan="7" align="center"><p class="footer">&copy; <?php $date1 = date('l jS'); $date2 = date('F Y'); echo $date1." of ".$date2;?> Konyaruddo</p></td>
</tr>
</table>
</body>
</html>
    This is the CSS that is involed with this HTML:

    Code:
    #topbar {
	background-image: url('top.jpg');
	background-repeat: repeat-x;
}
#topleft {
	background-image: url('top_left.jpg');
	background-repeat: no-repeat;
	background-position: left top;
}
#topright {
	background-image: url('top_right.jpg');
	background-repeat: no-repeat;
	background-position: right top;
}
#bottomright {
	background-image: url('bottom_right.jpg');
	background-repeat: no-repeat;
	background-position: right bottom;
}
#bottomleft {
	background-image: url('bottom_left.jpg');
	background-repeat: no-repeat;
	background-position: left bottom;
}
#leftbar{
	background-image: url('left.jpg');
	background-repeat: repeat-y;
}
#rightbar{
	background-image: url('right.jpg');
	background-repeat: repeat-y;
	background-position: right;
}
#bottombar{
	background-image: url('bottom.jpg');
	background-repeat: repeat-x;
	background-position: bottom;
}
p.footer {
	font-family: arial, verdana, helvetica;
	font-size: 9pt;
}
span.login {
	font-family: arial, verdana, helvetica;
	font-size: 9pt;
}
#maintable {
	empty-cells:show;
}
.adminheaders {
	font-family: arial, verdana, helvetica;
	font-size: 9pt;
	font-weight: bold;
}
    I have to apologise if this code is really lengthy but I wanted to include all of the HTML and CSS involved as i wanted anyone that is reading this to be aware of any possible dependencies.

    I have tried reading across forums and performed google searches on this problem but I cannot figure this problem out. Any help regarding this would be greatly appreciated.
    Reply With Quote Reply With Quote
  2. 07-28-2011 07:12 AM #2
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    You table is wrong formatted. At a first glance I saw an extra, useless end tag </td>, which closes nothing.

    Code:
    ...
...
<td colspan="2" width="65&#37;">
<table border="1" width="100%">
<tr>
</td>
<td width="5%" id="rightbar">&nbsp;</td>
<td width="5%">&nbsp;</td>
</tr>
...
...
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  3. 07-28-2011 07:34 AM #3
    daz_omega
    daz_omega is offline Registered User
    Join Date
    Jul 2011
    Posts
    4

    Removed extra tag

    Thanks Kor, I have removed this extra ending td tag but it still displays incorrectly. I read an interesting article on this web forum about using divs within td cells and that seems to work in places although internet explorer still does not display the td cells in the correct manner.
    Reply With Quote Reply With Quote
  4. 07-28-2011 07:36 AM #4
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    I don't think so.

    Let's see the whole picture. can you post a link to a test page? You have some images and some PHP variables there which we can not reproduce, thus we need to see the full code in action.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  5. 07-28-2011 07:45 AM #5
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    On the other hand, without being specified, tables get various cellspacing and cellpadding values. You have some tables there without cellspacing and cellpadding.

    But, yes, it is true. You should have not used such an intricate table in table in table architecture. Tables are used only for tabular data, not for graphical display. For display you should use DIVs and SPANs and so on, and CSS

    Give a google for "TABLE with CSS", or something like that.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  6. 07-28-2011 08:16 AM #6
    daz_omega
    daz_omega is offline Registered User
    Join Date
    Jul 2011
    Posts
    4

    massive realization

    OK thats big news to me! I thought that embedding graphics into tables was how it was supposed to be done! I am currently working on my localhost, but I agree it would be a lot more usefuil if you could see what the display was doing. Ill send you a link to my server later, thanks Kor.
    Reply With Quote Reply With Quote
  7. 07-28-2011 08:34 AM #7
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    http://www.decloak.com/dev/csstables/css_tables_01.aspx
    http://www.dev-archive.net/articles/table-in-css.html
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
  8. 07-28-2011 10:46 AM #8
    Frank62
    Frank62 is offline Used Register
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    You table is wrong formatted.
    Indeed. See if this works better:
    HTML 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>
  <title><?php echo $title; ?></title>
  <link rel="stylesheet" type="text/css" href="ss_styles.css" />
</head>

<body>
  <table border="0" width="100%">
    <tr>
      <td><img src="logo.jpg" border="0" /></td>
    </tr>
  </table>

  <table id="maintable" border="0" width="100%" cellspacing="0" cellpadding=
  "0">
    <tr>
      <td width="5%">*</td>
      <td width="5%">*</td>
      <td width="15%">*</td>
      <td width="50%">*</td>
      <td width="15%"><span class='login'>Logged in as
      <?php $_SESSION['valid_user']." ?></span></td>
      <td width='5%'>*</td>
      <td width='5%'>*</td>
    </tr>
    <tr>
      <td width='5%'>*</td>
      <td id='topleft' width='70' height='70'>*</td>
      <td id='topbar' width='80%' colspan='3'>*</td>
      <td id='topright' width='70' height='70'>*</td>
      <td width='5%'>*</td>
    </tr>
    <tr>
      <td width="5%">*</td>
      <td width="5%" id="leftbar">*</td>
      <td width="15%">
        <table border="0">
          <tr>
            <td><a href="admin.php">Home</a></td>
          </tr>
          <tr>
            <td>*</td>
          </tr>
          <tr>
            <td class="adminheaders">League Table</td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "insert_data_form.php">Add</a></td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Update</a></td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "delete_data_form.php">Delete</a></td>
          </tr>
          <tr>
            <td>*</td>
          </tr>
          <tr>
            <td class="adminheaders">League Information</td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Update</a></td>
          </tr>
          <tr>
            <td>*</td>
          </tr>
          <tr>
            <td class="adminheaders">Tournament Information</td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Add</a></td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Update</a></td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Delete</a></td>
          </tr>
          <tr>
            <td>*</td>
          </tr>
          <tr>
            <td class="adminheaders">Goalscorer Information</td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Add</a></td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Update</a></td>
          </tr>
          <tr>
            <td><img src="arrow.jpg" border="0" /><a href=
            "update_data_form.php">Delete</a></td>
          </tr>
          <tr>
            <td>*</td>
          </tr>
          <tr>
            <td><a href="logout.php">Logout</a></td>
          </tr>
        </table>
      </td>
      <td colspan="2" width="65%">
        <table border="1" width="100%">
          <tr>
            <td width="5%" id="rightbar">*</td>
            <td width="5%">*</td>
          </tr>
          <tr>
            <td width='5%'>*</td>
            <td width='5%' id="bottomleft" height="70">*</td>
            <td width='80%' colspan='3' id="bottombar">*</td>
            <td width='5%' id="bottomright" height="70">*</td>
            <td width='5%'>*</td>
          </tr>
          <tr>
            <td colspan="7" align="center">
              <p class="footer">©
              <?php $date1 = date('l jS'); $date2 = date('F Y'); echo $date1." of ".$date2;?>
              Konyaruddo</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
    (It's not about the spatial but about the semantic formatting.)
    R.,
    Frank

    Please report back how suggestions worked out.
    Reply With Quote Reply With Quote
  9. 07-29-2011 12:56 PM #9
    daz_omega
    daz_omega is offline Registered User
    Join Date
    Jul 2011
    Posts
    4

    link to code in action

    thanks frank62 and Kor, I will need to take a look into this in the meantime though the link to the page is at: http://www.konyaruddo.co.uk/stockers...login_form.php

    its quite a basic page but I will post back onto here if I am still experiencing problems with the HTML formatting after having tried out your suggestions.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Tags for this Thread

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles