Width of tables next to float

[dorayme]

I would appreciate suggestions for having the tables at

http://tinyurl.com/2mjd8m

to be the same width, preferably 100%, so that hell does not
break loose in IE 6 (I have no idea about IE 7?). No problem with
non IE modern browsers, simply table {...; width: 100%; ...} does
it.

#nav {... display: inline} seems to stop the hell. So does
conditionals that make IE override width as with:

table {width: 100%;} followed by

/*hide from IE mac\*/
* html table {width: 0}
/*end hide*/

or even (I think?)

/*hide from IE mac\*/
* html #content {height:1%;}
/*end hide*/

but this does not get the tables to be the same width in IE. The
first conditional above that in effect tells IE not to bother
about 100% is the one I have used elsewhere where I simply don't
bother about cross browser looks. But this time I want to see if
there is an easy way to have it all.

 

[Martin Jay]

I would appreciate suggestions for having the tables at

http://tinyurl.com/2mjd8m

to be the same width, preferably 100%, so that hell does not
break loose in IE 6 (I have no idea about IE 7?). No problem with
non IE modern browsers, simply table {...; width: 100%; ...} does
it.

I'm a little confused about what you want. Is this it:
<http://www.spam-free.org.uk/pages/centre_table.html>???

Two changes to your CSS were needed to achieve it:

table {margin-bottom: 2em; border: 2px solid #000; border-collapse:
collapse; width: 100%; }

and

#nav { font-size: 90%; position: absolute;}

Basically, the table is given a width of 100% and the #nav DIV is
positioned absolutely, rather than floated.

And for IE -- because it's stupid -- you'll also have to wrap the
'nav' DIV inside another DIV, like so:

<div>
<div id="nav">

[...]

</div>
</div>

 

[dorayme]

I'm a little confused about what you want. Is this it:
<http://www.spam-free.org.uk/pages/centre_table.html>???

Last time I looked, my code exposed an odd way that IE 6
calculated width. In the model I posted, If you add

table {width: 100%}

the content clearly cannot fit and drops down in IE 6.

What I want in IE is what you see in almost every modern
compliant browser when you add "width: 100%" to the table. In
particular I was hoping for a solution that kept the float. But I
appreciate your making the suggestion of absolute positioning and
might go your way if there is no simpler way to solve with a
float.

(btw, I have no absolute allegiance to floats. Just a childish
liking for them as they fondly remind me of playing with little
boats and things in my bath as a baby.)

 

[BootNic]

I would appreciate suggestions for having the tables at

http://tinyurl.com/2mjd8m

to be the same width, preferably 100%, so that hell does not
break loose in IE 6 (I have no idea about IE 7?). No problem with
non IE modern browsers, simply table {...; width: 100%; ...} does
it.

#nav {... display: inline} seems to stop the hell. So does
conditionals that make IE override width as with:

table {width: 100%;} followed by

If you set the tables at 100% width.

<!--[if lte IE 6]>
<style type="text/css">
#content {display:inline-block;}
</style>
<![endif]-->

 

[dorayme]

Last time I looked, my code exposed an odd way that IE 6
calculated width. In the model I posted, If you add

table {width: 100%}

the content clearly cannot fit and drops down in IE 6.

