So many people asking this when the solution is a bit of aesthetic styling.
- -- yields
- 000. <-- What's going on here then?
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 overall background (blue) making the text very hard to read.
Took me a while to figure out what was the problem, I'd visit some pages and they'd be fine, but when visiting a long page, it would initially display properly but then the white background would disappear when the page finally loaded.
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 the same row. The problem afterwards was that the asterisk character would overlap the item beneath it (in this case #2) so when a user clicked on #2 they would in fact be clicking on the item containing the asterisk above it.
|Box List Before:||Box List After|
Thank You! :c)