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

R

Robert

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>
 
D

dorayme

Robert said:
<!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"
Click to expand...

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.
 
R

Rik

dorayme said:
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.
Click to expand...

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,
 
M

mbstevens

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.
Click to expand...

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).
Click to expand...

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>
 
J

Jonathan N. Little

Rik said:
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
Click to expand...

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.
Click to expand...

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>
 
R

Rik

Jonathan said:
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)
Click to expand...

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.
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>
Click to expand...

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,
 
F

Frank Olieu

In Opera, my tables won't automatically fils 100% of available width
without display:block;
Click to expand...
(...) tested it, with margin set to zero for html, body, div & table
there is still a difference in width.
Click to expand...

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...
 
J

Jonathan N. Little

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>
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...
Click to expand...
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).
 
R

Rik

Jonathan said:
Well it will but may be exactly doing what you think, whereas setting
with width may be the more desirable method:
Click to expand...

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,
 
J

Jonathan N. Little

Rik wrote:
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%.
Click to expand...

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% }
 
R

Rik

Jonathan said:
Rik wrote:


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.
Click to expand...

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%; }
Click to expand...

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% }
Click to expand...

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,
 
R

Rik

Rik said:
<something>
Click to expand...


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,
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image shifts to the right when export the page to pdf 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filter table rows based on multiple checkboxes value 2
Help with Visual Lightbox: Scripts 2
Having trouble centering contents of td ? 3
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Why is the e.target not working here? 1
Making Table Text wider (other than "width") 1

Members online

Total: 40 (members: 2, guests: 38)
Robots: 427

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top