View unanswered posts | View active topics It is currently Fri Jun 22, 2018 7:28 am

Reply to topic  [ 2 posts ] 
 Using * selector in a stylesheet can clash with CSS3Pie 
Author Message

Joined: Mon Jul 19, 2010 4:46 am
Posts: 34
Post Using * selector in a stylesheet can clash with CSS3Pie

I have a scenario where I have an element with a class. It can contain one of a range of other elements which I want to be styled in the same way (specifically, with margin-left). In order to achieve this, I used CSS like this:

.myclass>* {margin-left:100px;}

This meant that the element directly inside .myclass would be styled, regardless of what that element is (I'm aware that '>' doesn't work in IE6; we're not supporting it). The element inside .myclass could be an <a>, a <span>, a <strong>, or several others. This all works fine.

Now for the PIE-related problem:

We have a separate bit of CSS which styles <a> tags as buttons, with rounded corners. Of course for IE this uses PIE.

The problem is that the .myclass>* selector is picked up by the css3-container, and thus we find the button's background being given an unexpected margin-left and being thrown off to the right.

I have worked around this problem by abandoning the idea of using the .myclass>* selector. I have replaced it with a list of selectors as follows:

.myclass>a, .myclass>span, .myclass>strong {margin-left:100px;}

This works fine, since it no longer interferes with the css3-container. However it doesn't look as clean as the original, and it does mean that I will need to add further selectors if we want to support any other tags inside of .myclass.

I don't know if this can be fixed - I would class it as a bug in CSS3Pie, since it is affected by valid CSS and since CSS3Pie is supposed to be transparent to the developer. It is easy to see why this is happening though and easy enough to work around it.

Thu Jan 27, 2011 4:08 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Using * selector in a stylesheet can clash with CSS3Pie
Perhaps explicitly reset the styles on the css3-container elements?
css3-container {
    margin:0 !important;

Not many people use the wildcard selector, and it has known performance implications, but I can see why it would be handy. I'll consider making PIE insert a rule like the one above that resets things like margin, padding, etc. as part of the initialization process.

Thu Jan 27, 2011 10:51 am
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Google [Bot] and 3 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.