Blog Documentation Try Vanilla Cloud
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Problem with the design in Opera 9 / Netscape / Firefox

LimundoLimundo
edited March 2007 in Vanilla 1.0 Help
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.

Comments

  • Options
    MinisweeperMinisweeper New
    Isnt that a problem with your theme rather than the software itself?
  • Options
    LimundoLimundo
    It is possible.
    Do have any hints how to solve it?
  • Options
    MinisweeperMinisweeper New
    edited July 2006
    //nevermind.
  • Options
    3stripe3stripe ✭✭
    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....
  • Options
    LimundoLimundo
    OK I will try it.

    Thanks 3stripe
  • Options
    3stripe3stripe ✭✭
    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)...
  • Options
    LunchLunch
    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 :)
  • Options
    LimundoLimundo
    Thank you Juant!

    The soluton
    works great.
  • Options
    LimundoLimundo
    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.
  • Options
    mallow005mallow005
    edited March 2007
    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!
  • Options
    LimundoLimundo
    removing "height:100%;" does not work.
    Also changing to 1%.
  • Options
    jakob_rjakob_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.
  • Options
    mallow005mallow005
    edited March 2007
    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.
  • Options
    LimundoLimundo
    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.
  • Options
    jakob_rjakob_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.
  • Options
    LimundoLimundo
    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.

    image
This discussion has been closed.