table {width:95% wrapped in a conditional for IEs eyes only
would be perhaps, good enough, for my purposes. But this is not
ideal though likely practical enough.

 

[rf]

As am I

Last time I looked, my code exposed an odd way that IE 6
calculated width. In the model I posted, If you add

table {width: 100%}

the content clearly cannot fit and drops down in IE 6.

So, why didn't you post a page where *you* had put the above width in,
rather than one that bears no resemblance at all to your description of "all
hell breaks loose"?

What I want in IE is what you see in almost every modern
compliant browser when you add "width: 100%" to the table.

No. *You* add width: 100% to the table and then *I* will look at it with IE.
It's probably one of the many known box model bugs. Hell, it could even be
the three pixel jog.

 

[Martin Jay]

Last time I looked, my code exposed an odd way that IE 6
calculated width. In the model I posted, If you add

table {width: 100%}

the content clearly cannot fit and drops down in IE 6.

What I want in IE is what you see in almost every modern
compliant browser when you add "width: 100%" to the table. In
particular I was hoping for a solution that kept the float. But I
appreciate your making the suggestion of absolute positioning and
might go your way if there is no simpler way to solve with a
float.

Something more like this?

<http://www.spam-free.org.uk/pages/centre_table2.html>

Added 'width: 100%' to table:

table {margin-bottom: 2em; border: 2px solid #000; border-collapse:
collapse; width: 100%}

Changed '#content' so that it's floated left:

#content { float: left;}

Given '#nav' a width of 7em:

#nav {float: left; font-size: 90%; width: 7em;}

These changes work fine in IE6 and IE7, but break in other browsers.

I don't do browser hacking, so I'll leave it up to you or someone else
to work out how to apply these changes so that only IE6 and IE7 see
them.

 

[Martin Jay]

<!--[if lte IE 6]>
<style type="text/css">
#content {display:inline-block;}
</style>
<![endif]-->

Oh yes. Neat solution.

 

[dorayme]

I would appreciate suggestions for having the tables at

http://tinyurl.com/2mjd8m

to be the same width, preferably 100%, so that hell does not
break loose in IE 6 (I have no idea about IE 7?). No problem with
non IE modern browsers, simply table {...; width: 100%; ...} does
it.

#nav {... display: inline} seems to stop the hell. So does
conditionals that make IE override width as with:

table {width: 100%;} followed by

If you set the tables at 100% width.

<!--[if lte IE 6]>
<style type="text/css">
#content {display:inline-block;}
</style>
<![endif]-->

Beauty! Works like a charm on my test on my IE 6, I assume no
problem on IE7? Thanks. I put it up for any interested person
having similar queries to see it working:

http://tinyurl.com/23xlf5

 

[dorayme]

"dorayme"

So, why didn't you post a page where *you* had put the above width in,
rather than one that bears no resemblance at all to your description of "all
hell breaks loose"?

Because, I guess, I thought some folk would immediately recognise
the essential trouble (IE miscalculating the width and dropping
the content).

About the all hell, this I _should_ have left out, it was not
something I needed to burden others with, if the drop could be
solved, that would be good enough for me. But then, I am not as
bloody perect as you. What do *you* know about asking a question
here that avoids every possible uncharitable and graceless
condemnation.

Besides, the real page:

<http://tinyurl.com/2cbavc>

would have confused the issue and frightened folk and caused
trouble of a different kind especially with dickheads like you
who look for every possible excuse to beat innocents like me up.

Anyway, 2Dogs, what's all this to *you*?

No. *You* add width: 100% to the table and then *I* will look at it with IE.

No, no, this is all wrong. *You* need to take the foul mouthed
advice you gave me in a recent address. (What is it with you? Is
it those purple pants?). *You* can climb right down from that
high horse, you pretentious schmuck. You can shove your *I* up.
Want to know how? How about:

<http://tinyurl.com/2gs2cz>

?

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Tue, 28 Aug 2007 22:38:54
GMT dorayme scribed:

How about:

<http://tinyurl.com/2gs2cz>

Whazzat, an Australian who thinks she's an ostrich?

 

[Chris Hughes]

Personally, I'd forget about the conditionals.

Setting display: block on a table should make it consume the entire
width on all browsers (I use it all the time on my own site). Setting
width: 100% conditionally on other browsers just makes it more
complex, and is ultimately redundant.

My personal opinion about relying on browser quirks (e.g. html * blah
{ ... }) is to avoid them at all costs, because you end up with
stylesheets that are difficult to maintain or even make sense of
unless you're a CSS guru. But take my comments with a grain of salt,
because I generally only support IE6 and above plus recent versions of
FF, Safari and Opera.

Chris
http://webdevfu.com

 

[rf]

Because, I guess, I thought some folk would immediately recognise
the essential trouble (IE miscalculating the width and dropping
the content).

Really? Well let's analyse your original post, but up front let us note that
the word dropping does not appear anywhere in your original post.

I would appreciate suggestions for having the tables at

http://tinyurl.com/2mjd8m

Fine. You present some tables. So far so good.

to be the same width, preferably 100%, so that hell does not
break loose in IE 6

Hell is breaking loose? Crikey, head for cover.

What sort of a bloody problem description is that. Imagine ringing up your
ISP and saying "Help, all hell has broken loose". They'd refer you to the
nearest exorcist.

(I have no idea about IE 7?). No problem with
non IE modern browsers, simply table {...; width: 100%; ...} does
it.

Apart from being somewhat incoherent, the entire above paragraph implies
that you have actually tried width: 100% and found it to be inadequate to
your needs. You still have not actually described what the problem is, other
than the loosed hell bit.

And you post a URL to a page that *does not* have that width: 100% in there.
This implies, arrogantly IMHO, that you expect each and every one of us to
immediately drop tools to download your entire page into some local file
system, open some editor (as firebug does not work in IE6) to add the width:
100% to your, hopefully correctly, downloaded code before any of us can see
what your actual problem is, assuming that it is not simply hell breaking
loose, which may or may not be visible but is sure to be, as is this post,
firey.

#nav {... display: inline} seems to stop the hell. So does
conditionals that make IE override width as with:

Ah, more work for us to do. Or is it guesswork. And here is this hell bit
again. Seems to me that Mr Satan is the person you should be sniping at
here.

table {width: 100%;} followed by

/*hide from IE mac\*/
* html table {width: 0}
/*end hide*/

And more work for us?

or even (I think?)

/*hide from IE mac\*/
* html #content {height:1%;}
/*end hide*/

You think. Don't you *know*? Did you not test it?

but this does not get the tables to be the same width in IE.

IE6 we must presume.

The
first conditional above that in effect tells IE not to bother
about 100% is the one I have used elsewhere where I simply don't
bother about cross browser looks. But this time I want to see if
there is an easy way to have it all.

Does the above have any actual bearing on your problem? The problem you have
not identified to us as yet (except for the hell bit, that is)?

Also you are waffling.

You have a problem with IE6. Why cloud the issue with mac ignoring stuff and
conditional comments and opinions about cross browser looks. First of all,
get the thing working in IE6.

</analysis>

Later on in this thread you state "the content clearly cannot fit and drops
down in IE 6". Ah, finally a description, sort of, what the problem is.
However you still do not provide a URL to a page that actually demonstrates
the problem. You are still expecting us to do actual work to even see the
problem you are bitching about.

Now comes the rest of the thread, after I have a poke at you for not asking
your question in a mannar that might allow us to immediately see what your
problem is.

About the all hell, this I _should_ have left out, it was not
something I needed to burden others with, if the drop could be
solved, that would be good enough for me.

Whatever this means I am a loss to fathom. What drop? Oh, you mean the
tables dropping down, a particular you did not even mention in your original
post, and have not yet provided an example of.

But then, I am not as
bloody perect as you.

Your opinion, but thank you for the complement.

What do *you* know about asking a question
here that avoids every possible uncharitable and graceless
condemnation.

There are any number of pages out there that explain exactly how to ask a
question in usenet. Google for them. They are even mentioned from time to
time here and in the other groups you frequent. They will tell you what I
know about asking questions here (not that I have had the occasion to do
so): foremostly state quite clearly and exactly what is wrong. All hell
breaking loose is not an explanation of what is wrong. Never has been. Never
will.

Besides, the real page:

<http://tinyurl.com/2cbavc>

Bizzare. You must be quite cranky to have spent all that time screwing up
your page ;-)

