div/bg color issue..

Ben C wrote:

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
Mark Hansen wrote:
On 06/18/09 13:16, maya wrote:
Mark Hansen wrote:
If what they're asking for doesn't seem reasonable, are you sure that's
not the answer they're looking for?
oh man.. I'm not sure about anything any more.. I've been looking for
work for months now and frankly am exhausted from this whole process,
from being given the run-around from recruiters all the time and
everything else... yes, like you say, this is probably a "trick
question".. oh well... maybe I should just do that mid-section with
tables and send it to them like that saying it's the only reasonable
option and whatever.. thank you...
It's probably best to be honest. Good luck with your job hunt.

Regards,

I have decided to do two versions, a 2nd one w/a table (just for that
mid-section..)
http://www.mayacove.com/dev/gucci_test.html

Why've you set vertical-align: middle on #header?

oops... I forgot take that out.. oh brother..

here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html
http://www.mayacove.com/dev/devlper_test/test_table.html
(with CSS in a separate sheet this time..)

It does nothing because you haven't set line-height. I wouldn't set
vertical-align on anything because only three people in the world
understand it. One of them is Eric Meyer, the second one went mad, and
the third one killed himself. It is a subject best avoided in a job
interview.

http://www.mayacove.com/dev/gucci_test_table.html
and let the chips fall where they may.. all HTML (XHTML) and CSS
validates in W3C validators..

Your "cool links" are a bit bogus. You've set a huge line-height which
is a problem if the text wraps, which it does if the font is made
slightly bigger. It doesn't help that #linkLeft and #linkRight have
fixed heights. Is there any need for that? I can't remember all the
details of the original assignment, but didn't it say (quite rightly)
that you weren't supposed to use non-auto height for anything?

Then you've also set padding on the As which effectively does nothing as
they are display: inline and have transparent backgrounds. Maybe this is
left over from earlier attempts that didn't use floats.

I will write them a nicely-worded note saying there's no way to do this
following their requirements w/o tables, that I sought the opinion of
CSS experts online, etc.. thank you all very much..

Well you should be able to tell them _why_ there's no way to do it
without tables (there are lots of ways in CSS, so the answer must be
because of certain things that don't work in IE, and so you should be
able to say which things).

I reckon you will get some credit for at least knowing how to do it in
CSS (in spite of IE) and extra credit for knowing roughly why it doesn't
work in IE (nobody knows precisely why anything doesn't work in IE).

maya wrote:

Beauregard T. Shagnasty wrote:
maya wrote:
I have decided to do two versions, a 2nd one w/a table (just for that
mid-section..)
http://www.mayacove.com/dev/gucci_test.html
http://www.mayacove.com/dev/gucci_test_table.html
and let the chips fall where they may.. all HTML (XHTML) and CSS
validates in W3C validators..

You seem to have ignored or overlooked the really simple solution
posted somewhere way back in this thread. It's reaaallly easy, and
even has a small workaround for earlier IE. This one:

http://www.nrkn.com/3ColEqualPositioned/

thank you.. yes I did see this example.. it uses
browser-conditionals.. my impression is that they didn't want
that....

So instead of telling them it can't be done, tell them "there's IE and
there's everyone else." Tell them IE is too broken to work without help.
If they are real developers, they will know this.

--
-bts
-Friends don't let friends drive Windows

maya wrote:

Beauregard T. Shagnasty wrote:
maya wrote:

I have decided to do two versions, a 2nd one w/a table (just for that
mid-section..)
http://www.mayacove.com/dev/gucci_test.html
http://www.mayacove.com/dev/gucci_test_table.html
and let the chips fall where they may.. all HTML (XHTML) and CSS
validates in W3C validators..

You seem to have ignored or overlooked the really simple solution posted
somewhere way back in this thread. It's reaaallly easy, and even has a
small workaround for earlier IE. This one:

http://www.nrkn.com/3ColEqualPositioned/

http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode

Jeff

thank you.. yes I did see this example.. it uses
browser-conditionals.. my impression is that they didn't want that....

In article <slrnh3lbbu.32l.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

1. Background images with repeat-y pretending to be column backgrounds.
2. Borders pretending to be column backgrounds.
3. Absolute positioning and z-index.
4. display: table-cell.
5. dorayme-style nesting (but you need to be able to rank the columns in
order of height)

1. It is so simple for some situations that it feels daft not using it.
The desire not to do it on some sort of purist grounds is fair enough
but I notice that Matthew Taylor rather over-eggs the pudding: "Why
waste bandwidth and precious HTTP requests when you can do everything in
pure CSS and XHTML?" One of the attractive features of this technique is
how very tiny the images need be, the repeat-y is just CSS.

2. I think you disapproved of this one a long while back. Seemed fair
comment but I rather like it because it is so nicely counterintuitive
yet solid enough. <g>

3. Seems a solid technique. As with many of these tableless column
techniques extra divs are required, something that I guess many of us
feel slightly compromised by in a rush from simple tables.

4. I have no comment on this at all. I merely weep and wish.

5. Mostly I know the ranks, tend not to use any templates. Personal
service is what I give. No wonder I'm not that cheap. <g>

6. Let's stick in HTML tables as a sixth even though the 5 you mention
are meant as alternatives to HTML tables. The biggest thing against
tables for columns - I am talking here just 3 cells and one row and
nothing else at all - is not the harder construction or ease of update,
it is a complete myth that these are real factors. Rather, the arguments
about adaptability to different viewing platforms or human non-visual
modalities. And perhaps arguments concerning search engine advantages.

It is not surprising how natural the desire for columning is. Perhaps,
the cross browser difficulties of it without tables should encourage
more of us to become less dependent on columns in the first place. You
know, "stop wanting them!". Out of adversity...

--
dorayme

In article <slrnh3ldm0.32l.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Overflow: hidden to contain floats doesn't work in IE so either you use
some obscure proprietary crap like "zoom: 1", or, more pragmatically,
just insert <div style="clear:both"></div> after the two columns and
don't use overflow: hidden.

It is *mainly* IE6 that is the problem and in IE6, if the container has
an explicit width, which it often does have, the problem of containing
floats does not arise, it does it (against the standards) naturally!

There are some workarounds. One you mention. The other is to give the
container an explicit width (100% is usually *good enough* even though
it is different to auto), or a hackish nominal height of 1px. With
either of these last two, and necessarily for the very last re height,
you can make the instruction for IE eyes only via a conditional.
(Perhaps this last is "proprietary crap" but it is surely not "obscure
proprietary crap" by now. <g>)

--
dorayme

In article <4a3966e5$1_2 (AT) news (DOT) bluewin.ch>,
John Hosking <John (AT) DELETE (DOT) Hosking.name.INVALID> wrote:

Or no absolute positioning (that I have detected) as at
http://matthewjamestaylor.com/blog/perfect-3-column.htm

I have never quite followed what problems the OP had with this one -
apart from minor matters like trying to find the template HTML and CSS.

--
dorayme

Ben C wrote:

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
Mark Hansen wrote:
On 06/18/09 13:16, maya wrote:
Mark Hansen wrote:
If what they're asking for doesn't seem reasonable, are you sure that's
not the answer they're looking for?
oh man.. I'm not sure about anything any more.. I've been looking for
work for months now and frankly am exhausted from this whole process,
from being given the run-around from recruiters all the time and
everything else... yes, like you say, this is probably a "trick
question".. oh well... maybe I should just do that mid-section with
tables and send it to them like that saying it's the only reasonable
option and whatever.. thank you...
It's probably best to be honest. Good luck with your job hunt.

Regards,

I have decided to do two versions, a 2nd one w/a table (just for that
mid-section..)
http://www.mayacove.com/dev/gucci_test.html

Why've you set vertical-align: middle on #header?

It does nothing because you haven't set line-height. I wouldn't set
vertical-align on anything because only three people in the world
understand it. One of them is Eric Meyer, the second one went mad, and
the third one killed himself. It is a subject best avoided in a job
interview.

Reminds me of that old line about there being only two ways to handle
a woman, and nobody knows either one.

Just a note on this, vertical-align works fine on td and th. Where it
is really handy is in inline-block. I've moved all my thumbnails/product
pages from floats to inline-block where vertical-align: top replicates
float: left without having to worry about whether a newline box floats
all the way left or gets hung up on a baseline somewhere.

I agree about vertical align and text.

Jeff

On 2009-06-19, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrnh3ldm0.32l.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Overflow: hidden to contain floats doesn't work in IE so either you use
some obscure proprietary crap like "zoom: 1", or, more pragmatically,
just insert <div style="clear:both"></div> after the two columns and
don't use overflow: hidden.

It is *mainly* IE6 that is the problem and in IE6, if the container has
an explicit width, which it often does have, the problem of containing
floats does not arise, it does it (against the standards) naturally!

There are some workarounds. One you mention. The other is to give the
container an explicit width (100% is usually *good enough* even though
it is different to auto), or a hackish nominal height of 1px. With
either of these last two, and necessarily for the very last re height,
you can make the instruction for IE eyes only via a conditional.
(Perhaps this last is "proprietary crap" but it is surely not "obscure
proprietary crap" by now. <g>)

Only "zoom:1" is proprietary crap. The other things are just skillful
use of bugs.

Proprietary crap is when you make up a property, don't prefix it with
-moz- or anything, and then act like the rest of the world are weird for
not implementing it.

On 2009-06-19, Jeff <jeff_thies (AT) att (DOT) net> wrote:

Ben C wrote:
[...]
It does nothing because you haven't set line-height. I wouldn't set
vertical-align on anything because only three people in the world
understand it. One of them is Eric Meyer, the second one went mad, and
the third one killed himself. It is a subject best avoided in a job
interview.

Reminds me of that old line about there being only two ways to handle
a woman, and nobody knows either one.

Just a note on this, vertical-align works fine on td and th.

Yes, and its behaviour there is useful and easy to understand.

Where it is really handy is in inline-block. I've moved all my
thumbnails/product pages from floats to inline-block where
vertical-align: top replicates float: left without having to worry
about whether a newline box floats all the way left or gets hung up on
a baseline somewhere.

Yes, that's another good use of it.

dorayme wrote:

In article <4a3966e5$1_2 (AT) news (DOT) bluewin.ch>, John Hosking wrote:

Or no absolute positioning (that I have detected) as at
http://matthewjamestaylor.com/blog/perfect-3-column.htm

I have never quite followed what problems the OP had with this one -
apart from minor matters like trying to find the template HTML and CSS.

I remain stumped as well, but I've stopped worrying about it so much. :-)

--
John
I've also learned to Love the Bomb.