Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item. Using a combination of background and padding styles can create something that looks similar e.g. li { background: url(images/bullet.gif) no-repeat left top; /* <– change `left` & `top` too for extra control … Read more
The CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element. From what I’ve understood it would allow such a thing. Unfortunately, no browser seems to support it. What you can do is add some padding to the parent ul and pull the icon into that padding: ul { list-style: none; padding: 0; } … Read more
One solution is to use a background image centered within an element sized to the cropped dimensions. Basic example .center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; } <div class=”center-cropped” style=”background-image: url(‘http://placehold.it/200×200’);”> </div> Example with img tag This version retains the img tag so that we do not lose the ability to … Read more
You can comma-separate shadows: box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;
px ≠ Pixels All of these answers seem to be incorrect. Contrary to intuition, in CSS the px is not pixels. At least, not in the simple physical sense. Read this article from the W3C, EM, PX, PT, CM, IN…, about how px is a “magical” unit invented for CSS. The meaning of px varies … Read more
A > B will only select B that are direct children to A (that is, there are no other elements inbetween). A B will select any B that are inside A, even if there are other elements between them.
Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings). /* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */ .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 … Read more
It’s a CSS child selector. P > SPAN means applying the style that follows to all SPAN tags that are children of a P tag. Note that “child” means “immediate descendant”, not just any descendant. P SPAN is a descendant selector, applying the style that follows to all SPAN tags that are children of a … Read more
Yes, you can. @supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ } @supports not (-webkit-touch-callout: none) { /* CSS for other than iOS devices */ } YMMV. It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout Please note that @supports does not work in IE. IE will skip both of the above … Read more
Just add white-space: initial; to the text, a line text will come automatically in the next line.