Blog Documentation Book a Demo
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.

CSS positioning help needed

bjrnbjrn
edited September 2006 in Vanilla 1.0 Help
So. I was prodding a style I would like to make, thinking it would be neat to send it in at the same time as all the other people working hard to styles. However, I've been having some troubles, and was wondering if there was anyone out there who has made a style where the "tabs" on top (Discussions, Categories, etc.) are moved to the right, and placed vertically instead of horizontally. I'm having troubles with positioning them so it works in both Opera (and Firefox) and IE. IE totally doesn't want to do what I want it to do, and I don't have a clue of how to fix it.

What I have right now is this layout (colours etc not finalised, just playing around still), the problem is of course that no matter what I try, I can get something like this, but not working in IE when it works in Opera (and Firefox).

So if anyone has any handy suggestions of how to make something like this work (barring writing a new theme), I would be most thankful.

Comments

  • wafflestomperwafflestomper
    edited September 2006
    Welcome to the wonderful world of IE! It is kind of hard to help when there is not code to look at. One book I would definitely suggest that helps sort out all those browser problems is CSS Mastery. It's a wonderful book...
  • ithcyithcy New
    try starting with this:
    #Header ul li { clear: both; display: inline; float: left; }

    also you might try CSS Vista which is a free application that lets you edit and preview your CSS in real time in IE and firefox simultaneously.
  • bjrnbjrn
    Thanks for the suggestions. I'll have a look at CSS Vista, it looks handy. As for the code, you of course have access to the markup, the css for that screenshot was done with relative positioning on the body, and then absolute positioning on the tabs, #Panel and #Content, something I guess I should have mentioned. The absolute positioning didn't work in IE, at all, it just went crazy.
  • wafflestomperwafflestomper
    Can you post a link to the css (or at least the site)? One huge hint (at least if you are floating any divs) is that you _have_ to display:inline for IE or it screws up... It took me awhile to learn that one.
  • ithcyithcy New
    edited September 2006
    you might also want to think about setting #Header ul to display:none; and writing a little extension that writes the tabs as links inside the panel. because it'll never work exactly right this way.
  • WallPhoneWallPhone
    You are welcome to borrow code from my first style--i've kind of abandoned it for another.

    http://edacio.us/vanilla.css

    You can put http://edacio.us in the custom style URL field of your account settings to preview.
  • bjrnbjrn
    Using floats and display:inline; looks like it did the trick. Thanks again for all the help, I'll shout if I need any more! :)
This discussion has been closed.