[pmwiki-users] Problem with CSS and IE6/IE7 in a graphics-free skin

[john.rankin at affinity.co.nz]

I have a problem with the CSS for a skin that replaces the wiki logo image
with styled text, that I'm hoping somebody can shed light on.

The HTML is:

<div id='wikilogo'>
    <a href='http://path.to.pmwiki/index.php'>Wiki<span>Logo</span></a>
</div>

The CSS is:

#wikilogo a {
    text-decoration: none;
    padding: 5px;
    padding-right: 0px;
    color: #008b5a;
    background-color: #ffffa1;
    border: 1px solid #ffb2b2;
}
#wikilogo a:hover { border: 1px solid #853378; }
#wikilogo a span {
    padding: 5px;
    color: #0c479d;
    background-color: #b2ffa1;
    margin-left: 5px;
}

In web browsers, this produces a box with 5 px of padding, a border that
changes colour when you mouse over it, with "Wiki" in one
colour/background and "Logo" in a different colour/background.

In IE6 and IE7, on the other hand, it produces a box with 10 px of top and
bottom padding, 5 px of left and right padding, leaving a top and bottom
strip 5 px wide on the right hand "Logo" box, in the left hand "Wiki"
background colour.

The only way I can find to fix this is to add the following code to the CSS:

#wikilogo a {
    ...
    *padding: 0 0 0 5px;
}

In web browsers, the * is invalid and the padding instruction is ignored.
In IE6 and IE7, the * is ignored and the padding 0 over-rides the earlier
5 px top and bottom padding. We end up with the correct 5 px padding all
round.

While using one bug to compensate for another has a certain twisted
appeal, I'm wondering if anyone knows a way to deal with this that doesn't
involve introducing a *padding CSS instruction.

Any suggestions would be appreciated. Maybe someone else has given up on
this problem and this post might be useful.

JR