About this page

IE displaying (table) cell widths incorrectly

This is a discussion on "IE displaying (table) cell widths incorrectly" within the Web Page Design section. This forum, and the thread "IE displaying (table) cell widths incorrectly are both part of the Design Your Website category.

Forum

Blogs

Articles, Tutorials, Tips

Shop

More

Register

Contact Us

Todays Posts

Frequently Asked Questions

Members List

Welcome, Guest!
Sign up today for free and start
reaping the benefits that thousands
of members are raving about!

Register to receive less adverts

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
IE displaying (table) cell widths incorrectly

Notices

Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.

Reply

#1 (permalink)

Old

Apr 2nd, 2007, 07:17

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

IE displaying (table) cell widths incorrectly

I believe I'm encountering an IE bug, but I can't find anything about it anywhere on the web, so I'm hoping someone can shed some light on this (and hopefully point me toward a workaround.)

The problem is that IE is rendering table cells much wider than they should be. I'm guessing it has something to do with my use of background images via CSS.

The general idea is to frame individual posts on a message board with (what looks like) glowing neon tube frames - but IE is screwing it up BADLY.

I'm not doing anything (in either html or css) that's terribly out of the ordinary. (At least I don't think I am.) Here's the html (I'm not posting all of it, but enough for the problem to be apparent.)

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>e-Medley Message Board -  - DHS Class of 1957 - 50th Class Reunion</title>
<link rel="stylesheet" type="text/css" href="dhs_57.css" />
</head>
<body>
    <table id='em_post' cellspacing='0'>
           <tr>
               <td colspan='10'><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley' /></td>
           </tr>
           <tr>
               <td><img src='img/frame-ulcorner-pinkneon.gif' height='18' width='18' alt='' /></td>
               <td colspan='8'><img src='img/frame-horiz-pinkneon.gif' height='18' width='436' alt='' /></td>
               <td><img src='img/frame-urcorner-pinkneon.gif' height='18' width='18' alt='' /></td>
           </tr>
           <tr>
               <td id='em_neonside' width='18'><img src='img/clr.gif' height='1' width='18' alt='' /></td>
               <td>&nbsp;</td>
               <td colspan='7'>on Friday, March 30, 2007 at 4:38 PM</td>
               <td id='em_neonside' width='18'><img src='img/clr.gif' height='1' width='18' alt='' /></td>
           </tr>
    </table>
</body>
</html>

and here's the corresponding CSS:

Code: Select all

body,
html {
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 15px 0;
    padding: 0;
    background-color: #fff;
    color: #000;
}

body {
    min-width: 700px;
}

#em_post {
    width: 472px;
    margin-left: 6px;
    border: 0;
    padding: 0;
}

#em_post td {
    margin: 0;
    border: 0;
    padding: 0;
}

#em_neonside {
    width: 18px;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(img/frame-vert-pinkneon.gif) repeat-y;
}

and finally, here are links to view the problem live. (If you view it in IE. It looks fine on Firefox.)
http://stickpuppy.com/dhs57/_wtf.htm
http://stickpuppy.com/dhs57/_wtfb.com
(The second link puts a border around all the table cells to really demonstrate the problem.)

I hope someone can help me on this. I've spent 48 of the last 60 hours fighting this bugger and I've already missed a deadline.

Evil or Very Mad

Thanks for taking a look.

Last edited by Donny Bahama; Apr 3rd, 2007 at 00:09. Reason: Original title does not reflect problem accurately

Reply With Quote

#2 (permalink)

Old

Apr 2nd, 2007, 11:47

Lchad

Lchad is offline

SuperMember

SuperMember

Join Date: Sep 2006

Location: Pink House

Posts: 3,946

Thanks: 0

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Donny neither of the links you posted are working and the code you provided doesn't shed enough light since I can't see your background graphics.

If you can get the links to work, that would be helpful.

Reply With Quote

#3 (permalink)

Old

Apr 2nd, 2007, 14:11

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

I think they're working now, but I'll post them again just in case...
http://stickpuppy.com/dhs57/_wtf.htm
http://stickpuppy.com/dhs57/_wtfb.com

Reply With Quote

#4 (permalink)

Old

Apr 2nd, 2007, 14:29

karinne

karinne is offline

SuperMember

SuperMember

Join Date: Jan 2007

Location: You know where

Age: 31

Posts: 4,617

Thanks: 0

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

