Question

Internet explorer Tables issue... <TD width='100px'> no longer works.

Asked by: hpdvs2

I have a site, that has worked just fine until IE 6.  (The supporting background code has been being built up for some time)

The basic html table no longer works.  

Here is the isolated code:

<table width=100%><tr><td width='100px'>Menu</td><td width=*>Contents</td></tr></table>

The problem is that the table is split closer to 50%, instead of 100px.    so far, only percentages seem to work for the width.  

this works in any browser but IE 6.  

Any Clue how to get the table width to get set to 100px  (100 pixels)?

site::
http://gigaMonsters.com/alpha/webform1.aspx

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2005-12-10 at 18:13:50ID21660480
Tags

width

,

td

,

table

,

explorer

,

internet

Topic

Hypertext Markup Language (HTML)

Participating Experts
3
Points
500
Comments
10

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. Mixing pixel and percentage table dimensions
    I was wondering if it's possible to mix pixel and percentage table dimensions. For example, I want to have a page with multiple colums set to percentages so the table expands to fit any resolution. Lets say I want these colums to have a single pixel TD with the background set...
  2. Can't set a fixed TD width in Netscape
    I need to create a table with several columns. The table must fill the entire width of the page and the leftmost column must be 65 pixels wide. No matter what I do, Netscape makes the column whatever width it chooses. Here's a very simple example that doesn't work in Netsc...
  3. Giving two <td>'s the same width
    On my page i've made a div-menu, and this works fine. But how do I get the table used in this dropdown menu to be just as many pixels wide as the <td> used in the static menu where the width is a percentage (<td width=16%>) of the screen? Is this possible at all? ...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: JohnModigPosted on 2005-12-10 at 19:13:36ID: 15460847

Hi hpdvs2.
Your document is not excatly well-formed. First of all - to make it look the same in different browsers you need to start your code with a DOCTYPE: http://www.alistapart.com/articles/doctype/ Next, to be in line with the current standards, I strongly advice you to not use tables for layout. A few reasons why: http://phrogz.net/CSS/WhyTablesAreBadForLayout.html Today, the standards leans towards using semantic correct HTLM and CSS. This means: spearate content from presentation. Why? The primary reason for having a web site is to deliver content to your customer. In addition to the never ending browser wars, today you have a wide variety of devices connecting to your web page. CSS layout allows you to deliver content intelligently to any number of devices. A proper CSS layout will benefit your site users because:
- Files will  download faster (less code, no overall tables, valid code)
- Content is accessible to wider range of users (normal users, blind users, vision impaired users, dislexic users, motor skill impaired users etc)
- Content is accessible to wider range of devices (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges etc)
- Allows users to customize site appearance (style switchers)
- Provides print friendly versions for all pages
- Websites will be easier to work with for multiple developers (cleaner code, easier to understand)

So, to make a site similar to your example using above standards, the code will look something like this:
------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Layout test</title>
<style type="text/css" title="currentStyle" media="all">
body {
margin: 0px;
font: small verdana;
color: #000;
}
#menu {
float: left;
position: relative;
width: 100px;
height: 500px;
background-color: #0000FF;
}
#main {
position: relative;
width: auto;
height: auto;
}
#footer {
clear: both;
position: relative;
width: auto;
height: auto;
}
</style>
</head>
<body>

<div id="menu">
Menu
</div>

<div id="main">
Hello World!
</div>

<div id="footer">
Footer
</div>

</body>
</html>
------------------------------------
As you can see, it is all in the CSS. And then I am sure 100px will work :)

Regards,
John

 

by: hpdvs2Posted on 2005-12-10 at 19:30:14ID: 15460875

actually, hiding the width settings in the CSS did not work, as I have already experimented with this.  IE6 still has this issue on setting the width of a TD.

Second off, Using Div's instead of tables is very unsafe for css/javascript between browser types.  I recently did a lot of work for porsche trying to clean up these issues.  

I tend to stay away from Div's because of all those issues.  As you will notice, the very same site we are posting our content to at this moment is running off of tables to designate content positioning.  

I am more looking for an answer that may explain why such a simple table is not working in IE's version 6 browser.  

 

by: JohnModigPosted on 2005-12-10 at 20:04:48ID: 15460936

>> Using Div's instead of tables is very unsafe for css/javascript between browser types.

