Skip to navigation | Skip to content

Archive for the category ‘XHTML/CSS’

Tweaks for WordPress Subscribers

30th December 2008

I’m currently building a WordPress site where I want people to be able to sign up as Subscribers. They won’t have the option to write anything to the site, so they won’t be Authors or Editors—Subscribers seems appropriate.

I’ve ended up having to tweak WordPress in several ways to make the system work as I want. At the moment I’m erring on the side of coding minor adjustments into my custom themes. Plugins are more flexible, but if you just need to change a small thing, coding it into the theme leaves your site with less overhead from another plugin being loaded.

So, here are a few little plugin-free techniques for tweaking you WP Subscriber system.

Read more »

Permalink  |  Posted in WordPress, XHTML/CSS  |  Comments closed  | 

CSS debugging in Internet Explorer

11th October 2007

I develop XHTML/CSS primarily in Firefox, followed by testing in tweaks in other browsers. Apart from Firefox being my primary browser anyway, most of the reason for this is that there are some tools for it that have become as essential to me as my text editor (these days, that’s TopStyle). This handy trio are:

  • Firebug – simply incredible
  • Web Developer Toolbar – still very valuable, with some great little features
  • ColorZilla – a good colour picker, plus some things that the others do, but slightly quicker to access

This is all great. However, more often than not, the times when you really need this sort of stuff is in Internet Explorer – especially pre-7 versions.

I’ve not had much luck in IE 6 with the Firebug Lite implementation. I have just come across a good bookmarklet called XRAY. Compared to the Swiss Army Knives above, it’s very basic, but it provides key information about page elements that can really speed debugging along.

Permalink  |  Posted in Internet Explorer, XHTML/CSS  |  Comments closed  | 

Vertically aligned content and sidebar with CSS

20th June 2007

One of the steps backwards taken with CSS is control of vertical stuff. Getting coloured sidebar and content areas to be equal height even when their contents are vertically unequal, and vertically centering something in a box are just two things that are (1) dead easy with tables, (2) quite common design requirements, and (3) a bit fiddly at best with current CSS standards.

Things may be changing with new CSS standards, and with the evolution of various hacks and workarounds. Anyway, I just found a solution for a site I’m working on which seems to work well in this instance. I may have reinvented some wheel or other, but here it is.

Read more »

Permalink  |  Posted in XHTML/CSS  |  Comments closed  | 

Google, SEO & CSS image replacement

9th June 2007

I’ve just been reading about possible clashes between the CSS “image replacement” technique that I use and Google’s rules about spam techniques.

Image replacement involves using CSS to hide the text for an element (e.g. a <h1>), and setting the background-image for that element to replace it with an image. Users with visual browsers with CSS get the image; text-only browsers, bots, etc., just see plain text.

It’s not without its detractors and slight drawbacks, but it’s a widespread technique. A quick scan of big-name sites as of writing found it in evidence on stopdesign.com, mezzoblue.com and adobe.com.

Read more »

Permalink  |  Posted in search engines, XHTML/CSS  |  Comments closed  | 

IE CSS box height bug

25th April 2007

A small but infuriating CSS bug in IE… No shit.

I’m creating a box with rounded corners around some content using my usual method:

  • Place empty <div>s with ids above and below the content <div>
  • Create background images for the top and bottom of the box <div>s, and put them in (with fixed width and height for the <div>) with CSS
  • Continue the border along either side of the content <div> with CSS borders

All well and good. Only, on IE6/Win, the top <div> wouldn’t shrink to less than about 16px, leaving a gap of whitespace below the 8px high background image.

After much searching, I found a workaround buried in the life-saving Explorer Exposed pages. You can read about the ins and outs over there; here you’re just going to get a nice quick fix.

Put this in the CSS rule for the <div>:

overflow: hidden;

Permalink  |  Posted in Internet Explorer, XHTML/CSS  |  Comments closed  | 

View complete archives »