What's with all the /> ?!?! You have an HTML Transitional DOCTYPE! Not XHTML!

Change it to HTML Strict and remove all those />

As for your neon thing. I would put all the top curvy thing as one image image and apply that as a background to that top row then the sides as background to the middle row.

Reply With Quote

#5 (permalink)

Old

Apr 2nd, 2007, 14:36

Lchad

Lchad is offline

SuperMember

SuperMember

Join Date: Sep 2006

Location: Pink House

Posts: 3,946

Thanks: 0

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Code: Select all

<td colspan='8'><img src='img/frame-horiz-pinkneon.gif' height='18' width='436'

Your vertical pink neon graphic is 436px wide. That's why it's wide.

You really should be using div classes instead of tables. I'm not actually sure how you'd code a table cell with a flexible width.

If you used div classes you'd have have just a snippet of that graphic as the div background and repeat-x.
Then it would just fill up whatever the cell width is and not make it a mandatory 436 in width.

Reply With Quote

#6 (permalink)

Old

Apr 2nd, 2007, 15:04

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Quote:

Originally Posted by karinne

View Post

What's with all the /> ?!?! You have an HTML Transitional DOCTYPE! Not XHTML!

This is one page of many on the site and the vast majority of the site is XHTML Strict, so I guess it's just force of habit. (Probably not a good excuse.

)

Quote:

Change it to HTML Strict and remove all those />

As for your neon thing. I would put all the top curvy thing as one image image and apply that as a background to that top row then the sides as background to the middle row.

I tried both of those measures (don't know why I didn't think to merge the three top elements into one!

) but it didn't really help much. IE is still rendering the side cells (with the bg images) much wider than they should be, thus screwing up the whole thing.