I am sorry, but I do not agree. CSS is by far the most browser-friendly way to design the layout of a website. Besides from the reasons stated in the link in my previous post, it is good design practice to use divs/css instead of tables, especially in a team maintained website. It is also the official recommendation from the W3C since 1998. So if seven year old recommendations are still being ignored it points to a lack of understanding on some developers part.
- From W3C:
"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."


>> I tend to stay away from Div's because of all those issues.

To me, it is always amazing to see how much work it takes to make people believe in CSS and separating content from presentation. At first, I too had a hard time giving up the tables and (more importantly) understanding why I had to do so. It may seem more easily to use tables for layout, and the first day it may very well be. But, after you really start to use and understand CSS you will clearly see why this is the way to go. You will be able to change the way your website looks without messing around with the html (or the server side) code (just look at http://www.csszengarden.com/). To do a complete website makeover will be a no-brainer. Also, keep in mind all the accessible pros that rdivilbiss mentions in his previous post. I assume you want to create standards-compliant sites that looks the same in all browsers? Then CSS is the way to go - believe me, it is better to edit one CSS file, instead of messing around in all your html pages that Dreamweaver created for you. Another good point is that if you are multiple people working on a web project, a clean code is a must. I sometimes find myself redoing or developing websites that someone else initially created, and then spending hours of valuable time just to figure out what the original code does. "If only everyone were using web standards and clean code" is a common thought I have in these situations. Dreamweaver is a great learning tool, but when you want to take your coding to the next level, you have to start thinking beyond the code that the program can suggest.

This is the artcle that convinced me to start write cleaner code and ditch the tables: http://www.alistapart.com/articles/journey/

"If you think about it, there are two ways to create standards-compliant sites: one that complies with the letter of web standards, and the other that complies with their spirit."

Best regards,
John

 

by: JohnModigPosted on 2005-12-10 at 20:16:26ID: 15460959

>> I am more looking for an answer that may explain why such a simple table is not working in IE's version 6 browser.

Oh, I forgot that part, sorry. Here we go - change this code:
--------------
<table width=100%><tr><td width='100px'>Menu</td><td width=*>Contents</td></tr></table>
--------------
...to this:
--------------
<table width="100%"><tr><td width="100px">Menu</td><td width="90%">Contents</td></tr></table>
--------------

John

 

by: hpdvs2Posted on 2005-12-10 at 20:23:38ID: 15460968

Considering the links you provided, I will provide my own conclusions based on the "Why Tables Are Bad"

# Tables are usually more bytes of markup. (Longer to download, and more bytes of traffic for the host.)
---The bytes of markup it takes to send this are nothing compared to the average images/media located on an ordinary sites template.  
---Most people these days do no connect at less than 56k, and even in cases of 14K, this is not a notable difference to using alternatives


# Tables are usually slower to layout for the browser. (Takes longer for the user to see anything on the page.)
---This is entirely incorrect, as the position that pages gets loaded can be determined by servers broadcasting smaller sections through good programming practices with ASP of PHP.  Even table segments may be loaded, as it will be recognized, even as demonstrated on Experts-exchange

# Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)
---This is the same as the previous question, as the previous question primarily depends on this question.  The previous answer discusses both.

# Tables may require you to chop single, logical images into multiple ones. (This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
---I cannot deny nor agree with this...  Tables can be used to split images, and re-display them with content to be used on top of it in design, but this is not a nessacary practice, as CSS provides relative positioning, inwhich tables may be positioned exclusively within another.



# Tables break text copying on some browsers. (That's annoying to the user.)
---Tables, Divs, and spans will break the pages against this in similar manners.  Usually, the content is broken apart logically by the separators layout.  At which points where the data is actually returned in less than copyable methods, then 1 of 2 things are to blame. 1 the designer is making a horiible use of content deviding, in whichcase will probably face the same issues if similar practices are used with Spans or Divs.  and #2, the page is designed to prevent viewers from copying its contents in an easy to read manner.


# Tables prevent certain layouts from working within them (like height:100% for child elements of <td>). (They limit what you can actually do in terms of layout.)
---Tables can be split and split and split.  If you have diffictulty positioning things within a table, you probably shouldn't be attempting to write a definitive list of reasons not to use tables


# Once you know CSS, table-based layouts usually take more time to implement. (A little effort up-front learning CSS pays off heavily in the end.)
---CSS is truly a flexible and powerful feature in web-page design, however, it is not intended to replace anything.  It is intended to expand and provide more universal and flexible modifications to all HTML Display Features.


# Tables are semantically incorrect markup for layout. (They describe the presentation, not the content.)
---If you take CSS out of the picture, Divs/Spans also do not describe these without the use of CSS Names, or HTML notes.  and With CSS, neither the Divs, spans, or tables are at the same advantage.


# Tables make life hell for those using screen readers. (Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
---Agreed.  however, separating the content with Divs will cause the same issue.  so this question, (like most otheres here is geared towards the question, "Should we have content layout, or use pages the scroll everything like a text file?"


# Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.
---Again, the same issues will occur with Divs or other methods of content separation.  The HTML+CSS Still requires the use of DIV/TABLE/SPAN.


Basically, I don't have any issue with people who use this.  This note is really just to express that there is not an effective difference between the two, and in some cases Tables do work better, in others, Div's work better.  It really depends on what your focus is for building up web pages.  

 

by: webwomanPosted on 2005-12-10 at 20:23:58ID: 15460971

Better yet, don't mix px and percent in the table. Either fix the width for the table, or just fix the width of that cell and NONE of the others.

But I'd go with divs and CSS as well.

Don't expect pixel perfection. You won't get it anyway, and you'll stay sane longer. ;-)

 

by: webwomanPosted on 2005-12-10 at 20:29:14ID: 15460976

Is that URL truly the page? Because it bears NO resemblence to the code you posted. None.

You have no quotes around attributes, for one. They NEED to be there. You have FONT tags, which are deprecated, you have nested tables which are completely screwing up your layout, and you're inconsistent in your measurements. And I have no clue what your stylesheet is screwing up.

 

by: bartonjo2Posted on 2005-12-10 at 20:35:06ID: 15460981

<html><head><title></title><link rel=stylesheet href='Styles.css'><head><body bgcolor=#FFFFFF leftmargin=0 rightmargin=0 bottommargin=0 topmargin=0><form action='/alpha/webform1.aspx' method='post'><table width=100% height=100% cellpadding=0 cellspacing=0><tr><td colspan=2 height='38px'><table border=0 width=100% cellpadding=0 cellspacing=0><tr><td width=100><a href='default.asp'><img border=0 src='images/logo.small.jpg' alt='gigaMonsters'></a></td><td align=right width=* valign=top><font class='LoginText'>USERNAME:</font><input type=text class='LoginBox' name='UserName'>&nbsp;&nbsp;<font class='LoginText'>PASSWORD:</font><input type=password class='LoginBox' name='PassWord'><input type=submit name='cmdLogin' value='Login'></td></tr></table></td></tr><tr><td width="100" valign=top ><table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100" bgcolor="#0000FF">&nbsp;</td>
  </tr>
</table></td>
<td width='862'>Hello World!</td>
</tr><tr><td height=25px colspan=2>Footer</td></tr></table></body></html>




try that code out. it should work all fine.

 

by: hpdvs2Posted on 2005-12-10 at 20:37:05ID: 15460984

I tested your last idea, to use " instead of '  which also did not work.  I have found in a few places so far that IE has had issues with this in V6 that hasn't been repaired yet.  I'm looking for a way to get tables work.  

Regarding your previous statement about how "CSS is by far the most browser-friendly way to design the layout of a website"...

I have had a great deal of time spent repairing this Browser-friendly method of site design using CSS, and DIVS.  Not to mention just text modifications with it.  The porsche site uses an extensive amount of CSS to designate a VERY SPECIFIC format.  If you review there CSS files, you will notice that there are Multiple instances of CSS Class names on a couple of there classes, The class is the same name, but one uses a special character that IE will count as being part of the same CSS Class name, where Netscape/Mozilla based browsers ignore.  

Thanks to the constant growth, and development of most HTML supporting Markup Languages, by different companies, These different Markup languages have inevidably grown differently within the different browsers, Like HTML's layout in General, CSS (as demon strated here), Java on different devices, Javascript on different browsers or OS's.  To speficy that one of these is better in ALL circumstances, is no more than an opinion.  

 

by: hpdvs2Posted on 2005-12-10 at 20:51:19ID: 15461007

Thank you for the assistance.  

Some of you suggested that I change my perspective regarding Tables.  As I feel I have expressed clearly, and possess the experience of working with Both Div's and Tables, and with the complexities of CSS that some didn't even realise existed, I have chosen Not to work with DIV statements.  In some cases with Javascript, I would infact use DIV Stantments, but the common page layout will typically be done with tables.    Thanks for the resposne that were not opinionated, but based on facts.  

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...