Table has a shorter witdth in Firefox than IE

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hello Everybody,

I'm putting some input to a <div> area and under that area I'm adding a
table with one row in order to give a shadow effect.
The code is like this (cutting off unnecessary info):

<div class="title">'.$title.'</div>
<div class="text_intro">'.$text_intro.'</div>
<table style="margin-left: 20px;" width="580" border="0"
cellspacing="0" cellpadding="0">
  <tr><td align="left" class="intro_shadow">&nbsp;</td></tr>

CSS style:
       background: url(/images/intro_shadow.gif) no-repeat;
       vertical-align: top;
       width: 580px;
      margin-top: 10px;
      margin-right: 15px;
      margin-left: 20px;
      width: 580px;
      padding: 10px;

I'm getting the result that I want with Internet Explorer:
But the table is shorter than I expect in Firefox:

I tried background: url(/images/intro_shadow_2.gif) repeat-x;
(intro_shadow_2.gif has 3px width, intro_shadow has 614px width)
If I set the width of table to 600, then firefox is OK but the table is
longer than expected in IE.
If I use percentage, table shown by IE is still longer.

can anybody give some idea about how to fix this problem?
Eren Aykin

Re: Table has a shorter witdth in Firefox than IE

Okay, I used div instead of table and put "padding: 10px; " to
div.intro_shadow and the problem is fixed.
Seems like I disregarded the effect of padding.
Sorry for bothering,
Eren Aykin

Eren Aykin wrote:
Quoted text here. Click to load it

Site Timeline