Here’s a handy primer on centering things using CSS.

Remember, the <center> tag is sooo 20th century.

Horizontal centering isn’t very difficult, though vertical centering could use a little better support.

Via: CSS: centering things
[tags]css, center, html, align, alignment[/tags]

Apple has published a new reference to CSS support in Safari version 3 which any web developer concerned with Macintosh support will probably be interested in. You can download the reference as a PDF file so you can use it offline as well.

Safari version 3 is bundled with Leopard, included in the iPhone and is in beta for Windows.

The reference includes CSS properties that are Safari-specific and not supported by other browsers. While I’m not a proponent of using browser-specific extensions they can be helpful to enhance the experience for specific browsers.

(more…)

No, this isn’t an “Internet Explorer is crap” article.

This was very frustrating. I was rewriting the CSS for the web site I’ll be opening up later today, doing a first test of the changes in Firefox, and none of the changes were showing up on the page.

Using Firebug and XRAY, the changes weren’t even appearing in the CSS as they reported it.

I started out tweaking the CSS and became more and more confused as the changes I was doing failed to make any impact on the appearance of the page. Once I found that they weren’t being recognized I thought that Firefox must be caching the CSS file and not reloading it… I found an extension to give me a handy “clear cache” button… that didn’t do it… I went into the preferences and cleared the cache by hand… no good.

I tried the page under Safari and it rendered the way I expected it to. I tweaked the CSS and saw the effects of the tweak. That was good news… but why wasn’t Firefox working? I’d never run into this kind of problem with it before.
(more…)

A very nice new tool called XRAY showed up recently. XRAY works with the Safari, Firefox, Camino and Mozilla web browsers (unfortunately no Opera or Internet Explorer support yet). It helps you examine elements on a web page, bringing up information about their dimensions, inheritance, attributes and styling. Best of all, it requires no installation and it’s free. Just drag its bookmark to your bookmarks bar and click on it when you want to examine a web page.

Thanks very much to Western Civilisation Pty Ltd for sharing this with everyone.
[tags]x-ray, javascript, css, web, bookmarklet[/tags]

(more…)

Apple has published guidelines for developing web content for the iPhone. Some of the guidelines are just good practice (separating HTML, Javascript and CSS, for instance). Some of it is informational (how many pixels you can expect to be available in the iPhone - at least, in this version of it). Some of it is very iPhone-specific (META tags to help control the viewport and scaling).

The article also includes guidelines for encoding audio and video for access over EDGE and Wifi networks.

The iPhone runs a slimmed down version of Apple’s desktop browser “Safari” - you get real HTML, Javascript and CSS support, and it can do Ajax. In my few days with an iPhone I haven’t found any web sites that simply didn’t work on it, including Javascript-heavy sites like Flickr.

(more…)

A while back I rigged up a little ad server to serve Amazon “ads” to our web sites. I wrote it up so that I could easily reuse it for different projects and have a central location for managing it rather than write the code, duplicate it across projects and then have to maintain it all.

Amazon has an affiliate program which earns you from 4% to 10% commissions on purchases done from traffic you drive to Amazon’s web site. You earn money on sales made during a shopping session that weren’t on the item you linked to, too. Like most affiliate programs, the more you sell in a given month, the higher your percentage commission.

My blogs and the web sites I’m working on are all focussed on particular areas. So, for Apocalypse Blog, I put together a list of apocalyptic media available via Amazon and use my ad server to display a random item on each pageview of the blog.

The problem? I embed the ad by using an HTML iframe to contain it. Unfortunately, its positioning is a bit off. As you may be able to tell, the iframe is shifted down and to the right just a bit.
(more…)

I’ve finally updated the Wordpress themes on all three of my blogs. I rolled out the new theme to this blog and Shiny Things a while back; I’ve just moved the Apocalypse Blog over to it, too.

I had several motivations in doing these new themes. I did them from scratch. One motivation was to improve my CSS skills and learn more about cross-browser issues (man do they suck!).

I also wanted to improve the way that the blogs are monetized (that phrase really rolls of the tongue…). The new theme has three elements that help monetize the blogs. The first is the memory finder in the header. The second is the Google ads. The third is the Amazon box in the right hand column (this is only present on the Apocalypse blog at the moment as I haven’t picked out Amazon items for the other blogs yet).

The memory finder feels to me like it fits in well with Shiny Things and isn’t too far off base here (after all, what developer couldn’t use more RAM?), but it doesn’t really fit in at all on the Apocalypse Blog. Then again nobody’s bought memory through it yet so perhaps it’s just pointless.
(more…)

Ajaxian has an article on a Javascript package called Corner.js. It allows you to use CSS class specifications to add some simple effects to images at page-load time - you can round the corners, add shadows and shade the edges. The only things you need to do on your web page are load the script and add the appropriate CSS class definitions to your images.

Corner.js works with Firefox 1.5+, Safari and Opera 9+. Older browsers and Internet Explorer will just display images normally without the added effects.

Ajaxian » Canvas Corner 1.0
[tags]rounded corners, javascript, css, images, web[/tags]

Download Squad has link to a list of 53 CSS tutorials - essentially an online cookbook of CSS techniques to do things like navigation, tabs, star ratings, pie charts, bar charts, drop caps, curves and footnotes. If you’re looking for an example of how to do that-certain-something with CSS, this is a good resource.

Via: 53 CSS tutorials anyone can do - Download Squad
[tags]css, tutorials, cookbook[/tags]

So I had my Wordpress theme worked out using the “3 Column Fluid Layout” that I mentioned in an earlier article, and I tested it with Safari, Firefox, Opera and Internet Explorer 6 and it looked the way it should. I skimped on testing it with Internet Explorer 7 because I didn’t have space on my MacBook Pro for another Parallels disk image for IE 7. So, of course, it worked poorly with IE 7.

What was I thinking? What, IE 7 might have a bug?

(more…)