June 7th, 2006 at 12:55 am

Three distinct problems:

1) Losing ALL “formating”
If you write html * {margin: 0 0 0 0; padding: 0 0 0 0;}, in Wordpress at least, you lose the possibility of ALL formatting in the posts … that is, “paragraph” tags don’t give a full space between paragraphs; headers aren’t as tall as they should be etc etc.

Solution: Include the margin settings in the “Body” tag.

2) A “Phantom” top margin (or padding?)
Once I did the above — it worked in Explorer (7 beta anyway), but did NOT in Firefox 1.5!
Really puzzling.
Through trial and error, I discovered that I had to add a small “padding: 1px” to the “header” DIV.

I have no idea why.

What was interesting was the way I discovered this:
a) I noticed that other blog designs did not have this problem
b) I used THAT style.css as a “template” and basically copied it over to THIS theme
c) Once copied over, the gap at the top DISAPPEARED.
d) I then started copying OVER elements from the ORIGINAL style.css to the “no-problem” style.css
e) One by one, you can discover the ELEMENT which is the offending one … and bingo … change it!

3) Formatting Titles, subtitles
All of the posts look the same, when it came ot formatting the titles.
That is, there was equal spacing between the header and the subheader (h2 and small)
Basically, its easily solved with ONE css element changing — the h2:

h2: {margin: 30px 0 0 0}
That is — give the h2 some space ABOVE itself, and NONE below itself and voila … you have every post pushed “down” because of that space on top, but it allows the subheader to be flushed against itself.

Marvelous!

Also — it speaks to creating a whole other section on “headers” and the like in CSS

Leave a Reply.

Please note the comments policy

Jun
07
2006
12:55 am