CSS issue with left hand navigation


https://forum.kartris.com/Topic1323.aspx
Print Topic | Close Window

By TheCalicoTree - Tue 13 Sep 2011
HI there,

I am using the accordion menu in a left hand side column for my categories. Trouble is the column does not increase it's height to fit the page.

Has anyone edited their template.css to fix this? Would be much appreciatibe of some advise.

Thanks
By Paul - Tue 13 Sep 2011
I've had some experience of the CSS problems of getting columns to go full height (which I assume is needed because you have a background colour for it). I am sure I have found CSS to do this but it can get complicated and has hacks to work on older IE browsers.

One alternative, is to give the impression of the column going all the way by using a background image on the container where both column's divs are, then the column div height is not important, because the background colour is supplied by an image on the containing div.

Another alternative, which isn't really considered good CSS is to use a table with two (or three) columns instead. The cells will all automatically take the same height, based on whichever column has the most content in. Much as this is frowned on, I personally use it for the three-column full width type layout, as this can only be achieved in CSS with a lot of nasty hacks that will cause more hassle. Tables are old fashioned, but simple and supported on everything your site will run on.

At some point, they need to fix the deficiencies in CSS and have a simple way to do column layouts without horrendous hacks (I don't think even css3 really addresses this, though I may be wrong).
By thedrumdoctor - Wed 14 Sep 2011
Carrying on with the 3 x column layout Utopia & CSS hacks, if I was going to attempt it I would use the approach of Matthew James Taylor as outlined here.

However, trying to do this with Kartris would be a heck of a job as there are so many layout elements in place to deal with. I certainly wouldn't attempt it unless there was a version of the product that generated an absolute minimum of DIV's. But his method proves it can be done if you're building bottom upwards.

I don't know if you're already using them, but there's a great free web developer add-on for Firefox and the developer tool in IE8 (press F12 to reveal) which can get you out of a lot of stinky squashy stuff. They've helped me massively when trying to fathom out the many generated elements Kartris produces.
By TheCalicoTree - Mon 19 Sep 2011
Thanks for your comments. I will give the background image method a go as it seems to be the most straight forward.

As you have both touched on there are some good methods out there but obviosuly retrospectively fitting them into the Kartris CSS would be nigh on impossible.