RosalindGardner.com

Learn Blogging & Affiliate Marketing with Rosalind Gardner

How to Fix Those “Squishy” Headlines

By

Here the CSS trick for fixing those squished headlines on your blog such as the H1 Heading shown in the screenshot below.

Squished Headline

The original code in the CSS (cascading style sheet) for that H1 was as follows:

#content h1 {
font-size: 25px;
color:#036;
background: transparent;
font-family: Verdana, ‘Trebuchet MS', Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 10px 0px 0px 0px;
}

To increase the height of the line, I added “line-height: 28px;” as shown in bold in the code below. Because the font size is 25px, I simply added 3 pixels to the line height to put some space in between the lines.

#content h1 {
font-size: 25px;
line-height: 28px;
color:#036;
background: transparent;
font-family: Verdana, ‘Trebuchet MS', Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 10px 0px 0px 0px;
}

Alternatively, you can set the line height using a number value, e.g. “line-height: 1.2;” The standard line-height is 1, so 1.2 increases the line height. You can also shrink a line height by half as well by using the value 0.5… and so on and so forth.

Here's how the H1 Heading looked when I set the line height to 1.2.

Unsquished Headline

The other alternative is to use a percent value, i.e. 100% is standard line height and 200% would double the size.

OK, now go fix your headlines! 🙂

How to Correct Bulleted List Errors with CSS

By

I've been running across more and more bulleted list errors on webpages of late. An unordered bulleted list should be coded as follows:

<UL>
<LI>1st Item</LI>
<LI>2nd Item </LI>
<LI>3rd Item</LI>
</UL>

The resulting bulleted list will appear like this:

  • 1st Item
  • 2nd Item
  • 3rd Item

However, I frequently see this awful looking mess on webpages and blogs:

<p class=”MsoNormal”><!–[if !supportLists]–><!–[endif]–> 1st Item</p>
<p class=”MsoNormal”><!–[if !supportLists]–><!–[endif]–> 2nd Item</p>
<p class=”MsoNormal”><!–[if !supportLists]–><!–[endif]–> 3rd Item</p>

Why is that happening?

Well, in a nutshell, those bloggers are probably using Microsoft Word to create their posts, which they then convert into HTML code and copy and paste into to their blogs.

That method might work but for the fact that none of the CSS (cascading style sheets) on the sites showing the errors specified paramaters for rendering either a <UL> (unordered list) or a <LI> (list item).

At very least, the following code should be placed within their stylesheets:

ul li {
display: inline;
list-style-type: none;
}

To learn more about CSS and coding for bulleted lists, visit the W3Schools site.

[tags]CSS, lists, bulleted list, unordered list[/tags]

Categories