Knowledge base / Since 1999
Practical Cascading Stylesheets tutorials, troubleshooting notes and implementation guides from real projects.
Advanced search12 entries / Cascading Stylesheets
Clear filters
So this is a quick article to demo how to center an iframe horizontally and vertically in a screen/viewport in pure CSS (no JavaScript allowed). This CSS centers it by its center point rather than the top/bottom/left/right outline.
A quick article to remind me on how create an multi-level ordered list that indents and aligns correctly.
This is an article I hope to refine one day where given a set of breadcrumb hyperlinks, when I hover the mouse over the links, the text changes and the transition between the two is controlled smoothly.
I saw a lot of articles that would cover this but I wanted an example which includes headers and footers and how to get an automatic page-break-inside to not overlap these. Fine on screen but this is obviously for when it comes to printing.
A quick article on how to get a div layer to increase height based on how a heading fits on a page. What? I have a heading like this: The code of this is: A long heading that wraps over several lines
So many people asking this when the solution is a bit of aesthetic styling. ol -- yields 995. 996. 997. 998. 999. 000.
So this is an article to note an oddity when I was working with a Yootheme template called "yoo_sync". Some clever scripts (both mootools and jquery) using the equalize method to make div layers the same height, and in this case, the same width. It isn't so much a miscalculation of 100% divided by 3 that leaves 1 pixel...
This is a quick article on how to resolve the following issue: Overall body background color is blue. Background color of my contents is white. When I visit a small page on the site, the contents background (white) shows. When I visit a very long page on the site, the contents background disappears and reveals the over...
So I have an unordered list of values (*, 1, 2, 3...) and for styling reasons I want the asterisk to be the same size as the numbers but not overlap any list item beneath it. By increasing the size of the asterisk, this often increases the line-height and causes the overall line height to change for other objects in th...
Working principle
This site exists as a practical knowledge base built from real-world experience across systems, platforms, and technologies since 1999. Much of the content documents solutions, edge cases, and working patterns that were learned through investigation where documentation was incomplete or absent, and is shared to reduce the same friction for others.
Protected notes
Log in for protected notes and any private client projects assigned to your account.