Is it possible to use a CSS wildcard in the middle of an attribute selector?

You can’t use a wildcard like that, but to get the desired result (ID starts with lorem and ends with Ipsum) you can use the attribute starts-with and ends-with selectors instead, like so: p[id^=”lorem”][id$=”Ipsum”] Remember that by linking multiple attribute selectors like this (along with the p type selector), you’re doing an AND match with … Read more

IE7 relative/absolute positioning bug with dynamically modified page content

This is related to the “hasLayout bug” of IE. The relatively positioned #panel parent doesn’t have layout and hence IE forgets to redraw its children when it get resized/repositioned. The problem will go if you add overflow: hidden; to the relatively positioned #panel parent. #panel { position: relative; overflow: hidden; border: solid 1px black; } … Read more

filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera

Try with SVG filter. img { filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: url(#blur); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=”3″); } <img src=”” /> <svg version=”1.1″ xmlns=””> <filter id=”blur”> <feGaussianBlur stdDeviation=”3″ /> </filter> </svg>

Cross browser way to rotate image using CSS? CSS to rotate by 45 degrees: .desk { width: 50%; height: 400px; margin: 5em auto; border: solid 1px #000; overflow: visible; } .desk img { behavior:url(; /* Firefox */ -moz-transform:rotate(45deg); /* Safari and Chrome */ -webkit-transform:rotate(45deg); /* Opera */ -o-transform:rotate(45deg); /* IE9 */ -ms-transform:rotate(45deg); /* IE6,IE7 */ filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); … Read more

Allowed characters for CSS identifiers

The charset doesn’t matter. The allowed characters matters more. Check the CSS specification. Here’s a cite of relevance: In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a … Read more

Select odd even child excluding the hidden child

:nth-child() pseudo-class looks through the children tree of the parent to match the valid child (odd, even, etc), therefore when you combine it with :not(.hidden) it won’t filter the elements properly. Alternatively, we could fake the effect by CSS gradient as follows: .hidden {display:none;} .wrap { line-height: 1.2em; background-color: orange; background-image: linear-gradient(transparent 50%, green 50%); … Read more