14 replies [Last post]
shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

So after I finally got the various divs in the right place and all bumped up against each other the way I want, I figured its time to tackel the faux column.

I have a main container for everything (used for centering). Inside of that I have 'sub'-containers, if you will, for the header, contents and footer. In the contents section I have my two columns with uneven heights. After googling Faux Columns and then Faux Columns and fire fox, I couldn't find where I've gone wrong. I put the repeating background attribute for my div which is the 'sub'-container for the contents section. IE Smile FF Sad. Can anyone assist?

http://www.theplanettheatre.com/inprogress

Cheers.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Faux Column and FireFox

The link to your FauxColumn.gif doesn't work - either the image isn't there or it's corrupted some how. Also, you haven't set repeat-y or repeat-x in your CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Faux Column and FireFox

Are you using a 1px gif for your faux column background? If so, I don't think you understand the concept.

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

Gif works...

http://www.theplanettheatre.com/inprogress/FauxColumn.gif

Works for me, but you won't see much of anything. My gif is only 1pixel by 1pixel. Since I just needed to repeat a solid color I figured, why create more bytes then I have to right?

My bad on the repeat thing. I didn't put in the repeat attribute as I thought it repeats by default if you have nothing. So I've added just repeat now (that does x/y both no?), and still IE Smile FF Sad

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

D'Oh

Just saw the comment about me using a 1px gif after I posted my last one. So what's the problem with using just a 1 pixel gif? But no, I never have really got the whole Faux Columns thing.

The content container stretches the entire height of the contents section (of course). So I figured if I just made the container w/ a background that is the same as my "short column" then the exposed area of the short column becomes "invisible" so to speak.

But if you can shed some light on it, I am all ears, cause I am totally fumbling through w/ the faux columns issue. I read Cedron's article and others and they really didn't make much sense to me.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Faux Column and FireFox

The idea behind using faux columns is that you create an image that will be the width of the columns you're trying to create (e.g. 750px) and contain all the colours that you're trying to replicate. So if you're doing two columns, you'd have an image with two different coloured areas. Then you attach it to the element that contains the two columns and set it repeat-y.
A single 1px gif can't replicate more than one column because it can only contain one colour.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

conoobus
Offline
Regular
Last seen: 17 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-08-21
Posts: 28
Points: 0

Faux Column and FireFox

shack... i thought the same thing about the 1 x 1 image.

i was corrected in this thread:

http://www.csscreator.com/css-forum/ftopic11854.html&highlight=

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

Still no luck

Thanks for that last explination, it helped clear up stuff.

I created an image 750 wide and 1 high, with all the column colors I need. I used a repeat-y; and still no difference with FF. I even tried making it 10 pixels high, incase 1 was just too too small, but again no difference in FF. :?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Faux Column and FireFox

It could be cos you've set a background-color (the reddish-pink color) for #sponsors which is preventing the image behind showing.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

still no luck continued...

I certainly don't know enough about CSS to contend that, but I don't understand why that would create a problem. CSS is essentially layers for the web isn't it?

The contents container is my 'base' if you will. And the sponsors container (and mission statement as well) are the overlapping/covering layers. So any formating in the overlapping layer (the two column layout) should just cover the base layer (the contents container. I thought that's essentially how the faux columns work, by filling in the base layer all the way you faux fill in the columns to 100%. The columns still aren't actually 100% at all, but by giving the base layer/container the same whitespace colors you trick the viewer into thinking it is all height 100%. Again, I've had more than my share of problems understanding CSS concepts here as I delve into it, so I could be off base here, but this is my understanding and I can't see how/why any formating in the sponsor's containers/headers/paragraphs would impact the underlying "contents" container.

Anyway, I'm going to head to sleep. Hopefully some nightowl or someone from a different time zone will have be able to propose another plan of a attack. Thanks again for all your input.

Cheers.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: still no luck continued...

shacklyn_knight wrote:
I can't see how/why any formating in the sponsor's containers/headers/paragraphs would impact the underlying "contents" container.

Because the solid colour in #sponsors could be covering up the background image in #content. #sponsors is sitting on top of #content, so anything in #sponsors covers up anything that's behind it.
It's unlikely to be the problem actually because #sponsors probably isn't extending to the full height of #content anyway, but the point is, when you're trying to pull off the faux columns technique, you don't want a background colour in your columns because the background colour comes from the image you've set in the containing element.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

Faux Columns...

I see where you're coming from there. That's why in a previous post I was asking if for my layout I can even use Faux columns at all, and it looks like maybe not. The Mission Statement / News / Sponsors headers I want to have colors that they do, but since their contents are liquid (will vary from browser to browser depending on font settings), I can't create a BG image to encompase all of them. The faux columns, done that way, would rely on your image changing only in a horizontal manner, but vertically it doesn't change in color (like mine does).

I'm sure I've seen it done though, where headers w/ background colors overlap colored columns that extend 100% (maybe there's another way, something better than faux columns that they implement).

And again, its fine in IE, just not FF. But since IE seems to suck w/ CSS, I imagine it would better if it was the other way around.

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

Maybe it does work...

I tried removing the bgcolor for the headers (like sponsor etc) to see if that was an issue. Well, for whatever reason, FF won't update at all for me now. I cleared all my cache/history/etc. Then I reload the page, try to remove the bgcolor of the headers, change it, whatever, and FF will not update for me. I am viewing the page using FF's "open file" command. Is this perhaps flawed or is the cache system of the browser perhaps flawed?

If someone has FF and could check the url and see if the Sponsors column is the faux height 100% I'd appreciate it. I'd at least like to know if the html/css are okay and then worry about the faulty FF after. But I must say, this isn't making me think of FF as the holy grail of development tools as seemed to be implied in other strings.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Faux Column and FireFox

You'll also need to read up on floats. The floats (the two sub-content columns) are allowed to 'hang' below their container. You need to contain the floats (which IE does - incorrectly). If you were to add an element after the floats which was cleared, the container would contain the floats (and the extraneous element). You can accomplish this with Tony's clearfix code, or by adding some element after the floats, or by adding overflow:hidden to the container (#content in this case).

So after all this, you may never have needed the faux column technique (depending on what you're trying to accomplish). If you were just trying to place #content's background behind and under the shorter float you would indeed not have needed it. You could simply use background color.

shacklyn_knight
Offline
Regular
Canada
Last seen: 17 years 13 weeks ago
Canada
Joined: 2005-09-02
Posts: 22
Points: 0

It Works, Horray!

Thanks wolf, its working perfectly now. Also, thanks for the explination/links regarding containing floats. They were very helpful.

Cheers. \:D/