17 replies [Last post]
Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

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???!

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 1 week ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Left &amp; 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

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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?

Anonymous
Anonymous's picture
Guru

Left &amp; Right column floats in a table container

Ornette wrote:
What about the other thing I mentioned, about the layout of the page shifting left if and when I click on a link?
Is a scroll bar appearing? We need a link to see it in action.

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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:

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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?!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Left &amp; 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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:

but, you will also notice, the two tables contained within those DIV containers do not overflow outside! - no, they are clearly reduced in size! compare it to this, the same page, but with the 10px margin on the tables removed:

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?

[/][/][/]
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Left &amp; 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, … Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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, … Smile

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
Still, there is nothing there that suggests that table sizing should have otherwise any exceptions to the 'box-model' (content-box) referenced in section 8.1.... :?

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}
Although this doesn't quite fit the circumstances, it does seem to read to me that browser could basically derive the entire-width of the table space (content, padding, border and margin) from the available area of the containing box. However this doesn't really explain, because as a specific width was specfiied - 100% - this would mean the browser contradicting the 'fixed' sizing method - meaning Mozilla is not standards compliant in this instance!

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

[/][/][/]
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Left &amp; 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Left &amp; 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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Left &amp; Right column floats in a table container

Laughing out loud 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.Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; Right column floats in a table container

Chris..S wrote:
I take this to be the browser's get out of gaol free card
    w3c css2.1 17.5.2.2 wrote:
    ...in the case that 'table-layout' is 'auto';...
They can do what they want.

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!

Strange, I just put padding in the containing element but ended up with exactly the same thing as my first page... oh of course - the 'content-box' model dictates that the padding will be added to the elements total width! #-o

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.

[/][/][/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Left &amp; Right column floats in a table container

I'm glad you managed to get everything sorted. Smile

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.

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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.

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; Right column floats in a table container

Here you go, look at this in IE (correct behaviour) and then Mozilla...
Crying

http://www.tradezone.ltd.uk/testsite/template%20v2.1.6.htm

Ornette
Offline
Enthusiast
Last seen: 9 years 37 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Left &amp; 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