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.

Theme Trouble

NickENickE New
edited November 2005 in Vanilla 1.0 Help
I was (am) attempting to create a theme based on a certain punBB style, and have so far been reasonably successful, but have found a slight problem in Firefox's first rendering of any discussion. Each post shares it's upper and lower border with the preceeding and proceeding comment, respectively, and there's supposed to be a seamless border running along the left and right sides of them. Often, however, and seemingly randomly, Firefox will display an extra margin between certain posts, completely screwing up those vertical borders. The odd thing is, though, once you reload the page, it snaps back to how it's supposed to be, like that bug with the page list. Is this also just a Firefox bug? I don't notice anything in the Vanilla theme, but then again, it wouldn't be particularly noticable. The theme url is http://nick_e.cjb.cc/misc/silver_theme/ . Any help or feedback is much appriciated.

Comments

  • Nice theme, interesting take compared to most of the mainstream ones. I cant see any bugs with the post but i'll have alook around and see if i can reproduce it...
  • hold up, it doesnt highlight discussions with new posts?
  • NickENickE New
    edited November 2005
    Here's a screenshot for you: http://nick_e.cjb.cc/misc/silver_theme/bug.png But yeah, I was sort of bored by the way that more or less every theme had the same basic structure (side bar, tabs, etc.), so I decided to create the theme from scratch instead of manipulating the existing one. EDIT: No, haven't bothered putting that in yet, but I can. What color/ method do you think would best fit it? EDIT2: Just remembered, also was having trouble getting the upper page list to fit under the page jump link. CSS can be so annoying at times...
  • lol @ the me bug. I'd just use some different shades of grey but i'm no designer...
  • Alright, shows discussions with new posts as the same gray as the panel now.
  • 3stripe3stripe ✭✭
    edited November 2005
    Dunno if this is the same thing or not, but I had similar problems with a CSS layout recently, with gaps in Firefox that would dissappear on refresh. Turned out that only Firefox was doing this as it's so strict: because I hadn't set the height of an div, it wouldn't display it in the correct place until it knew how big the div was (ie after refreshing the page). Took me about 3 days to work this out though hahahah. PS. Don't think Firefox 1.5 has this problem though
  • I'm using 1.5 and it doesn't show up like that, unless you fixed it. I like the skin, it's different and simple. Nice work! :) You've given me some ideas for a new skin as well ;)
  • 3stripe: That probably is what's happening, how did you fix it?
  • Do you have a min-height on each comment block? In my case I think I could set the exact height as it was a navbar with images in it - original thread at http://www.csscreator.com/css-forum/viewtopic.php?p=69462#69462 - see the second last comment!
  • NickENickE New
    edited November 2005
    Neither min-height nor max-height seems to fix it. Problem is, I can't set the height to be something exact because it has to wrap to the text size. Why dosn't the Vanilla theme have this problem?
  • love the theme layout. not keen on the colours, but that's only my preference... if the next version wasn't looming, I'd love to combine this with my full size avatar styles and make a proper looking forum...
  • Hi SirNot, This is a known rendering bug in Mozilla, it's called "Gaps and Overlaps" It is caused by assigning a line-height to a parent element of the affected boxes. In the case of Vanilla, the rule body p{ line-height: 150%; } is causing this error. This is supposed to be fixed in 1.5, but as of yet I personally still experience the error in 1.5. The only fix right now is to remove line-height declarations from any parent elements, that contain stacked boxes. I hope this helps you.
  • Hmm, I attempted removing all line-height declarations from parent elements and it still came up with that bizarre spacing. Even with all line-heights removed, the extra margins cropped up.
  • edited November 2005
    Hi, According to the css sheet here; http://nick_e.cjb.cc/misc/silver_theme/global.css You still have the following rule set. body is the parent element to all elements, so this will cause the issue to occur as well. Unless, I am misunderstanding your explaination and screenshots. body, p { line-height: 1.5em; } Basically what it comes down to is, there are two known rendering bugs in Firefox, "Gaps and Overlaps" and "Clearing Bug (has to do with floats)". If it isn't one of these, then it's a issue with improper use of css and xhtml. OR you've discovered a new rendering bug in Firefox, that noone else has found. IF you could supply a link directly to a live version of the theme, so I could take a closer look, I'd be happy to help you figure this out.
  • I don't think you've updated your cache or something, because the only thing in the global.css file with the line-height declaration is the dl tag. What do you mean by 'live' version? If you want to try it out then simply enter the directory into the custom stylesheet field in your user profile.
This discussion has been closed.