background-color problem

[maya90]

hi,

am having a bg-color problem with FF... I need to do what's in this mockup:
www.mayacove.com/dev/css/design_comp.jpg

but of course the problem with CSS is that if you have a div that's not full of content the bg color does not fill the div.. I cannot do just borders for the right and left div, because one div will always be shorter than the other, so the borders will be uneven.. I thought I would put both divs on another div with a background-color, but FF does not put the background-color on the containing div (BIG FF flaw, in my view..)

please compare how this looks in FF with how it looks in IE..
www.mayacove.com/dev/css/content.html

then for the inner divs there is the problem that the background for the inner divs doesn't reach all the way to the bottom (to make it same height as div on the right..) man, what a mess.. THIS is one thing that would be so much simpler in tables, but I have to do without tables..

how can I solve this, please..

thank you..

[RyanReese]

Hi, on #content IE is getting haslayout from the width you set, and as a result it incorrectly contains floats.

To get modern browsers following along give #content "overflow:hidden"

[maya90]

oh my gosh.. that worked -- thank you so much!!

I still have problem of bg-color now for shorter div...

but indeed the problem of the bg-color for containing div in FF has been solved..
http://www.mayacove.com/dev/css/content.html

thank you very much..

[RyanReese]

Hi, if I am understanding you correctly you want equal height columns?

[maya90]

actually I solved the equal-height column problem by putting a bg-image in containing div with a colored strip running down the middle, in between the two divs inside 'content' div.. it works fine, in both FF and IE..

thank you for the link you posted, I actually researched this extensively a few months ago, but none of the solutions I found were to my liking, I found all of them a bit convoluted.. will certainly study the one you posted..

thank you very much.... :-)

[RyanReese]

Yes that's one of the techniques to fake equal height columns in the link I posted .

You're welcome .

[maya90]

actually this approach (the link that you posted) is exactly what I ended up doing (before I saw your post......;-)
calculations and measurements have to be exact and very carefully done, to make sure it works in all browsers, but if you do it right it works; I think it's the best approach.. I just got it working in a situation with three columns separated by a dotted border (so bg image contains the two borders separating the three columns...)

I think this issue is like the one bad thing about CSS, I hope they fix it one day.. (you know, they could do something like height:100%, and that would make the containing div have the exact same height as the highest element inside it.... or something like that....:-)

[ralph.m]

I think this issue is like the one bad thing about CSS, I hope they fix it one day

CSS has actually catered for this for many years now. It's just that browser manufacturers (especially IE) have been lax in implementing it. You can use display: table, but it doesn't work in IE below version 8.

[RyanReese]

The main thing about CSS is that almost any effect can be achieved, or rather, faked. That's what it's about. You don't actually have to have equal height columns as long as the user can visually see they are equal heights

You can do equal height columns without display:table and without faking it via [url=http://www.sitepoint.com/forums/showthread.php?p=3885849#post3885849]this way from Dan Schulz (though not created by him)

[Stomme poes]

One of the best things about CSS is that it's all fakery. I think this may be why programmers coming to front-end development have such a hard time with CSS.

[RyanReese]

I believe it is because CSS isn't all logic, where as programming mostly is. You do have some logic in CSS (floats being first in source order) but there are bugs to fix, and most of them aren't logical at all .

Back enders say that front end is a peice of cake..well the cake is a lie

Off Topic:

Like that Stomme ?

[maya90]

like everything else, some aspects of front-end are a piece of cake, some are not...

on occasion you run into dicey problems with front-end as sometimes designers are not aware of certain things they should be aware of when creating designs (usability, the fact that most content is generated dynamically, etc..)

sometimes complex layouts are dicey because we can't use tables anymore (I think a big advantage of tables is that it provides a GRID for the layout, something you can't provide with divs alone..) I have gotten pretty good now at doing table-less layouts, but the switch from table-based to table-less was a bit of a struggle at the beginning....;~)
(I believe the main reason we're not supposed to use tables anymore is accessibility (& SEO?); I resisted this idea for a long time, but in the end, of course, I had no choice but to climb on the bandwagon... I still don't quite understand why tables are technically no good for accessibility (or SEO?), but that's become quite irrelevant by now, hasn't it....;~)

in addition to all of which, of course nowadays to consider yourself a good front-end developer you need to know not just standards-compliant markup and CSS, but also JavaScript (PLUS a JS library or two), AJAX, Flash... (plus you should also know how to integrate front-end markup into the back-end...) no, front-end development is not always a piece of cake, by any means....:-)

[RyanReese]

like everything else, some aspects of front-end are a piece of cake, some are not...

on occasion you run into dicey problems with front-end as sometimes designers are not aware of certain things they should be aware of when creating designs (usability, the fact that most content is generated dynamically, etc..)

sometimes complex layouts are dicey because we can't use tables anymore (I think a big advantage of tables is that it provides a GRID for the layout, something you can't provide with divs alone..) I have gotten pretty good now at doing table-less layouts, but the switch from table-based to table-less was a bit of a struggle at the beginning....;~)
(I believe the main reason we're not supposed to use tables anymore is accessibility (& SEO?); I resisted this idea for a long time, but in the end, of course, I had no choice but to climb on the bandwagon... I still don't quite understand why tables are technically no good for accessibility (or SEO?), but that's become quite irrelevant by now, hasn't it....;~)

in addition to all of which, of course nowadays to consider yourself a good front-end developer you need to know not just standards-compliant markup and CSS, but also JavaScript (PLUS a JS library or two), AJAX, Flash... (plus you should also know how to integrate front-end markup into the back-end...) no, front-end development is not always a piece of cake, by any means....:-)

Anything that you can do with tables can be done with divs and CSS . (99.9% of things, there might always be something). But to those minor cases, I'd probably just ask, why would you want to do taht?

You can still use tables for layout but it's just bad practice because generally unless your page is a statistics page only, with nothing else on it, then it would be considered unsemantic . And complex tables give search engines a hard time trying to find content and index it.

[Stomme poes]

(I believe the main reason we're not supposed to use tables anymore is accessibility (& SEO?);

The problem with tables for layout is, "table" means "table", but without good CSS support, people needed something to set stuff on pages in certain areas. Once CSS could be used, tables needed to be dropped. Like, get Baba Yaga an SUV so she don't have to be travelling around in that mortar anymore...

You can make accessible tables, and they can be fine for SEO, but when you're using them for layout you're just using the wrong tool for the job. Paragraphs for paragrapgs, headers for headers, lists for lists, forms for forms and tables for tables.

Problems as far as accessibility and SEO are pretty much due to some disabled and most/all SE's being linear user agents, meaning they go through a page in source order from top to bottom, meaning many tabled layouts (and almost all nested tables) were completely nonsensical. The link shows you an example of gobbledygook from tabled layouts.

In case you wanted to know (it's not fun to just do something a certain way because it seems trendy or "what everyone's doing").