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”
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…”
Whilst attempting to cross browser test a jQuery plug-in that I’m currently working on, I noticed that my opacity settings were being ignored in my current version of Opera (9.23).
$("#id").css({opacity: 0.8});
It turns out that the latest version of jQuery (1.3.1) doesn’t believe that Opera 9.2 supports CSS opacity, and therefore it is ignored completely. Continue reading “CSS Opacity in Opera using jQuery”
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.
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;
}
Stv.Whtly 