would have confused the issue

What issue. The only issue we have to hand from your OP is the looseness of
hell.

and frightened folk and caused
trouble of a different kind especially with dickheads like you

Ah, stawman argument. I was waiting for it

who look for every possible excuse to beat innocents like me up.

I'm not beating you up. I am beating up your post. I am having a polite go
at you for not correctly posing a usenet question, and also arrogantly
assuming that each and every one of us has spare time on our hands to
reproduce your problem on our own.

Anyway, 2Dogs, what's all this to *you*?

Wife used to drink 2dogs. Started giving her headeaches. She's into
StrongBow now and they have a nice picture of an archer on the cover, rather
than a couple of, er, dogs.

It's best to look at the *entire* contents of you viewfinder, small details
can really spoil your snaps:
http://barefile.com.au/2dogs.jpg

No, no, this is all wrong.

No, it is not. *You* have the problem. It is up to *you* to provide an
example of the problem. You should *not* expect each and every one of us to,
as I have said beforehand, download your code and amend it so as to
reproduce the problem. A problem which, we have seen, you had not even
identified to us, other than the hell stuff.

*You* need to take the foul mouthed

And the very first time I made what I though was an amusing reply to one of
your posts, a couple of years ago during the Luigi era, I was told to "piss
off".

advice you gave me in a recent address.

And that was in response to your unsolicited swipes at me in threads that I
had not even posted to. Even Neredbojias made note of the matter.

(What is it with you? Is
it those purple pants?). *You* can climb right down from that
high horse, you pretentious schmuck. You can shove your *I* up.
Want to know how? How about:

More staw.

<http://tinyurl.com/2gs2cz>

I have that picture in my library as well. Even got some girls

 

