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.

Need some CSS help

edited June 2006 in Vanilla 1.0 Help
I need to turn this template into a standards compliant design. I've got it looking (almost) all correct in Safari, but then tested it in others and it died on me ( You're free to use as much of my code as you need. If you can fix it for all browsers (I need it tonight) I'll PayPal you $45 and donate $45 to Mark for his Macbook. Updated: see below.


  • what exactly do you mean "it died on me"? i just quickly tried it in Mac FF, and Mac Safari, and it seemed to work fine in both. I don't have my windows machine handy until later this evening, but an idea of what exactly is wrong would help a lot. cheers, jb
  • Of course -
  • ok, so its explorer for windows that is having trouble eh?
  • edited June 2006
  • ok, just looking veeery quickly, try changing the "float: right;" to "float: left;" in #topright if that doesn't at least get you started then i will take a look in about 2hrs when i get home from work ;)
  • ooops... judging by the browsercams, it looks like it'll take a bit more ;)
  • edited June 2006
    edit: woops
  • c-unit, this looks like very good markup anyways which should make this rather easy to fix. I'll check back in when i get home and if you haven't gotten it by then, I will help out. unfortunately i havent got a windows box at work and i have a 1hr commute so it will be a little later. cheers, jb
  • Thank oldmanpants, the client only gave me a day to code it, and now he's breathing down my neck.
  • just looking at your browser cam and it looks as tho you almost have it all except IE7beta. or is that wrong?
  • Well, I'd just like them to be a bit tighter.
  • edited June 2006
    I can't verify this (because I'm on a Mac) but the client says when they go to the site ( it works fine the first time, but when they refresh it shows this-


    The URL is

    Any idea what could be causing this?
  • I got a reply off the css-discuss mailing list that I should apply margin:0 to my forms for IE. Can any reproduce this problem now - Thanks!
  • edited June 2006
    IE6: as broken as on your screenshot, even on the first visit before a refresh (and still there after the refresh) EDIT: looks fine in IE6 btw.
  • edited June 2006
    Felipe, would you be willing to try them both a couple of times? They said it happend on the refresh. I tested my version vs. my version with his updates. He mussed up the code somehow dammit. Thanks Felipe for pointing that out :).
  • I just looked at both offline: if you apply margin: 0px; to "form" and not "form input", it should be fine with Now I'm going to try both :)
  • seems to be ok while loading the page (half a second) and right before it's built, the div is translated by a few pixels downward (like if the form above was expanded to its definitive size after a margin-bottom not null was applied) is OK whatever I do ... BTW, you have 2 greens in your header (body.png and topbar_bg.png): is this intentional?
  • lechlech Chicagoland
    One major quirk with offsets like this in ie6 is the result of 2 borders on elements which make contact with one another. IE specifying a border-bottom followed by the next element in line with border top having a border throws them apart. Even killing padding and margin will still make this appear.
This discussion has been closed.