(See http://stickpuppy.com/dhs57/_wtf2.htm - but be sure to use IE.)

Reply With Quote

#7 (permalink)

Old

Apr 2nd, 2007, 15:17

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Quote:

Originally Posted by Lchad

View Post

Code: Select all

<td colspan='8'><img src='img/frame-horiz-pinkneon.gif' height='18' width='436'

Your vertical pink neon graphic is 436px wide. That's why it's wide.

It's supposed to be. I guess some clarification is in order. This page is a simple message board, with alternate posts having alternating neon frames. Here's a screenshot of what it looks like (when rendered properly in FF):

Quote:

You really should be using div classes instead of tables. I'm not actually sure how you'd code a table cell with a flexible width.

While I've posted just a snippet of the html - which was all that was needed to demonstrate the problem, the actual page is dynamic (php) and is generated from a MySql database. The structure of each post would make using DIVs a nightmare, IMO, as I would need multiple layers of wrappers and would start to run into IE's float bug (and probably others). Still, if I can't get to the bottom of what's going on here, I may have no other choice.

Quote:

If you used div classes you'd have have just a snippet of that graphic as the div background and repeat-x. Then it would just fill up whatever the cell width is and not make it a mandatory 436 in width.

That's what I'm using for the side neon elements (only with repeat-y) and I think that's what IE is choking on. I don't need to use a div background with repeat-x since it's a fixed width table.

Reply With Quote

#8 (permalink)

Old

Apr 2nd, 2007, 16:25

Lchad

Lchad is offline

SuperMember

SuperMember

Join Date: Sep 2006

Location: Pink House

Posts: 3,946

Thanks: 0

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Thanks for the clarification. I needed that

Your table should be 3 columns, currently you have four.
Try this

Code: Select all

<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3"><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley' /></td>
  </tr>
  <tr>
    <td colspan="3"><img src='img/frame-top-pinkneon.gif' height='18' width='472' alt='' /></td>
  </tr>
  <tr>
    <td width="19"><img src='img/clr.gif' height='1' width='18' alt='' /></td>
    <td width="429">&nbsp;</td>
    <td width="24"><img src='img/clr.gif' height='1' width='18' alt='' /></td>
  </tr>
</table>

It's not perfect because the graphic in the top row is 452pix wide and the neon vertical is 472 pixels wide.

Reply With Quote

#9 (permalink)

Old

Apr 2nd, 2007, 16:43

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Hmmm. Thanks for the help, but I'm not sure where you came up with those numbers...

The table needs to be 472px wide, and that's what's being specified in CSS. (See #em_post.) The two side cells (containing the vertical neon frame elements) need to be exactly 18px - and I'm specifying that in html:

HTML: Select all

<td id='em_neonside' width='18'>

- but IE still wants to make these two cells wider.

Also, in the finished product, there are a total of 10 columns necessary (which is why R2C3 has a colspan of 7).

Last edited by Donny Bahama; Apr 2nd, 2007 at 16:47.

Reply With Quote

#10 (permalink)

Old

Apr 2nd, 2007, 16:52

karinne

karinne is offline

SuperMember

SuperMember

Join Date: Jan 2007

Location: You know where

Age: 31

Posts: 4,617

Thanks: 0

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Change

Code: Select all

<td id="em_neonside">

to

Code: Select all

<td class="em_neonside">

and in your css change

Code: Select all

#em_neonside {

to

Code: Select all

.em_neonside {

And you might want to change you em_post from an id to a class too since you'll be using this more than once if you document.

Reply With Quote

#11 (permalink)

Old

Apr 2nd, 2007, 17:38

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Thanks, Karinne. em_post is actually only used once. (It formats the table.)

While I appreciate the good catch (and I've fixed it), this minor semantic issue doesn't resolve the main issue. Feel free to check out the updated version: http://stickpuppy.com/dhs57/_wtf2.htm

Reply With Quote

#12 (permalink)

Old

Apr 2nd, 2007, 17:42

Lchad

Lchad is offline

SuperMember

SuperMember

Join Date: Sep 2006

Location: Pink House

Posts: 3,946

Thanks: 0

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

I would suggest you set the width on each cell

Code: Select all

<td colspan='7'>on Friday, March 30, 2007 at 4:38 PM</td>

You should have a width. I think you are having spacing issues because the cells do not add up to the total width of the table.

Reply With Quote

#13 (permalink)

Old

Apr 3rd, 2007, 00:05

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Quote:

Originally Posted by Lchad

View Post

I would suggest you set the width on each cell

Code: Select all

<td colspan='7'>on Friday, March 30, 2007 at 4:38 PM</td>

You should have a width. I think you are having spacing issues because the cells do not add up to the total width of the table.

OK... believe it or not, that doesn't fix it, either!

I did finally get to the bottom of this, though. I'll document it for posterity...

You're actually part right - a width *is* needed on every cell in a row once a total width has been defined for the table itself.

BUT - you can't have unnecessary colspans - even if all the widths are defined properly.

This works:

Code: Select all

    <table id='em_post' cellspacing='0' width='472'>
           <tr>
               <td colspan='3'><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley'></td>
           </tr>
           <tr>
               <td colspan='3'><img src='img/frame-top-pinkneon.gif' height='18' width='472' alt=''></td>
           </tr>
           <tr>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
               <td width='436'>on Friday, March 30, 2007 at 4:38 PM</td>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
           </tr>
    </table>

This does not:

Code: Select all

    <table id='em_post' cellspacing='0' width='472'>
           <tr>
               <td colspan='4'><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley'></td>
           </tr>
           <tr>
               <td colspan='4'><img src='img/frame-top-pinkneon.gif' height='18' width='472' alt=''></td>
           </tr>
           <tr>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
               <td>&nbsp;</td>
                <td width='431'>on Friday, March 30, 2007 at 4:38 PM</td>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
           </tr>
    </table>

(because the 2nd cell in row 3 has no width defined.) But this does:

Code: Select all

    <table id='em_post' cellspacing='0' width='472'>
            <tr>
                <td colspan='4'><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley'></td>
            </tr>
            <tr>
                <td colspan='4'><img src='img/frame-top-pinkneon.gif' height='18' width='472' alt=''></td>
            </tr>
            <tr>
                <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
                <td width='5'>&nbsp;</td>
                 <td width='431'>on Friday, March 30, 2007 at 4:38 PM</td>
                <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
            </tr>
     </table>

Even though all the cell widths are defined, this does not work:

Code: Select all

    <table id='em_post' cellspacing='0' width='472'>
           <tr>
               <td colspan='7'><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley'></td>
           </tr>
           <tr>
               <td colspan='7'><img src='img/frame-top-pinkneon.gif' height='18' width='472' alt=''></td>
           </tr>
           <tr>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
               <td width='5'></td>
               <td width='426' colspan='3'>on Friday, March 30, 2007 at 4:38 PM</td>
               <td width='5'></td>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
           </tr>
    </table>

unless you add a subsequent row that justifies the existence of that "colspan=3" in the middle cell of row 3. This works:

Code: Select all

    <table id='em_post' cellspacing='0' width='472'>
           <tr>
               <td colspan='7'><img src='img/classof57e-medley.gif' width='450' height='70' alt='Class of 57 e-Medley'></td>
           </tr>
           <tr>
               <td colspan='7'><img src='img/frame-top-pinkneon.gif' height='18' width='472' alt=''></td>
           </tr>
           <tr>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
               <td width='5'></td>
               <td width='426' colspan='3'>on Friday, March 30, 2007 at 4:38 PM</td>
               <td width='5'></td>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
           </tr>
           <tr>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
               <td width='5'></td>
               <td width='100'>whatever</td>
               <td width='226'>whatever</td>
               <td width='100'>whatever</td>
               <td width='5'></td>
               <td class='em_neonside'><img src='img/clr.gif' height='1' width='18' alt=''></td>
           </tr>
    </table>

So, there you have it.

Evil or Very Mad

I HATE IE.

Evil or Very Mad

Reply With Quote

#14 (permalink)

Old

Apr 3rd, 2007, 00:14

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: Bug in IE display of td background image?

Moderators: As it turns out, the issue here had nothing whatsoever to do with the display of background images. For those who might need to find this post due to a similar problem, I suggest the title be changed so that they don't overlook it based on its inaccurate title. I tried to change it to "IE displaying (table) cell widths incorrectly" but it only changed the title of my first post (and not the topic title as displayed in the forum topic list.)

Reply With Quote

#15 (permalink)

Old

Apr 3rd, 2007, 14:23

masonbarge masonbarge is offline

masonbarge is offline

Highly Reputable Member

Join Date: Jan 2006

Location: Atlanta GA

Posts: 631

Thanks: 0

Thanked 0 Times in 0 Posts

Re: IE displaying (table) cell widths incorrectly

Have you tried using <col>?

I will say, at this point, I have stopped using tables and table commands for anything but a big mass of data (for which tables/php/sql kick butt). It takes more front-end work coding the divs but the result renders faster and is a lot more flexible.

PS I'll take IE7's handling of nested/floating div's any day.

Reply With Quote

#16 (permalink)

Old

Apr 3rd, 2007, 14:54

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: IE displaying (table) cell widths incorrectly

I didn't know about col, but now that I've taken a look, it looks like it would be a nice solution. Thanks, Mason!

I agree with you regarding the use of tables - I only use them when I'm going to display a lot of data queried from a db. (But this is just such a situation.)

Reply With Quote

#17 (permalink)

Old

Apr 3rd, 2007, 17:05

Donny Bahama Donny Bahama is offline

Donny Bahama is offline

Reputable Member

Join Date: Mar 2005

Location: Margaritaville (a state of mind somewhere between Inebriation and San Diego), CA

Posts: 233

Thanks: 4

Thanked 0 Times in 0 Posts

Re: IE displaying (table) cell widths incorrectly

I had already (before seeing mason's post) recoded the page, defining widths for each and every cell - and it worked great, but I decided to experiment with the col tag just for the heck of it. I took the simplest route first, adding

Code: Select all

<col width='18'><col span='5' width='436'><col width='18'>

and stripping out all the specific width definitions. This should have worked (according to the spec for the col tag) but it didn't. However, eliminating the span on the middle (set of) column(s) and defining the width for each column in the table did work:

Code: Select all

<col width='18'><col width='85'><col width='85'><col width='89'><col width='88'><col width='89'><col width='18'>

. I will definitely be making use of the col tag in the future whenever I use tables. Thanks again, mason!

Last edited by Donny Bahama; Apr 3rd, 2007 at 17:10. Reason: Clarification of workaround

Reply With Quote

Reply

Tags

table width, table, ie bug, cell width

« problem with my website | Tables are not evil!!! »

Thread Tools
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Trackbacks are On Pingbacks are On Refbacks are On

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
putting a forum into a table cell?	GeekyBabe	PHP Forum	9	Jan 30th, 2008 09:45
Horizontal drop down in table cell	gribble	JavaScript Forum	1	Mar 5th, 2007 20:31
How to force table cell widths	AdRock	Web Page Design	1	Sep 7th, 2006 14:54
Table cell not stretching	julie	Web Page Design	3	May 18th, 2006 01:48
Table cell (NO)wrap?	ktsirig	Web Page Design	4	Sep 28th, 2005 19:49

All times are GMT. The time now is 09:01.

Contact Us - Web Design & Development Forums - Archive - Top

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8

© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43