[Ben C]

Personally, I'd forget about the conditionals.

Setting display: block on a table should make it consume the entire
width on all browsers (I use it all the time on my own site).

But that's rather different from a table that's width: 100%.

If you make the table display: block, then, yes, its auto width fills
the available width. But the <tr> inside it is then put inside an
anonymous table with auto shrink-to-fit width.

You can see the effect if you try:

<table style="display: block; background-color: pink">
<tr>
<td style="background-color: green">foo</td>
</tr>
</table>

A big pink block, but a small green td, since the anonymous table around
the td shrinks to fit it.

If on the other hand you try

<table style="width: 100%; background-color: pink">
<tr>
<td style="background-color: green">foo</td>
</tr>
</table>

You get a big green td, since the table it's in is now 100% of the width
available (in Firefox, I haven't been following whether width: 100% on a
table has some problem in other browsers).

 

[dorayme]

Personally, I'd forget about the conditionals.

Setting display: block on a table should make it consume the entire
width on all browsers (I use it all the time on my own site). Setting
width: 100% conditionally on other browsers just makes it more
complex, and is ultimately redundant.

My personal opinion about relying on browser quirks (e.g. html * blah
{ ... }) is to avoid them at all costs, because you end up with
stylesheets that are difficult to maintain or even make sense of
unless you're a CSS guru. But take my comments with a grain of salt,
because I generally only support IE6 and above plus recent versions of
FF, Safari and Opera.

Chris
http://webdevfu.com

Thanks for this Chris, I am interested in your comments, support
for IE6 and other modern browsers is quite relevant, but what
more exactly are you responding to please? Setting width
conditionally on what browsers? Perhaps you refer, from my
memory, to my mentioning trying setting table {width: 100%;} and
then afterwards telling IE6 to forget about widths with, for IE
eyes only, table {width:0;}

 

[dorayme]

Really?

Yes really! If you were not so blinded by your ill will and need
to be narky, you would have seen this. It would not be something
everyone would have seen given that I should not have made the
hell remark. The remark came from some trouble I was having in a
more complicated application. I tried to help pinpoint the
trouble by my url without distracting folk with irrelevancies. I
carelessly forgot to remove references to the complicating
thoughts in my brain). It is quite amazing what people can see if
they lose their "attitudes". Please don't let it be true that you
cannot operate in life without your scumbag attitude, even if you
tried.

You see, the basic trouble, Richard, is that you are a bit of a
bastard. Analysis can go on for ever if you are the one making
the analysis because it latches on to your every prejudiced
interpretation... If it was not for these sad qualities, it would
have been something you would have been able to see because you
know something about these matters. But sadly, being the prick
you are, you could not. Your concentration is always on
magnifying the little things to satisfy some urge to find fault
with others. You get off on being uncharitable. Your brain gets
Attitude, much as IE gets hasLayout or whatever at various drops
of hat.

Well let's analyse your original post,

You pretentious prick! No matter what question anyone asks, you
would always be able to bloody well "analyse" how the question
could have been better asked.

but up front let us note that
the word dropping does not appear anywhere in your original post.

How many times would you care to note this?

<analysis>

I did not give anyone any work to do. If you cannot see what is
being said without having to try it, then this question is not
for you. Most of the alternatives I mentioned as routes to avoid
the IE problem were tried by me.

I was hoping that someone would recognise that IE does not
calculate widths in the same way as FF in the exact situation I
posted in the url. That the effect of adding table {width: 100%}
is to drop the table below the float (in the url given) and other
more complicated effects in other more complicated pages.

BTW, I am now warming a little bit towards Martin Jay's first
suggestion, in spite of having a way of avoiding the drop prob
with float. I should use a bit of absolute positioning more.

I had to laugh when you brought in Boji as an authority on
interpreting dorayme. Boji, for Christ's sake, is undergoing long
term therapy with me. He is a bloody patient of mine, you idiot.

Anyway, no point in chatting to a prick like you. Piss off.

Oh yeah I forgot, please don't mention Luigi again, you are not
worth even a hair of his armpit.

 

[Ed Mullen]

Oh yeah I forgot, please don't mention Luigi again, you are not
worth even a hair of his armpit.

I gotta remember that one for my vacation in Italy in late September.
I'll have to ask my sister to translate it for me so I can attempt to
relate it to my Italian cousins (whom I have never met) and see what
they think of it. Maybe I'll wait until after they serve dinner.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
After eating, do amphibians have to wait one hour before getting out of
the water?