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

Modifying vanilla.css - IE problems

edited August 2006 in Vanilla 1.0 Help
First of all, a hello to all the members here. So - HELLO :)

Any chance that someone german speaking is here who knows everything about modifying the vanilla.css for the vanilla standard theme and is a HTML and CSS Guru?

If not lets try if my english is good enough to describe my problem. ;)

I'm currently trying to create a new style for our german-speaking vanilla forum dealing with Inkscape (vector drawing) under Inkscape-forum.de
As far as I understand it, vanilla provides a way to specify three different background colors to a discussion. One for "Unread" which is located under #Discussions li ul Another one for "Read with no new comments" under #Discussions li.Read ul and the third one for "Read with new comments" under #Discussions li.Read.NewComments ul I might be wrong about this because I'm still a beginner dealing with CSS Code.

I specified three different colors for these three states.
Now to the problem. Opera and Firefox are displaying this correct. Means I'm seeing all three colors. But I have problems with IE >= 6.0. IE is only showing two colors. The ones for "Read with new comments" and "Read with no new comments". The color for unread is never shown.

Do you understand my problem? I uploaded all necessary files to a test account and changed the stylesheet by the provided extension within the forum, if this is important to know.

Cheers
Inkscape

Comments

  • Options
    I can't test this because I don't have IE available right now, but try this:

    Replace:
    #Discussions li.Read.NewComments ul

    with:
    #Discussions li.Read .NewComments ul
  • Options
    edited August 2006
    #Discussions li.Read .NewComments ulWell this displays the "Unread" color within IE but not all three colors. Now it's the backgroundcolor for "Unread" and "Read with no new comments". It even breaks the displaying of three colors within the other browsers.

    But I want all three colors to be displayed, so that you can see by backgroundcolor if it's a completely "unread" discussion, a discussion you already read but that has new comments, or if it's a discussion you already read and that has no new comments.

    Anyway thanks for your help. :)
  • Options
    edited August 2006
    Sorry again, I'm not thinking clearly today.

    Try this:

    #Discussions li.Unread ul
    For unread discussions.

    #Discussions li.Read ul
    For read discussions.

    #Discussions li.Read.NewComments ul
    For read discussions with new comments.
  • Options
    Try this: ...
    Hell this worked. :) Thank you very, very much. This solved my problem. Let's see if this was the last one. ;)

    Cheers
    Inkscape
  • Options
    Awesome. I love Inkscape, btw. Too bad I can't read German. :(
  • Options
    edited August 2006
    OK, here's another one. ;)

    I specified a background image for the blockquote tags. It's just a small image with a writing "Zitat" (which means "quote").

    This is the CSS Code:
    blockquote { border:1px dotted #0084AD; border-left:10px solid #0084AD; padding-left:2%; background:url(zitat.gif) no-repeat #E7F0F9; padding-top: 20px; }

    The box has a 10px wide border on the left side. The funny thing is that Firefox/Opera are positioning it right to the border which is the correct way. But as always the IE 6.0 is making trouble. He is positioning it in the top left corner. This means the image is placed under the border. See the image:

    image

    How do I fix this error?

    Cheers
    Inkscape
  • Options
    pbearpbear New
    edited August 2006
    Feed IE its own value for padding-left with the underscore hack?
  • Options
    Well, thx this works for IE 6.0. But what about IE 7.0? Has it been tested under this browser?

    Do you or anyone else know another way of fixing it?
  • Options
    I would worry about IE 7.0 once it's released. If IE 7.0 doesn't fix this problem, then you're fine with the underscore hack. If it does, your existing code will work on it.
  • Options
    I would also try not using a percentage. How about an em or fraction thereof? e.g.:
    blockquote { padding-left:0.5em; }
  • Options
    edited August 2006
    Thx for your help so far. :) As I don't have IE 7.0 installed on my system, another user in the inkcsape-forum reported this positioning error within IE 7.0 BETA2. He confirmes that using the underscore hack didn't fix the error within his IE 7.0. (In fact the above image shows the displaying result within IE7.0) As Microsoft proclaims the rendering engine of the browser is already final, I fear this error won't dissappear when the final version 7.0 will come up. What do you think about this? Do you see a way to fix it within IE 7.0 or should I really wait for the final version?
  • Options
    edited August 2006
    From what I can see, *+blockquote, * blockqoute { } will select the blockquote object in IE (including IE7) only. Not sure if this will change in the final versions, or if they will change that.

    Does anyone know where I could find the IE7 beta?
  • Options
    From what I've read the underscore hack is only for IE5/6. At least, it's supposed to be fixed come IE 7.

    MS is recommending conditional comments. Basically import an IE specific stylesheet with all the proper values for sticking points in that browser:
    <!--[if IE 7]> <link rel="stylesheet" href="ie7.css" /> <![endif]-->
    n.b.: [if IE] would be all versions of IE.

    Also poke around here: star and underscore hacks [snook.ca]
  • Options
    Thanks pbear & k4zzy,

    I think I'll stick to a conditional comment specifically to IE7.0 when it goes final. By now it's only 1% of the users. Nevertheless let me say thank you for this useful links too. Helped a lot.

    btw. just in case you're interested. The admin meanwhile uploaded the style to the server and made it the default style. So if you're interested in seeing the work already done take a look at www.inkscape-forum.de :D
  • Options
    The style looks good. :)
This discussion has been closed.