Tue, 2006-02-07 04:38
Hello all.
I have a couple of funny things with this source code that I can't quite work out why it is doing that.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>xyz</title>
<style type="text/css">
table.hardscore {width: 98%; height: auto;}
table.panel {width: 100%; margin: 10px; border: medium dashed #ff0000;}
.contentcolumn {width: 66%; float: left; display: inline;}
.navcolumn {width: 34%; float: right; display: inline;}
</style>
</head>
<body>
<table class=hardscore><thead><tr><td>
Basic Page Header - will collapse if empty
</td></tr></thead><tbody><tr><td>
<a href="#">BACK TO INDEX PAGE</a>
<div class=contentcolumn>
<table class=panel><thead><tr><td>
<div class=paneltitle><a href="#">The Title</a></div>
</td></tr></thead><tbody><tr><td>
<div class=panelstyle>
<br />
Content and <a href="#">link</a><br />
<br />
</div>
</td></tr><tr><td>
<div class=posted>Posted by <a href="mailto:x">a person</A> </div>
</td></tr></tbody></table>
</div>
<div class=navcolumn>
<table class=panel><thead><tr><td>
<div class=paneltitle><a href="#">The Title</a></div>
</td></tr></thead><tbody><tr><td>
<div class=panelstyle><br />
Content and <a href="#">link</a><br />
<br /></div>
</td></tr><tr><td>
<div class=posted>Posted by <a href="mailto:x">a person</A></div>
</td></tr></tbody></table>
</div>
</td><tr><td>
<div class=copyright><A href="mailto:">xyz.com</a> © online :: 1999 - 2005</div>
<td></tr></tbody></table>
</body>
</html>
Its relatively simple, a table cell holds two DIV columns, the widths of which sum to 100% (of the containing table cell, right?). Then, each div column holds a table defined at 100% width, but with 10px margin.
So, when I load it in IE6 - what! - the right hand float drops down the page stuck under the bottom corner of the left hand float. Yet in Firefox, the page renders just as I want it - the two div columns side by side.
What is it that is causing the difference? Is it the box model thing I have read about? Or is it something else?
- - - - -
Admittedly I have worked around this problem by approaching it another way, but I would like to know what it is that is causing the difference.
Secondly, there is another issue that can be observed with this code, which this time, strangely, is with Firefox. If I click on any of the (empty) links, the entire page seems to 'shrink' slightly and shift leftwards!
What on earth is going on???!
Tue, 2006-02-07 04:57
#1
Left & Right column floats in a table container
definitely your box model. try taking away the margin see what happens.
You should start reading on the box model and really try to understand it well. Once you do then things will seem so much easier with developing css sites.
Also check out: http://css.maxdesign.com.au/floatutorial/
You shouldn't need a table on this design at all. You should just use two <div>s and float one left.
cheers
s
Tue, 2006-02-07 12:24
#2
Left & Right column floats in a table container
What about the other thing I mentioned, about the layout of the page shifting left if and when I click on a link?
Tue, 2006-02-07 13:22
#3
Left & Right column floats in a table container
Ornette wrote:
Is a scroll bar appearing? We need a link to see it in action. What about the other thing I mentioned, about the layout of the page shifting left if and when I click on a link?
Tue, 2006-02-07 16:25
#4
Left & Right column floats in a table container
No, there is no scroll bar appearing.
This is just in Firefox - check the link
http://www.tradezone.ltd.uk/testsite/template%20v2.1.1.htm
The links are all 'empty' so feel free to click on one. Watch how everything shifts ever so slightly to the left... :roll:
Wed, 2006-02-08 04:56
#5
Left & Right column floats in a table container
gleddy wrote:
definitely your box model. try taking away the margin see what happens.
You should start reading on the box model and really try to understand it well. Once you do then things will seem so much easier with developing css sites.
Gleddy,
Indeed, you are correct, and the 'margins' specified are what cause the right-hand float to drop down the page. (I had actually realised this previously, whilst going through the process of stripping down the code to isolate the problem before I posted here.)
As per your specific suggestion, I have analysed the box-model in further detail, and I can see that officially, neither the border-box (quirks) or content-box (standards) models include the 'margin' as part of the total measurement.
This then leads to the question - which I was kinda originally getting at - how come does Mozilla Firefox get this wrong?
Although it is rendering the page in just the manner that I actually want, it is clearly doing the incorrect thing. And that for once, IE is actually doing the right thing.
What do you make of that?!
Wed, 2006-02-08 05:20
#6
Left & Right column floats in a table container
Actually, Firefox got it right and IE screwed up. Remember that if the content of an element, the tables+margin in this case, are too wide, the overflow overflows. It does not improperly expand the container as does IE.
You can see this more clearly by including a loooooong unbreaking word in a fixed width element. IE will expand the element, while Firefox will correctly let it spill out.
cheers,
gary
Wed, 2006-02-08 23:34
#7
Left & Right column floats in a table container
kk5st wrote:
Actually, Firefox got it right and IE screwed up. Remember that if the content of an element, the tables+margin in this case, are too wide, the overflow overflows. It does not improperly expand the container as does IE.
You can see this more clearly by including a loooooong unbreaking word in a fixed width element. IE will expand the element, while Firefox will correctly let it spill out.
cheers,
gary
Gary,
Hi and thanks. Yes, you are correct, I have just looked up 'overflow' and for a fixed sized box, content should flow outside to the side or below, accordingly. (I assume that in Mozilla, if you wanted the box to resize to fit, you would use min-height & min-width to specify the size, right?)
I altered the code above as per your explanation to demonstrate this to myself:
Indeed in Mozilla, the contents spill out to the right, right across anything else that might have been there in the first place. And, as you explained should be the case, the actual containers (the two floated DIVs) stay in their place. And in IE, as you explained, it expands the actual DIV container (which it shouldn't) and results in the right-hand float nesling underneath the bottom edge of the left-hand float.However, that doesn't completely explain what is going on here. What I see for my first example is - yes - the two floated DIV containers do not expand, and therefore keep their positioning:
you can see that in the first instance, Mozilla has reduced the size of the tables by the amount of margin either side, to that it DOES fit into the available space.
Really, that is not correct, no? Can anyone explain?
[/][/][/]
Thu, 2006-02-09 02:01
#8
Left & Right column floats in a table container
I can only say that table sizing is weird. I don't work with them enough to be really sharp on how it all works. Loosely speaking, tables listen to your instructions unless space or content say otherwise. The rendering is always controlled by the necessity of showing the content in the available space. My own experience is that Firefox does this marginally better than IE, and Opera's tables always seem clunky to me.
See http://www.w3.org/TR/CSS21/tables.html and if you understand it all, … 
cheers,
gary
Sat, 2006-02-11 20:20
#9
Left & Right column floats in a table container
kk5st wrote:
I can only say that table sizing is weird... ...See http://www.w3.org/TR/CSS21/tables.html and if you understand it all, â¦
cheers,
gary
Gary,
Thanks again, I had a look up on the W3 site to try and figure why exactly Mozilla shinks these tables, instead of letting them 'overflow' As you pointed to CSS21 working draft, I thought I'd perhaps better start from beginning -
Looking at 'tables' from the HTML4 & 4.01, I read that "...When the value is a percentage value, the value is relative to the user agent's available horizontal space...". So, a 100% width table should be 100% of the available space... still, no mention of anything 'margins' at all, which I assume is a 'CSS' property only, so perhaps I better try and look that up.
Looking first to the CSS2 specs, the issue gets slightly confused because it details two CSS sizing methods for tables :-k. However, I saw that for 'fixed', it tells us that "...the table's width may be specified explicitly with the 'width' property...", referencing section 10.2 saying:
- <percentage> - Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block
Finally turning back to the CSS2.1 specs, it pretty much says the same thing... but it does hint to something being different with a mention about the possibility of having a 'auto' table width when used in 'fixed' sizing mode (section 17.5.2.1 ):
- If a UA supports fixed table layout when 'width' is 'auto', the following will (could) create a table that is 4em narrower than its containing block:
- table {table-layout: fixed; margin-left: 2em; margin-right: 2em}
Admittedly, section 17.5.2 does initially state "...CSS does not define an "optimal" layout for tables since, in many cases, what is optimal is a matter of taste...", that they may clarify the automatic sizing method further for CSS3, and that: "...Future versions of CSS may introduce ways of making tables automatically fit their containing blocks..."
But, if I did understand what I read there correctly, and unless current CSS3 drafts do specify this behaviour (and Mozilla is already implementing?), Mozilla is doing something wrong by reducing the size of the table according to the margins specified on either size.
(Something which, for me at least, is preferable... still - I thought that 'bending-the-W3-standards-to-make-them-friendly-to-the-lowest-common-denominator' was the domain of Microsoft, not Mozilla??!!)
Would anyone like to comment?
Regards,
Ornette
Sat, 2006-02-11 23:08
#10
Left & Right column floats in a table container
I'm just wondering whether there is not a fundamental error in thinking here that a table construct does indeed follow or is governed by the 'Box model' does a table not handle it's padding/margin properties slightly differently.
Hugo.
Sat, 2006-02-11 23:57
#11
Left & Right column floats in a table container
I take this to be the browser's get out of gaol free card
w3c css2.1 17.5.2.2 wrote:
In this algorithm (which generally requires no more than two passes), the table's width is given by the width of its columns (and intervening borders). This algorithm reflects the behavior of several popular HTML user agents at the writing of this specification. UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.
They can do what they want.
Sun, 2006-02-12 00:06
#12
Left & Right column floats in a table container
As I said, table sizing is weird. Besides, overflow overwrites any neighboring content. The table is 100%, while the margins are outside the containing box. What is the effect of margin space overwriting its neighbor?
Tables and overflow, it's a puzzlement.
cheers,
gary
Sun, 2006-02-12 12:39
#13
Left & Right column floats in a table container
Chris..S wrote:
I take this to be the browser's get out of gaol free cardThey can do what they want.
w3c css2.1 17.5.2.2 wrote:...in the case that 'table-layout' is 'auto';...
Not quite convinced about this, as table width was not 'auto' but 100%... Still, as a beginner I'm willing to let this slide! (Maybe if I was an old-hand I'd go & chase it up)
So, anyhow, reading all that stuff on tables made me think - this page of mine that does-it-how-I-want-it in Mozilla but not IE (i.e. shrinking the table to fit) - clearly the correct method isn't margins, but reducing the available space in the first place... padding!
Using the -moz-box-sizing: border-box and removing the doctype has solved the problem - both IE and Mozilla are now doing the page just as I like.
Sun, 2006-02-12 13:01
#14
Left & Right column floats in a table container
I'm glad you managed to get everything sorted.
Ornette wrote:
Not quite convinced about this, as table width was not 'auto' but 100%... Still, as a beginner I'm willing to let this slide! (Maybe if I was an old-hand I'd go & chase it up)
We're not talking about width, but "table-layout". Its a property all on its own, the default value is "auto" - the browser can layout the table as it likes.
Mon, 2006-02-13 07:53
#15
Left & Right column floats in a table container
Nope, you're not right.
I've just encountered another problem regarding margins on tables in Mozilla. Now I wanna use margin-top & margin-bottom to ensure a 10px gap, but Mozilla will not collapse!!!!
Mozilla IS not doing what it should in this case. For some reason it is using a 3rd, non-standard box model for tables, - i.e. a 'margin-box' model - why?
I mean, maybe a 'margin-box' model spec would be useful - but at least let me choose. This is just no good. Now what - I gotta enclose every table in a DIV and put the margin on that?
And before you ask, I did try putting in 'table-layout: fixed' in my CSS and no joy.
Mon, 2006-02-13 07:58
#16
Left & Right column floats in a table container
Here you go, look at this in IE (correct behaviour) and then Mozilla...
Thu, 2006-05-25 23:31
#17
Left & Right column floats in a table container
Hey everyone, thanks for the help. Check out my finished results.
Don't look to closely at the source code because you will see it has been right compromised... still much of what I have done here could not have been done without your helps. Thank you.
http://www.hardscore.com/articles/lazerdrome/
P.S. That is my friends web site, only the lazerdrome stuff is mine