WP – Add class name to first paragraph in blog post

When re-designing my blog I wanted to display the first paragraph of each blog post in bold text. A CSS3 selector could have been used, but wouldn’t work in older browsers such as IE6.

Instead I decided to write a very simple function to add a class name to the first paragraph by filtering the content, then setting the styles accordingly in my theme CSS file. Continue reading “WP – Add class name to first paragraph in blog post”

A Taste of Something Different…

It’s been a while since writing my last blog post back in June, but I’m pleased to be getting back into it again.

One of the main reasons for for the lack of updates is due to the stack of work I’ve been attempting to get through and my attempts at redesigning the layout of my blog.

I had a couple of different concepts for the redesign, but this is the design I eventually went with. Continue reading “A Taste of Something Different…”

CSS: Targeting Safari 3 only

Although Safari 3 tends to render layouts the same as the other leading popular browsers, it prefers to use it’s “aqua” button styling for standard sized form buttons.

One solution for this is to set a dimension (width or height) to the button.

To target Safari 3 in CSS you can use the following to add or override any existing attributes, such as the height of a button:

@media screen and (-webkit-min-device-pixel-ratio:0) {
	button {
		height: 40px;
	}
}

If required, multiple selectors can be added into a single block.

CSS: Extra Button Padding in IE

Today at work I was asked how to remove the extra padding added to buttons (both the button tag and input[type=button]) in Internet Explorer.

The Problem:

In the example below there is a standard button with 10px padding on all sides. Internet explorer chooses to add additional horizontal padding:

The solution:

After coming across this problem myself in the past, I eventually remembered that there are two CSS styles you can add to fix this bug feature in IE:

button {
	width: auto;
	overflow: visible;
}