Modifying vanilla.css - IE problems

Inkscape · August 2006

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

k4zzy · August 2006

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

Inkscape · 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.

k4zzy · 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.

Inkscape · August 2006

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

k4zzy · August 2006

Awesome. I love Inkscape, btw. Too bad I can't read German.

Inkscape · 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:

How do I fix this error?

Cheers
Inkscape

pbear · August 2006

Feed IE its own value for padding-left with the underscore hack?

Inkscape · August 2006

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?

k4zzy · August 2006

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.

pbear · August 2006

I would also try not using a percentage. How about an em or fraction thereof? e.g.:
blockquote { padding-left:0.5em; }

Inkscape · 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?

k4zzy · 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?

Inkscape · August 2006

I would say http://www.microsoft.com/windows/ie/downloads/default.mspx

pbear · August 2006

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]

Inkscape · August 2006

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

k4zzy · August 2006

The style looks good.