Problem with #named links and One True Layout trick

HTML & CSS
1

Hi,

I’m using the one true layout trick to make columns properly extend to the bottom of their container.
A nasty side effect of this is that named links result in a shift of the layout happening in this container element instead of in the whole viewpot.

To see what I mean, check this page that links to the comments part of my webpage:
http://demo.alldrupalthemes.com/syan/content/brevitas-pneum-mos#comments

This page is supposed to look like this:
http://demo.alldrupalthemes.com/syan/content/brevitas-pneum-mos
(here I just removed the #comments part to prevent the shift from happening)

I know this bug is related to the One True Layout trick because I’ve experienced it before… but never found a fix.

Does anyone know a fix for this? It would be very much appreciated!

JR

2

Unfortuantely it can’t be fixed because it isn’t a CSS error, it’s just a rendering flaw. That’s the only downside of that method.

You have to do a new equal height technique, like a background image on a parent repeat-y (the image is 3-4px high and filled witih the (3?) colors of the columns)

3

unfortunately this won’t work for this layout.
for the right column it will work, as the background-position for the right column will be equal to the starting point of the right column (width of left column+center column).

On the left side, the position of the background image is equal to the width of the left column (possible a percentage), minus a fixed value (in pixels) that is the width of the background image.

The actual width of the left column (or any column) can be configured in the settings of the theme so it is variable, and therefore there is no fixed value in % or pixels that is the correct background-position of the left column background image. Not without javascript anyways.

The problem will be immediately obvious in a flexible-width layout setting, as the background-position for a faux column on the left side will only be correct for a fixed value of the #container width.

4

Remarkably, IE Win doesn’t actually need the overflow: hidden, but it causes no problems so there is no need to hide it.

Is there the possibility of display: table for smarter browsers and this oveflow method for IE? Or am I just too used to seeing multiple IE-only stylesheets in Drupal?

Though as I recall, when I had overflow hidden on a wrapping block, IE6 had a very similar problem with in-page skip links.

You’ll probably have to go to the plain old Faux Columns, with two wrappers surrounding everyone, where the bg position of one’s bg = width of left col (whatever that may be) and bg position of right col’s bg is 100% - right col’s width.
If the user sets the left col to 20em then bg position for wrapper1 is 20em 0, and if they set it to 10% then bg position is 10% 0… if right col is set to 20em then left margin for wrapper2 is set to -20em, while bg position is always 100% 0.
There’s likely something wrong with that but I’m curious to try it.

I don’t know what a Drupal stylesheet does when people change things like widths of columns. If it’s done with PHP then it’ll be able to feed whatever width they choose for the sides to be the same numbers to determine placement of the bg images.

If the middle were always the longest column (not possible to set that in a Drupal theme) then I’d do matryoshka floats with the bg’s attached to the middle col and the main wrapper.

5

Hi Poes, if you look at the image for the left column, you see that it has to start at [width-left-column]-101px.
The left column’s css width can be a percentage, in pixel, and now you mention it even ems!
If a wrapper surrounds all 3 columns, there is no way to tell it at what percentage or pixel from the left edge, the background image starts.

ie if the left column is 20% and container width is 1000px, it would be 200-101=99px.
If container width is 2000px, it would be 400-101=299px. So unless I misunderstood you I think we’re still without a solution.
This is usually where Paul jumps in (hint!).

The matryoshka floats sound really cool but we cannot assume any column is always the longest. In fact, this theme will be downloaded by dozens of users who each create their own unique content and layout, this is really what makes CSS interesting haha.

If there is no elegant solution I’m just going to have to remove all the #thingies from the output.

6

Could you possibly modify the HTML a bit to do this setup?.

I don’t know what you can and cannot do at this stage so I’ll keep offering equal height techniques until we get one you CAN do ;).

7

Thx.
Hmm I don’t really see what the particular benefit of that one is, with regards to my problem. It also seems to be designed for 2column situations…

8

Wow I was almost considering to private message Dan if he knew of more cool equal height tricks but I remembered he passed away :frowning:
It’s so weird, but its pretty amazing how he remains helpful through this forum, even post mortum.

9

There is no fix for this problem in the one true layout and you would be better using a different equal column method that works [URL=“http://www.pmob.co.uk/temp/3col-fluid-round.htm”]for fluid and fixed columns without images and doesn’t suffer from these problems.

10

does without images mean that its not compatible with my background image problem?

11

You can use images instead of a background colour in my method but I’m thinking that you are looking for something automatic that adjusts to whatever width you have set for the column in question.

Therefore I don’t think it will be compatible as you need to set the width of the overlay column element.