View Full Version : Table Width Problem in IE

02-17-2005, 09:23 PM
I'm having a bit of trouble with table widths in IE. Here's the page in question:

If you look at the page in IE, you will see that the left and right sides do not stay the size I have indicated, instead the columns stretch out into the center column.

Netscape shows it the way I WANT it to look. Which is very odd to me. Usually it's Netscape I have the biggest problem with.

I have searched the net trying to find ways of fixing this to no avail. Any help would be greatly appreciated!

Matt Tyree

02-17-2005, 11:30 PM
I took a look, but got lost in all the tables.

You'll get more help if you start by indenting and nesting your elements so the source is more readable.

Second, moving all your background-images, widths, colors, and other formatting to a stylesheet would make isolating your problem much easier.


02-17-2005, 11:40 PM
Thats what happned with me, too. Semantic coding can be harder at first, but pays off in the long run

Dan [running from cliche police] :D

02-17-2005, 11:40 PM
Hmmm, about the only experience I have with CSS is links and a few other very specific uses. I'm not very familiar with using CSS for backgrounds, etc.

As for the coding. I use Dreamweaver and it shows everything indented. When I view the source in IE and Netscape it shows it indented as well. Only problem with IE is that the word wrap in Notepad makes it a bit jumbled. What else should I do to make the code easier to read?

Thanks for the reply...let me know what I can do to make it easier for you to look at.


02-17-2005, 11:41 PM
Semantic coding? Man, I thought I actually knew something about HTML...but "semantic" is a new word for me! :-D

02-17-2005, 11:45 PM
Same with me, until this thread...



Say, would you look at that! I'm a regular old er.. ah.. Regular now @CF!

02-18-2005, 12:01 AM
Okay, I'm kinda lost as to what semantics really are. Even after reading your thread.

I gather that the premise is to not use tables...to use tags like <h1> and <p>

To tell you the truth, I have no clue how to do the things I do with tables any other way.

As for the <h1> tags...I hate using those things. I want more control over the size of my text, etc. So, why is using <h1> better than just defining the size of the text in CSS?

I'm so confused! :D

02-18-2005, 12:14 AM
You would be wise to learn CSS. Once you have done it once you will never go back to the old nested table sceme. It can be frustrating at first because of cross browser issues but in the long run your code will be cleaner and search engines will like you more.

02-18-2005, 12:20 AM
I guess I won't really know the advantages til I actually do it. I'm just ignorant of the reasons why to switch.

So, would there be around my original problem using CSS?

02-18-2005, 12:34 AM
Hi Tyree,

First of all, I'd try to help with the table problem but I have a Mac, and debugging IE on Virtual PC is crazy talk. So, I'm not being a semantics snob, I'm just trying to help out on the one thing I can here :D.

About semantics, and using h1 vs. something else...

The movement to separation of style and content, and the "semantic web" is to make the "structure" part of your webpage actually have some of it. It's not that tables are evil-- it's that using them to layout your webpage is a hack, and ruins the semantics of your page. Here's an example, taken from your source:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td align="left">
<div class="imagetitle">Image Title</div>
<td align="center">
<div class="prevnextlinks">
<a href="javascript:;">&lt; previous image</a> || <a href="javascript:;">next image &gt;</a>
<td align="right">
<font size="2" face="Arial, Helvetica, sans-serif"><a href="javascript:;">Gallery Index </a></font>

What the browser, or Google, or a screen reader, etc is reading is something like this:

Okay, I got a table full of data, one table row, a table cell with data aligned to the left, a division of the page with "Image Title" in it, another table cell full of data, a division of the page in this table cell, the data is centered, a link, a link, another table cell, a link...

Paraphrasing, yes. Plus, I guess I picked a weird example, because it's a pretty arbitrary part of your webpage. But you get the picture. Now, you could markup this a little more semantically...

<dt>Drach Tyranus</dt>
<dd><img src="DT.gif" /></dd>

<ul id="gallery_nav">
<li><a href="#">previous image</a></li>
<li><a href="#">next image</a></li>
<li class="index"><a href="#">gallery index</a></li>

and now what the browser is reading is this...

Let's see... I have a definition list... the definition term is "Drach Tyranus," and the description is this photo of Drach Tyranus. Now I have a list, the first list item is a link to the previous image. The next list item is a link to the next image. The third list item is a link to the gallery index. Okay!

As you see, I tried to pick a way to mark up the content that actually described what the content was. What CSS does is apply the style of the page to those elements in the HTML, so your markup isn't cluttered with visual trickery.

Hopefully this explains things a little more when you dig into the wide world of the semantic web...

02-18-2005, 12:41 AM
Since it looks like you're just getting started with this site, now would be a great time to get away from the tables.

Fixing your particular problem will probably mean starting over from scratch. If you decide to go that way, here's a head start, and of course ask as you run into more issues.

Change the paths to your images of course.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<style type="text/css">
html, body { padding:0; margin:0; }

#header { background:url(top_fill.gif); height:107px; }

h1 { float:right; margin:0; padding:0; }

#logo { float:left; }

#ani_matt { float:left; }

.clear { clear:both; }

#footer_nav li { display:inline; }

<div id="header">
<h1><img src="tyreeonline.gif" alt="Tyree Online" /></h1>
<img src="tyree_logo.gif" id="logo" alt="" />
<img src="animated_matt.gif" id="ani_matt" alt="" />
<div class="clear"></div>

<!-- navigation -->
<li><a href="#">Illustrations</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>

<h2>Subject for the following paragraphs</h2>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

<!-- footer -->
<ul id="footer_nav">
<li><a href="#">Illustrations</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>


02-18-2005, 12:44 AM
Since you're already using Dreamweaver, here's an explanation of the benefits of CSS on Macromedia.com.


02-18-2005, 01:32 AM
I am seeing some of the benefits from reading different articles on the web. However, at the moment, virtually all of this is Greek to me! :)

It will take a LOT of getting used to. I can make sense of alot of what you wrote, but some of it is beyond me.

How does all of this react to php? The whole site will be php driven in the end with dynamic areas within the pages.

Man o man...my mind is whirling around in circles right now!

02-18-2005, 01:39 AM
The PHP shouldn't be a concern as far as this goes.

Whatever you're doing with PHP will have happened before the page is ever served. Whether it's got a .php or .html extension, the .css will interact with your HTML elements in the same way.