Re: Specificity and conflicting selectors

On 15/04/2011 11:44 PM, Yael.Aharon@nokia.com wrote:
> Hi,
> I have a question about how to handle selectors that have conflicting meaning.
> The background for this question is a webkit bug https://bugs.webkit.org/show_bug.cgi?id=52511 .
> In that bug, the "right" selector has a higher specificity than the "left" selector, yet all major browsers ignore the "right" selector and display the image on the left side.
>
> Should browsers be expected to have the knowledge about these conflicting selectors?
> thanks, Yael


No, an image is a replaced element. Try this.


<!DOCTYPE html>

<style type="text/css">

   #comments { position: relative; border: 2px solid blue; width: 400px; }
   #comments * { position: absolute; left: 0px; }
   #comments * { right: 0px; }
   p {background: lime; }

</style>

<div id="comments">

   <img src="...">

   <p>Test</p>

</div>


What the CSS should have is this.


.rtl #comments img {
     right: 10px;
     left: auto; /* add this to give another value to offset left */
}




-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 15 April 2011 14:39:17 UTC