5 Handy tips to fix space beneath floated elements
When two elements are floated in a div, chances are parent element no longer contains it because the float is removed from the flow. Here I am sharing five quick tips to fix this problem.
CSS3 Unleashed – Tips, Tricks and Techniques
Although CSS3 specifications are still under development, some of its features have been incorporated in latest web browsers. This has provided web developers with an opportunity to experiment and play with some of the new features well in advance. We have compiled a list of resources that will get you up to speed and bring you closer to the cutting edge of CSS development.
iPhone CSS
Ever wished you could isolate one or two elements in your site’s style to render differently on the iPhone? You can! Use this CSS.
Ask SM: CSS Quick-Question Edition
These entries are not all questions, but rather quick Twitter responses to the query, “What has been your most difficult CSS challenge?” Among other things, this post covers the sticky footer issues, positioning elements at bottom of a div, on having layout, aligning labels and inputs, auto top and bottom padding, z-index and more.
Do not remove the outline from links and form controls
You should never use the outline CSS property to remove the indicator that most browsers display when a focusable element receives keyboard focus.
Quick Tip: Centered Fake Floats
Up till (relatively) recently, I had a major gripe with HTML & CSS. I couldn’t find a proper, efficient, semantic way to center align left floated elements.
Gee, what a mouthful, even writing about it gets me edgy. After a bit of tinkering, I found an efficient and (mostly) cross-browser way to center elements, without resolving to floats.
Placing a CSS background image horizontally right on an h2 using a span element
I believe this is a very useful tip for people just starting out. It’s about how you add a background image to a heading 2 element and have it perfectly aligned on the right side of the text while keeping the default block element behavior.
Hiding with CSS: Problems and solutions
Using
display:noneto hide an element is a bad choice that reduces accessibility. I thought this was a well-known fact, but apparently there are many who are not aware of it being a problem. For that reason, here is a quick explanation of the problem and a suggestion for an alternative technique (that I also thought was well-known).
Everything you need to know about browser testing
Cross browser testing is something every web designer and developer should consider before they even create one line of code. But how should you go about it? What browsers should you test? and what tools are there that can make browser testing easier?
5 Rarely-Used CSS Properties
The volume of CSS properties makes it easy to forget those that are not used every day. Here is a list of 5 useful but rarely-used CSS properties that work in all modern browsers…