Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Why is the table less wide than the div when they both have the same width?

Reply
Thread Tools

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

 
 
Robert
Guest
Posts: n/a
 
      06-23-2006
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_expanded grip"
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_expanded chevron"
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>

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      06-24-2006
In article
<(E-Mail Removed) .com>,
"Robert" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Rik
Guest
Posts: n/a
 
      06-24-2006
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


 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      06-24-2006
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>

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-24-2006
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
 
Reply With Quote
 
Rik
Guest
Posts: n/a
 
      06-24-2006
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


 
Reply With Quote
 
Frank Olieu
Guest
Posts: n/a
 
      06-24-2006
"Rik" <(E-Mail Removed)> wrote in
news:47fc6$449d4911$8259c69c$(E-Mail Removed) :

> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-24-2006
Frank Olieu wrote:
> "Rik" <(E-Mail Removed)> wrote in
> news:47fc6$449d4911$8259c69c$(E-Mail Removed) :
>
>> 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
 
Reply With Quote
 
Rik
Guest
Posts: n/a
 
      06-24-2006
Jonathan N. Little wrote:
> Frank Olieu wrote:
>> "Rik" <(E-Mail Removed)> wrote in
>> news:47fc6$449d4911$8259c69c$(E-Mail Removed) :
>>
>>> 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


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-24-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

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 Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Wide gamut vs less wide gamut monitors PeterN Digital Photography 51 03-01-2013 05:58 PM
Re: Wide gamut vs less wide gamut monitors Wolfgang Weisselberg Digital Photography 0 03-01-2013 05:43 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
"Virtual" wide angle via stitching seems to have less distortion rowan194 Digital Photography 22 07-01-2006 11:12 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments