div/bg color issue..

Mark Hansen wrote:

On 06/18/09 12:31, maya wrote:
Jeff wrote:
Nik Coughlin wrote:
"maya" <maya778899 (AT) yahoo (DOT) com> wrote in message
news:Cq6dnUbIWJEJ4qTXnZ2dnUVZ_tydnZ2d (AT) giganews (DOT) com...
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found
after running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my
project..
You can't do it unless you use browser-conditionals, JavaScript or tables
Dorayme has some tricks if you know one column is going to be the
longest, that are very easy. Usually the main oolumn is and you can set
min-height for short content pages.

I almost always use js as all I have to do is name the equal height
columns with equal in a classname. But I don't care if there is a short
column in a js off browser.

I don't see the issue with conditionals though as it usually only
affects IE and is considered kosher by IE. There's lots of things, like
flash embeds, or ajax calls, where the IE method is different. They
aren't hacks, it's just IEs way of being different.

I'm done with tables, except for forms and data. Much happier!

Jeff

actually with img-bg's it also doesn't work for me..
http://www.mayacove.com/dev/layout.html
(did the same way as here, http://www.manisheriar.com/holygrail/index.htm

CONFESSION: this was actually for a test for a job....
(oh....... you must be thinking, NOW I know why requirement is so
unreasonable...

here is "assignment" and "mockup" they sent:
http://www.mayacove.com/dev/assignment.html
in case you're curious.. I think they just wanted XHTML and CSS code,
that's it, no imgs, no JavaScript.. (however, as you will note if you
check out the assignment, there is also a requirement to chg bg-color
for the links on mouseover (but: for the divs CONTAINING the links, not
merely the links.. this would have to be done w/JavaScript, since IE 6
doesn't support :hover for divs.. (and: <a>'s aren't block elements, you
can't set width and height for them, I tried with padding and
line-height and stuff for the <a>'s, but that's not too reliable
cross-browser-wise... oh brother..)

I agree with respondents here who say you can't do w/o tables and/or
JS.. I'm all for div-based layouts, I think they're more elegant, all
that jazz.. but I don't get trying to fit a square into a circle...

so: pondering what/how I should respond to these folks.... obviously
they demanded the impossible here, as a way to gauge reactions,
approaches, etc.. I suppose.. in this job market I suppose employers
can afford to be unreasonable and mess with folks' minds....

any comments???? thank you again to everyone for your responses..


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

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,

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:

Jeff wrote:
Nik Coughlin wrote:
"maya" <maya778899 (AT) yahoo (DOT) com> wrote in message
news:Cq6dnUbIWJEJ4qTXnZ2dnUVZ_tydnZ2d (AT) giganews (DOT) com...
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found
after running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my
project..

You can't do it unless you use browser-conditionals, JavaScript or tables

Dorayme has some tricks if you know one column is going to be the
longest, that are very easy. Usually the main oolumn is and you can set
min-height for short content pages.

I almost always use js as all I have to do is name the equal height
columns with equal in a classname. But I don't care if there is a short
column in a js off browser.

I don't see the issue with conditionals though as it usually only
affects IE and is considered kosher by IE. There's lots of things, like
flash embeds, or ajax calls, where the IE method is different. They
aren't hacks, it's just IEs way of being different.

I'm done with tables, except for forms and data. Much happier!

Jeff


actually with img-bg's it also doesn't work for me..
http://www.mayacove.com/dev/layout.html
(did the same way as here, http://www.manisheriar.com/holygrail/index.htm

CONFESSION: this was actually for a test for a job....
(oh....... you must be thinking, NOW I know why requirement is so
unreasonable...

It doesn't seem that difficult or unreasonable. But then I am blissfully
ignorant of IE.

here is "assignment" and "mockup" they sent:
http://www.mayacove.com/dev/assignment.html
in case you're curious.. I think they just wanted XHTML and CSS code,
that's it, no imgs, no JavaScript.. (however, as you will note if you
check out the assignment, there is also a requirement to chg bg-color
for the links on mouseover (but: for the divs CONTAINING the links, not
merely the links.. this would have to be done w/JavaScript, since IE 6
doesn't support :hover for divs.. (and: <a>'s aren't block elements, you
can't set width and height for them, I tried with padding and
line-height and stuff for the <a>'s, but that's not too reliable
cross-browser-wise... oh brother..)

You can make <a> a block just by setting display: block on it.

I agree with respondents here who say you can't do w/o tables and/or
JS.. I'm all for div-based layouts, I think they're more elegant, all
that jazz.. but I don't get trying to fit a square into a circle...

so: pondering what/how I should respond to these folks.... obviously
they demanded the impossible here, as a way to gauge reactions,
approaches, etc.. I suppose.. in this job market I suppose employers
can afford to be unreasonable and mess with folks' minds....

It's really not impossible, and I don't think that hard an assignment.
It's quite reasonable because these are exactly the sort of layouts
people use all the time.

any comments???? thank you again to everyone for your responses..

Well I would have your best shot at it and be prepared to discuss with
them the relative merits of some of the techniques you've seen, like:

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)

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

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

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]

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

I doubt tables are the answer they're looking for. I suggest do
something simple that works in Firefox/Opera/Konqueror that shows you
understand something about how to use CSS.

If you can then explain why it doesn't work in particular versions IE
and what the workarounds might be, then I would give you the job.

Ben C wrote:

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
Jeff wrote:
Nik Coughlin wrote:
"maya" <maya778899 (AT) yahoo (DOT) com> wrote in message
news:Cq6dnUbIWJEJ4qTXnZ2dnUVZ_tydnZ2d (AT) giganews (DOT) com...
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found
after running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my
project..
You can't do it unless you use browser-conditionals, JavaScript or tables
Dorayme has some tricks if you know one column is going to be the
longest, that are very easy. Usually the main oolumn is and you can set
min-height for short content pages.

I almost always use js as all I have to do is name the equal height
columns with equal in a classname. But I don't care if there is a short
column in a js off browser.

I don't see the issue with conditionals though as it usually only
affects IE and is considered kosher by IE. There's lots of things, like
flash embeds, or ajax calls, where the IE method is different. They
aren't hacks, it's just IEs way of being different.

I'm done with tables, except for forms and data. Much happier!

Jeff

actually with img-bg's it also doesn't work for me..
http://www.mayacove.com/dev/layout.html
(did the same way as here, http://www.manisheriar.com/holygrail/index.htm

CONFESSION: this was actually for a test for a job....
(oh....... you must be thinking, NOW I know why requirement is so
unreasonable...

It doesn't seem that difficult or unreasonable. But then I am blissfully
ignorant of IE.

here is "assignment" and "mockup" they sent:
http://www.mayacove.com/dev/assignment.html
in case you're curious.. I think they just wanted XHTML and CSS code,
that's it, no imgs, no JavaScript.. (however, as you will note if you
check out the assignment, there is also a requirement to chg bg-color
for the links on mouseover (but: for the divs CONTAINING the links, not
merely the links.. this would have to be done w/JavaScript, since IE 6
doesn't support :hover for divs.. (and: <a>'s aren't block elements, you
can't set width and height for them, I tried with padding and
line-height and stuff for the <a>'s, but that's not too reliable
cross-browser-wise... oh brother..)

You can make <a> a block just by setting display: block on it.

oh man.. that's right! I just did..
http://www.mayacove.com/dev/gucci_devlper_test/gucci_test_table.html
you can "convert" <a> an element to a block element by doing
display:block; and give it a height and width.. I thought I had tried
that yesterday, but well, I worked so much on this yesterday I was dizzy
and in a tizzy by the end of the day.... well, if nothing else I
learned a lot with this endeavor..

I agree with respondents here who say you can't do w/o tables and/or
JS.. I'm all for div-based layouts, I think they're more elegant, all
that jazz.. but I don't get trying to fit a square into a circle...

so: pondering what/how I should respond to these folks.... obviously
they demanded the impossible here, as a way to gauge reactions,
approaches, etc.. I suppose.. in this job market I suppose employers
can afford to be unreasonable and mess with folks' minds....

It's really not impossible, and I don't think that hard an assignment.
It's quite reasonable because these are exactly the sort of layouts
people use all the time.

any comments???? thank you again to everyone for your responses..

Well I would have your best shot at it and be prepared to discuss with
them the relative merits of some of the techniques you've seen, like:

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)

I did at one point yesterday try "cascading" the divs on top of each
other with z-Index:0.. (giving the first div a margin-right of about
600px or whatever, then putting the 2nd "on top" with a margin-left and
z-Index:1, etc.. but that didn't work out too well.. (and bg-colors
still wouldn't fill entire div..)
(what is "dorayme-style"??)

thanks again..

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/

It is even HTML 4.01 Strict instead of pseudo-XHTML.

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

You would be submitting a falsehood then...

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

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.

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

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:

Ben C wrote:
[...]
Well I would have your best shot at it and be prepared to discuss with
them the relative merits of some of the techniques you've seen, like:

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)

I did at one point yesterday try "cascading" the divs on top of each
other with z-Index:0.. (giving the first div a margin-right of about
600px or whatever, then putting the 2nd "on top" with a margin-left and
z-Index:1, etc.. but that didn't work out too well.. (and bg-colors
still wouldn't fill entire div..)
(what is "dorayme-style"??)

It's the thing Jeff mentioned. IIRC it works something like this:

<div style="overflow: hidden" id="container">
<div style="float: left; width: 250px">
Left column contents. Left column has to be the one with more
stuff in it, so it's the higher of the two columns. Of
course you could use a right float etc. if the longer column
was on the right. Point is, the longer column is the float,
the shorter one normal-flow.
</div>
<div style="margin-left: 250px">
Right column contents. Shorter.
</div>
</div>

You set the left column's background on the float, and the right
column's background on the container, leaving the right column div
background: transparent (default anyway).

Because the container is overflow: hidden, it grows to the height of the
float (which we require to be the taller of the two columns).

For three columns, just nest again (old saw: there is no problem that
cannot be solved with another level of nesting).

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.

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