Problem with the design in Opera 9 / Netscape / Firefox

Limundo

Hello!
I have a problem on my Vanilla forum:
http://www.limundo.com/limundocafe/discussions/

The white background does not follow the size of the discussion.
Same problem with categories (link name: Kategorije).

But on the search site (link name: Trazi) everything is OK.
And to make it more interesting, on IE all works without a problem.

Minisweeper

Isnt that a problem with your theme rather than the software itself?

Limundo

It is possible.
Do have any hints how to solve it?

Minisweeper

//nevermind.

3stripe

I remember this one, it's a height problem, I don't think the height of one of the container divs is defined, hence there's not enough white in the background sometimes....

Limundo

OK I will try it.

Thanks 3stripe

3stripe

Good luck. You don't see this problem on this forum, for example, because it has a vertically repeating pattern in the main column and the sidebar (http://lussumo.com/community/themes/vanilla/styles/default/panelfade.gif for example)...

Lunch

You just need to clear your divs. Add this to the bottom, either above or below the pgbottom link. <br style="clear:both;" /> You could also do it with a div too, if you like :)

Limundo

Thank you Juant!

The soluton
works great.

Limundo

Me again: the solution did not work for comments: http://www.limundo.com/limundocafe/discussion/14/sta-zelite-da-izmenite-na-limundu/ I am using Vanilla 1.1.2. it works in Opera, but not in Firefox! where exactly I have to put the code: <br style="clear:both;" /> ? i tried everything, but without success.

mallow005

Hi Limundo! Did you modify the CSS manually? If you remove the "height: 100%" in vanilla.css line 1 (#Body, #Form h2, #Form p), it will work. For me, it is set to height: 1%, this is probably to fix the clearfix for IE6. I'm guessing you modified it yourself. I've noticed that the CSS for Vanilla is a bit dated and could use a lot of cleaning up, I might lend a hand sooner or later. Also, the "div clearing" can be done without markup, just add "overflow: hidden; _height: 1%" to the div that is not expanding it's height to accommodate floats, or put the "height: 1%" in an IE6 only stylesheet. See http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html for more info. Cheers!

Limundo

removing "height:100%;" does not work.
Also changing to 1%.

jakob_r

overflow:auto; in the containing div often helps to expand it to encompass longer inner elements. You might find it easier to use the faux-columns approach, seeing as you have a fixed-width setup.

mallow005

Hi Limundo,

Sorry about that, I gave you the wrong line number. For some reason Firebug said it was line1, I guess Vanilla dynamically optimizes the CSS. I checked your site again and it still says you are using height 100%, here is the correct fix:

The correct line is 1525 for vanilla.css. It originally says:
/* IE Rendering Fixes */ #Body, #Form h2, #Form p {height: 1%;}
Try changing it back to that.

Limundo

So I tried for this page:
http://www.limundo.com/limundocafe/discussions/

#Body, #Form h2, #Form p {height: 1%;}
#Body, #Form h2, #Form p without height
http://alistapart.com/articles/fauxcolumns/
overflow: hidden; _height: 1%
overflow: hidden; _height: 100%
overflow:auto;


I put it every combination in:
#Body,#Form h2,#Form p {
body {
body,div,table,td {

Result: None of them works.
In Opera the white background does not go to the bottom.
In IE the mess up is bigger, since the text is not centered, and it expands to the right corner.

I uploaded the unoptimized CSS (in original the whitespace is removed) for better visibility.

jakob_r

Are you sure you tried overflow:auto; ? Perhaps you left the height in there (which works but limits the window in which you see it). I just tried this using edit css in Firefox and it worked in Firefox on the page you linked above:
#Body,#Form h2,#Form p { overflow: auto; background-image: url(pozadina100.gif); background-repeat: repeat; margin: auto; }
Note: no height infos
(I had to add http://www.limundo.com/limundocafe/themes/vanilla/styles/default/... in front of the file to get it to show up in 'Edit CSS' mode on the webdev bar)

Also, the faux-column approach should work too, but you need to make your faux-columns as the background url to the HTML tag body, not the div#Body. You also need to make a wide graphic with a white central stripe and gridded edges as described in the article and use repeat-y and centred positioning as the article describes.

Limundo

You are right.
It solved the problem.
I have forgotten to clear the "Height:100%" parametre.

So not it works for Opera and Firefox.

But unfortunately this does not solve the problem in IE7.
The problem here is that the content is moved to the right.