Why is the table less wide than the div when they both have the same width?

Discussion in 'HTML' started by Robert, Jun 24, 2006.

  1. Robert

    Robert Guest

    Probably something simple i'm overlooking, taking the below html and
    css style settings, when you view in a browser (IE or Mozilla for
    example), the table is a tiny bit less wide than the div. Yet I have
    set both to the exact same width (99%) and they have the same border
    settings. This also happens if i use a width like "800px".

    The desired effect is that the table be just above the div as a header
    and in the browser both should be the exact same width.


    Thx in advance.


    (Note i simplified the original html to get rid of as much as possible
    that was not relevant).


    <!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" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
    <table
    style="Cursor:hand;border-width:1px;border-style:Solid;border-color:Black;b­ackground-color:#FBF5C5;width:99%;border-bottom-width:0px;">

    <tr>
    <td align="left"
    id="ctl00_FormPlaceHolder_ExpandingPanel1_expandedgrip"
    style="width:1%;display:block;"><img src="/widsplus/something.gif"
    width="15" height="19" alt="" /></td><td
    class="greytextdarkboldlarge">More Search Options</td><td
    id="ctl00_FormPlaceHolder_ExpandingPanel1_expandedchevron"
    align="right" style="width:1%;display:block;"><img
    src="/widsplus/something.gif" width="25" height="19" alt="" /></td>
    </tr>
    </table><div id="ctl00_FormPlaceHolder_ExpandingPanel1"
    style="display:block;border-color:Black;border-width:1px;border-style:Solid­;width:99%;">

    <select name="ctl00$FormPlaceHolder$lbprioritytype">
    <option selected="selected" value="=">=</option>
    <option value="&lt;>">&lt;&gt;</option>
    <option value="NULL">Null</option>


    </select>
    </div>
    </body>
    </html>
    Robert, Jun 24, 2006
    #1
    1. Advertising

  2. Robert

    dorayme Guest

    In article
    <>,
    "Robert" <> wrote:

    > <!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" xml:lang="en" lang="en">
    > <head>
    > </head>
    > <body>
    > <table
    > style="Cursor:hand;border-width:1px;border-style:Solid;border-color:Black;b­ac
    > kground-color:#FBF5C5;width:99%;border-bottom-width:0px;">
    >
    > <tr>
    > <td align="left"


    etc

    Put this up on a server or else try to validate it... it has
    invalid property values ("hand" ????), you have dashes in things
    between b and ackground-color etc etc. Sharpen yourself up young
    man.

    --
    dorayme
    dorayme, Jun 24, 2006
    #2
    1. Advertising

  3. Robert

    Rik Guest

    dorayme wrote:
    > Put this up on a server or else try to validate it... it has
    > invalid property values ("hand" ????), you have dashes in things
    > between b and ackground-color etc etc. Sharpen yourself up young
    > man.


    I think those dashes are created in posting, not in the actual content.
    Anyway, to the op: when asking question, try to reproduce your 'error' in
    the least amount of code.

    In this case:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>asdlk</title>
    </head>
    <body>
    <table style="border:1px solid black;width:99%;">
    <tr>
    <td>More Search Options</td>
    </tr>
    </table>
    <div style="border:1px solid black;width:99%;">
    blaat
    </div>
    </body>
    </html>

    The problem here is that the border taken into account for the table when
    deciding the width, and added to the div element after the width has been
    decided. So the div will always be 2*border-width bigger. One should work
    with a percentual border in this case, and adjust one elements width to that
    percentage. That's badly supported though, and will result in disappearing
    borders on low resolutions.

    My workaround:
    - display both as block
    - don't give the elements that width, arrange it in <body> (or another
    containing element), or give left- and rightmargin.

    So either:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>asdlk</title>
    <style type="text/css">
    html, body{
    width:100%:
    }
    body{
    margin:0;
    padding: 0 0.5%;
    }
    </style>
    </head>
    <body>
    <table style="border:1px solid black;display:block;">
    <tr>
    <td style="background-color:white;">More Search Options</td>
    </tr>
    </table>
    <div style="border:1px solid black;">
    blaat
    </div>
    </body>
    </html>

    Or:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>asdlk</title>
    <style type="text/css">
    html, body{
    width:100%:
    padding:0;
    margin:0;
    }
    </style>
    </head>
    <body>
    <table style="border:1px solid black;display:block;margin:0 0.5%;">
    <tr>
    <td style="background-color:white;">More Search Options</td>
    </tr>
    </table>
    <div style="border:1px solid black;margin:0 0.5%;">
    blaat
    </div>
    </body>
    </html>

    Grtz,
    --
    Rik Wasmus
    Rik, Jun 24, 2006
    #3
  4. Robert

    mbstevens Guest

    On Fri, 23 Jun 2006 16:35:35 -0700, Robert wrote:

    > The desired effect is that the table be just above the div as a header
    > and in the browser both should be the exact same width.


    Have you tested it in more than a single browser?
    What browser?
    "exact same width."
    This is not going to happen in all browsers.

    > (Note i simplified the original html to get rid of as much as possible
    > that was not relevant).
    >


    As others have said, post it as a working page somewhere.
    You indentation style is just _bizarre_.
    Please fix it at least this much before posting so we can read it:

    >

    <!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" xml:lang="en" lang="en">

    <head>
    </head>

    <body>
    <table
    style=
    "Cursor:hand; /* bad idea */
    border-width:1px;
    border-style:Solid;
    border-color:Black;
    b­ackground-color:#FBF5C5;
    width:99%;
    border-bottom-width:0px;"> /* huh??? */
    <tr>
    <td align="left"
    ......
    ......
    </td>
    </tr>
    </table>

    <div id="ctl00_FormPlaceHolder_ExpandingPanel1"
    style=
    "display:block;
    border-color:Black;
    border-width:1px;
    border-style:Solid­;
    width:99%;">
    <!-- ??? Select makes no sense if not inside a form. -->
    <form ...... >
    .....
    <select name="ctl00$FormPlaceHolder$lbprioritytype">
    <option selected="selected"
    value="=">=</option>
    <option
    value="&lt;>">&lt;&gt;</option>
    <option
    value="NULL">Null</option>
    </select>
    </form>
    </div>

    </body>
    </html>
    mbstevens, Jun 24, 2006
    #4
  5. Re: Why is the table less wide than the div when they both have thesame width?

    Rik wrote:
    > dorayme wrote:
    >> Put this up on a server or else try to validate it... it has
    >> invalid property values ("hand" ????), you have dashes in things
    >> between b and ackground-color etc etc. Sharpen yourself up young
    >> man.

    >
    > I think those dashes are created in posting, not in the actual content.
    > Anyway, to the op: when asking question, try to reproduce your 'error' in
    > the least amount of code.
    >
    > In this case:
    > <!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" xml:lang="en" lang="en">
    > <head>
    > <title>asdlk</title>
    > </head>
    > <body>
    > <table style="border:1px solid black;width:99%;">
    > <tr>
    > <td>More Search Options</td>
    > </tr>
    > </table>
    > <div style="border:1px solid black;width:99%;">
    > blaat
    > </div>
    > </body>
    > </html>
    >
    > The problem here is that the border taken into account for the table when
    > deciding the width, and added to the div element after the width has been
    > decided. So the div will always be 2*border-width bigger. One should work
    > with a percentual border in this case, and adjust one elements width to that
    > percentage. That's badly supported though, and will result in disappearing
    > borders on low resolutions.
    >
    > My workaround:
    > - display both as block


    That make no sense, both DIV and TABLE are block by default, unless
    styled otherwise somewhere else (The arguamt for posting a YRL and not
    pasted code)

    > - don't give the elements that width, arrange it in <body> (or another
    > containing element), or give left- and rightmargin.


    I'd say the most likely culprit is the margin setting is different for
    TABLE and DIV by default for browser in question. Explicitly setting the
    margin and padding can usually fix it.
    <snip>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 24, 2006
    #5
  6. Robert

    Rik Guest

    Re: Why is the table less wide than the div when they both have the same width?

    Jonathan N. Little wrote:
    >> My workaround:
    >> - display both as block

    >
    > That make no sense, both DIV and TABLE are block by default, unless
    > styled otherwise somewhere else (The arguamt for posting a YRL and not
    > pasted code)


    In Opera, my tables won't automatically fils 100% of available width without
    display:block;, that's why I added it to the table, div is automaticcaly a
    100% width block in all my browsers indeed. Posted code is the entire code i
    used for checking.

    >> - don't give the elements that width, arrange it in <body> (or
    >> another containing element), or give left- and rightmargin.

    >
    > I'd say the most likely culprit is the margin setting is different for
    > TABLE and DIV by default for browser in question. Explicitly setting
    > the margin and padding can usually fix it.
    > <snip>


    Nope, tested it, with margin set to zero for html, body, div & table there
    is still a difference in width. 'Assume', 'usually', maybe some testing is
    in order before posting nonsense.

    I've only tested in FF (1.0.7, I'll have to update in the near future) &
    Opera (8.52) though, maybe MSIE renders it differently.

    Grtz,
    --
    Rik Wasmus
    Rik, Jun 24, 2006
    #6
  7. Robert

    Frank Olieu Guest

    Re: Why is the table less wide than the div when they both have the same width?

    "Rik" <> wrote in
    news:47fc6$449d4911$8259c69c$:

    > In Opera, my tables won't automatically fils 100% of available width
    > without display:block;


    > (...) tested it, with margin set to zero for html, body, div & table
    > there is still a difference in width.


    I think this makes sense, actually. Default style should be, according to W3C
    recommendation:
    for div: display:block
    for tables: display:table
    Browser vendors could then give them different values...

    --
    Venlig hilsen | Kind regards | Cordialement
    Frank
    Frank Olieu, Jun 24, 2006
    #7
  8. Re: Why is the table less wide than the div when they both have thesame width?

    Frank Olieu wrote:
    > "Rik" <> wrote in
    > news:47fc6$449d4911$8259c69c$:
    >
    >> In Opera, my tables won't automatically fils 100% of available width
    >> without display:block;


    Well it will but may be exactly doing what you think, whereas setting
    with width may be the more desirable method:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Width VS Block</title>

    <style type="text/css">
    ..bywidth { width: 100%; background-color: #FFD; }
    ..byblock { display: block; background-color: #FDF; }
    TD { background-color: #DFF; }
    </style>

    </head>
    <body>

    <table class="bywidth">
    <tr><td>left</td><td>By Width</td><td>right</td>
    </table>

    <table class="byblock">
    <tr><td>left</td><td>By Block</td><td>right</td>
    </table>

    </body>
    </html>


    >
    >> (...) tested it, with margin set to zero for html, body, div & table
    >> there is still a difference in width.

    >
    > I think this makes sense, actually. Default style should be, according to W3C
    > recommendation:
    > for div: display:block
    > for tables: display:table
    > Browser vendors could then give them different values...
    >

    Right DIV and TABLE are both block elements semantically per HTML spec
    like P and UL ..., my oversight was the CSS the different type of
    'block' display types... display: table & table-cell differ for other
    other block elements display: block where the dimensions adjust to fit
    content. DIV's sets to display: table-cell can often produce the effect
    many newbies are looking for when the try to convert the table layouts
    to CSS (but of course it doesn't work in MS IE).

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 24, 2006
    #8
  9. Robert

    Rik Guest

    Re: Why is the table less wide than the div when they both have the same width?

    Jonathan N. Little wrote:
    > Frank Olieu wrote:
    >> "Rik" <> wrote in
    >> news:47fc6$449d4911$8259c69c$:
    >>
    >>> In Opera, my tables won't automatically fils 100% of available width
    >>> without display:block;

    >
    > Well it will but may be exactly doing what you think, whereas setting
    > with width may be the more desirable method:


    The problem here was that setting width on a table of NOT 100% including a
    border resulted in a different width then a div set to the same width. I do
    grant you I hadn't tested is in MSIE before, and in that particular browser
    'display:block;' will still not make it 'grow' until the borders.

    Consider this (text-align:center; is for MSIE offcourse):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Width VS Block</title>

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

    }
    table,div{
    margin:0;
    padding:0;
    border: 1px solid black;
    }
    ..bywidth { width: 90%; background-color: #FFD; margin: 0 auto; }
    ..bymargin {background-color: #FDF; margin: 0 5%;}
    TD { background-color: #DFF; }
    </style>

    </head>
    <body>

    <h3>Setting an identical width</h3>
    <table class="bywidth">
    <tr><td>left</td><td>By Width</td><td>right</td>
    </table>
    <div class="bywidth">Blaat</div>

    <h3>Setting an identical margin with block</h3>
    <table class="bymargin" style="display:block;">
    <tr><td>left</td><td>By Block</td><td>right</td>
    </table>
    <div class="bymargin">Blaat</div>

    <h3>Setting an identical margin without block, without 100% Td</h3>
    <table class="bymargin">
    <tr><td>left</td><td>By Block</td><td>right</td>
    </table>
    <div class="bymargin">Blaat</div>

    <h3>Setting an identical margin without block, with 100% Td</h3>
    <table class="bymargin">
    <tr><td>left</td><td width="100%">By Block</td><td>right</td>
    </table>
    <div class="bymargin">Blaat</div>
    </body>
    </html>

    Browser presentation:
    http://www.rwasmus.nl/ff.png
    http://www.rwasmus.nl/opera.png
    http://www.rwasmus.nl/msie.png

    First without checking MSIE i thought setting display:block was enough, now
    it seems the only way is to add a 100% td.

    So, to summarize:
    - setting an identical width is NOT adequate.
    - setting a percentuel border is buggy.
    - setting an identical margin is in itself not adequate.
    - display:block could have saved is if not for MSIE.

    Answer to op's problem:
    In rendering a table browsers seem to take the width including the
    borderwidth, and on div's without borderwidth.

    Solution to op's proble"m:
    Use percentual margins, and make a table-cell 100%.

    Grtz,
    --
    Rik Wasmus
    Rik, Jun 24, 2006
    #9
  10. Re: Why is the table less wide than the div when they both have thesame width?

    Rik wrote:
    <snip>
    > Answer to op's problem:
    > In rendering a table browsers seem to take the width including the
    > borderwidth, and on div's without borderwidth.
    >
    > Solution to op's proble"m:
    > Use percentual margins, and make a table-cell 100%.


    Good work! I'll log that on in the old memory banks. Just for further
    info, the margin does not have to be a percent, just has to be set and
    set the same for both TABLE and DIV. And the table just has to have one
    cell per row set to 100%. For best practice should be in your CSS and
    not your markup:

    TD.inthemiddle { width: 100%; }

    ....
    <tr><td>left</td><td class="inthemiddle">By Margins</td><td>right</td>

    Of course if IE were a browser you could have eliminated the extra class
    all together with an adjacent sibling selectors

    /* sets the 2nd TD in table to 100% width not 'inthemiddle' needed */
    TABLE.bymargin TD + TD { width: 100% }


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 24, 2006
    #10
  11. Robert

    Rik Guest

    Re: Why is the table less wide than the div when they both have the same width?

    Jonathan N. Little wrote:
    > Rik wrote:
    > <snip>
    >> Answer to op's problem:
    >> In rendering a table browsers seem to take the width including the
    >> borderwidth, and on div's without borderwidth.
    >>
    >> Solution to op's proble"m:
    >> Use percentual margins, and make a table-cell 100%.

    >
    > Good work! I'll log that on in the old memory banks. Just for further
    > info, the margin does not have to be a percent, just has to be set and
    > set the same for both TABLE and DIV.


    Yup, but if the problem of OP was a fixed width, I'd have told him to reduse
    the size of the div by 2times borderwidth, which in this case would have
    been shorter.

    > And the table just has to have
    > one cell per row set to 100%. For best practice should be in your CSS
    > and not your markup:
    >
    > TD.inthemiddle { width: 100%; }


    Yup, only 1 is needed indeed.

    > ...
    > <tr><td>left</td><td class="inthemiddle">By Margins</td><td>right</td>
    >
    > Of course if IE were a browser you could have eliminated the extra
    > class all together with an adjacent sibling selectors
    >
    > /* sets the 2nd TD in table to 100% width not 'inthemiddle' needed
    > */ TABLE.bymargin TD + TD { width: 100% }


    If we're dreaming of css-compliancy, and taknng random cells, why not:
    table.bymargin td:first-child{width: 100%;}

    That would make the first cell 100%, regardless wether there are any other
    table-cells. Offcourse, if you have only one table-cell in very row of a
    table, one should think long and hard about wether it should be a table...
    Probably it an (un)orderded list is more apropriate.

    Grtz,
    --
    Rik Wasmus
    Rik, Jun 25, 2006
    #11
  12. Robert

    Rik Guest

    Re: Why is the table less wide than the div when they both have the same width?

    Rik wrote:
    > <something>



    Hmmz,

    I seem half drunk in that post, certainly when checking the spelling. It's
    clearly time for bed, tomorrow a new working day... Furtunately monday &
    tuesday are my personal weekend.

    Grtz,
    --
    Rik Wasmus
    Rik, Jun 25, 2006
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Web Developer

    char 8bit wide or 7bit wide in c++?

    Web Developer, Jul 31, 2003, in forum: C++
    Replies:
    2
    Views:
    574
    John Harrison
    Jul 31, 2003
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,762
    Smokey Grindel
    Dec 2, 2006
  3. Disc Magnet
    Replies:
    2
    Views:
    696
    Jukka K. Korpela
    May 15, 2010
  4. David A. Black
    Replies:
    2
    Views:
    213
    Tim Hunter
    Aug 19, 2004
  5. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    178
    David Dorward
    Jun 1, 2005
Loading...

Share This Page