Optimus Pete » css

The 100% Easy-2-Read Standard (if you can find it)

Pete — Tue, 06 Feb 2007 19:09:00 +0000

I read a great Article on how to design websites so they’re easy to read and aesthetically pleasing yesterday on informationarchitects.jp. I was going to do a short post linking to the article and a few of their others I found especially good, however the article seems to have disappeared from their site! They obviously haven’t heard cool URI’s don’t change. Thankfully I managed to grab myself a copy from the Google cache and have stuck it up here for your viewing pleasure. Enjoy!

When I have time to start tweaking the CSS for this site I think I’ll increase the font sizes and alter a few of the colours. Currently the fonts haven’t been changed from the original Binary News theme I used for the base of the design.
# Pete Graham

CSS tips and articles

Pete — Thu, 01 Feb 2007 18:08:17 +0000

I began teaching myself Cascading Style Sheets (CSS) in 2004 when I graduated from University and started work in website development. At the time it was difficult to find well written resources that thoroughly explained how various CSS techniques worked.

In the past few years, CSS adoption has increased dramatically. These days most high profile websites use CSS rather than tables for their design. Although amazon.co.uk and bbc news still have partially table based layouts, naughty!

Thankfully they are now many excellent articles available on CSS. Yesterday while working my way though some bug fixes on phuser.com I stumbled upon some brilliant ones that I hadn’t read before.

Emil Stenstrom has written an excellent article on how to Cross-browser CSS for your site. One tip I picked up is to start your CSS files with:

PLAIN TEXT

CSS:

* { margin: 0; padding: 0; }

This will remove all default element stylings which can be a right pain in the @r$e when trying to get your site to render consistently cross browser. A clever little hack he suggests is the "star html" hack:

PLAIN TEXT

CSS:

* html #element { code; }

This is valid CSS but only IE will apply "code" to "#element". I think its much cleaner than other browser hacks I’ve seen. Many of his articles are well worth a read but I would especially recommend his guide on structuring large CSS files . Real hackers don't use css is more amusing than useful but still interesting.

For people wanting to learn more about CSS and web design techniques in general A List Apart is well worth checking out. Also worth a mention is this fix for the two columns with equal height layout, it uses Javascript instead of the normal background image fix.
/* Pete Graham */

MultipleIEs Cookie Problem Solved

Pete — Wed, 31 Jan 2007 12:14:28 +0000

Last weekend I wrote about how to run IE6 and IE7 on the same computer. Now this technique was working very well until I needed to test some CSS modifications that I had made on the phuser interface in IE6. It was then I discovered the standalone version of IE6 has a problem with storing cookies, which (if you excuse the pun) renders it pretty useless for testing sites that require a login.

Thankfully I discovered that tredosoft.com have fixed this cookie problem, they offer a handy windows installer that will install IE3, IE4.01, IE5, IE5.5 and IE6. Wow image the hours and hours of fun you can have with all those different versions of Internet Explorer! Also it’s bound to really impress chicks that you’re running so many versions of IE on one PC, we all know chicks dig website development. So what are you waiting for download it now!

Click the image above to see it in its full resolution glory!

# Pete Graham

IG Syntax Higliter CSS Width Fix for IE6

Pete — Sat, 27 Jan 2007 18:46:03 +0000

If you have a site with a narrow main content area like this blog then the IG Syntax Highliter plugin can break your layout in Internet Explorer 6. This problem can be easily solved by modfying the file syntax_hilite_css.css. Here is where this file is located:

your_blogs_dir/wp-content/plugins/ig_syntax_hilite/css/syntax_hilite_css.css

Below is the first change I've made aroud line 7, I have commented out the original width and replaced it with a smaller one.

PLAIN TEXT

CSS:

.syntax_hilite {
/*WIDTH: 500px*/
WIDTH: 450px
}

The second change required is around line 19, again I have commented out the original code.

PLAIN TEXT

CSS:

.igBar {
/*WIDTH: 511px*/
WIDTH: 461px
}

Upload this file to your wordpress install and your site design should now render correctly. In this example I have reduced the width of the code box by 50 pixels you may want to alter yours by a different amount.

/* Pete Graham */

Curse you Internet Explorer!

Pete — Sat, 27 Jan 2007 17:36:42 +0000

I was pretty pleased with the code syntax highlighting plugin I installed yesterday, just before I was about to finish work I got the Blog up in IE6 Arrrggghhh! IE6 redenders the width of the main content column smaller than Firefox and IE7, this causes the main content to be displayed below the content in the right sidebar, not good.

I think the fix is going to be fairly easy, I'll upload it here when I get it sorted.

I also installed the live calendar plugin on my Peteamania blog, unfortunatley I've noticed that this plugin doesn't work correctly in IE7 (the hyperlinks never load). I don't think I can be bothered to fix this bug, although its a nifty little AJAX plugin it doesn't offer much improved functionality over the bog standard wordpress calendar.

# Pete Graham

Blog Makeover

Pete — Fri, 12 Jan 2007 18:15:05 +0000

I have updated this blog to use my modified version of the Binary News wordpress theme, hope you like it. This will be an intermediate look for the blog until I have time to write my own CSS, I thought it would be a good idea to move away from the default wordpress theme.

Ultimately I want all parts of the petegraham.co.uk to have the same layout but different header banners, I would like to have a unifying colour scheme with variations for each sub-domain. One step at a time though..

/* Pete Graham */

Fix For Binary News WordPress Theme

Pete — Fri, 12 Jan 2007 17:03:06 +0000

As Phevans suggested there was a problem with the widths on the columns. I have modified the style.css file, click here to download it. I also noticed that the paragraph spacing is a bit odd (you get the same width between paragraphs that you get between lines) so I have modified that too.
To install this file you will need to place it in: your_wordpress_directory/wp-content/themes/binary-news-10

I have not changed this blogs theme to Binary News yet as I'm adding some further modifications to the css.

# Pete Graham