Other posts related to css

CSS Fix for Safari

Wed 26, March 2008 21:07:02

The joys of supporting multiple browsers never end… *sigh*
It just came to my attention that there was a layout glitch on vSlider3 displaying Gallery2 pages when using Safari. In some cases, the photo would move to the top, covering the title area. It worked fine on FireFox and IE, so I didn’t notice it before. Thanks to Stéphane for spotting it.
There’s a new version 3.1.1 with the fix available for download. I recommend upgrading - I don’t want Steve Jobs mad at me for not caring for Safari 8)

Using quotes in vSlider

Mon 28, November 2005 23:28:54

One very interesting debate among web design purists is how to best use CSS to represent quotes. In HTML, it is very simple to markup a block of text as a quote. Simply use the blockquote tag, like this:

<blockquote>The first step to getting the things you
want out of life is this: Decide what
you want.</blockquote>

Using CSS, we can assign a distinct look and feel to make the quote stand out from the text, like making it italic and maybe even indent it a little. A very common technique is to use an image as the quote symbol, and by setting it as the background of the block, we can have a rather nice effect, without any messy “img” tags.
I’ve created a custom quote image for the vSlider theme, and the CSS to use it, so the previous example would be rendered like this:

The first step to getting the things you want out of life is this: Decide what you want.

Now, the problem is that although this looks quite ok, it would be a lot nicer if we could also have the closing quote as well. And this is where the problems begin, since in CSS there is no way we can use two different images as backgrounds for the same block. If we could, it would be rather simple: the opening quote would be defined in the top left, and the closing quote on the bottom right. Since this is not possible, again we have one of those (unfortunately common) situations where we have to mix semantics and presentation. By adding a “div” tag, we can create a nested block with its own style and that can be used as a placeholder for the closing quote.
In the case of vSlider, I have defined this as a class named blockquote-inner. So, we can slightly change our previous example to:

<blockquote>
<div class="blockquote-inner">The first step to getting
the things you want out
of life is this: Decide what you want.</div>
</blockquote>

And the result would be:

The first step to getting the things you want out of life is this: Decide what you want.

Which looks a lot better, if I may say so. Uglier code, true… but nicer result :)
If you are using the vSlider theme, you can give it a try.

Progress

Wed 5, October 2005 10:40:49

I’m still working out some details on my WordPress theme. I’ve made
some nice additions to the side bar, and fixed some CSS problems.
I’m pretty happy about the fact that it is fully XHTML 1.0 compliant,
and the CSS is not only valid, but seems consistent across browsers
(and that was difficult, believe me…). Of course, more testing is still needed.
I’m even thinking of making the theme available for download…