James Oppenheim’s blog

Here is a fun IE CSS bug:

“In IE an absolutely positioned box sometimes disappears when in the source code it is the previous or the next sibling of a float”

After successfully tracking down this bug a couple of months ago I released that I had come across it before. This time so I don’t forget I will post it here. There needs to be a surrounding / separating div between the two elements to stop this.

Some interesting reading on the topic so we can all spot this bug when it comes up next:

1. http://www.brunildo.org/test/IE_raf3.html
2. http://www.brunildo.org/test/IE_raf3.pl

Technorati Tags: CSS, Web Standards, Internet Explorer, IE

Il buono, il brutto, il cattivo.

I spend most of my daily working hours as a front-end developer creating custom HTML, CSS, JavaScript for the web. However, from time to time I have to dip my toes into HTML emails. Which is not such a stretch as after all they use the same underlying technologies. Making them even more comparable is the pain I have to go through bending, cheating and hacking the code to fit with a Microsoft product:

Internet Explorer 6 is to web development as Outlook 2007 is to HTML email development - A massive time waster!

As outlined back in January 2007 by the Campaign Monitor guys Microsoft Outlook 2007 uses the Word rendering engine to display emails, that means:

1. No background images
2. Poor background colour support
3. No support for float or position
4. Shocking box model support

The Good

Internet Explorer 8 has a high level of CSS 2.1 support, which is a fantastic move in the right direction.

The Bad

Internet Explorer 6 and its additional development time to support it will be with us for a long time to come and Internet Explorer 8 does not support any CSS3.

The Ugly

Just when you though Microsoft was listening to standards bodies and creating a better Internet environment for all they mention that Outlook 2010 will also still use the Word rendering engine.

Hopefully, the Email Standards Project’s latest website http://fixoutlook.org/ will implore Microsoft to do the right thing and stop using Microsoft Word to render emails. Please, please, please. If I say it three times does it become true? I hope so.

Technorati Tags: Microsoft, Outlook, Email Standards, fixoutlook.org

I had a thought the other day when I was doing some CSS image replacement - would it not be really cool if CSS3 were to introduce a foreground-image property?

Normally, I use the Shea Enhancement image replacement method that lets both screen readers see the text, provides a tooltip and also shows the text when images are turned off. However, there is one drawback: the extra span tag.

A foreground-image would sit on top of the text node, rather than behind it, and have the same options as background-image. No more unnecessary span tags - sweet!

Technorati Tags: CSS, foreground-image, Web Standards

It is possible to use multiple CSS classes on one HTML element. For example:

class="first second"

This is fantastic to produce reusable default styles that can be slightly overridden by the use of a second, third or fourth class. However, what becomes more interesting is that you can use both of the CSS classes in combination to create a more specific class.

For example, if the first class was ‘green’:


.first {
background-color: green;
}


and the ’second’ class was red:


.second {
background-color: red;
}


But when an element has both classes together ‘.first.second’ you get yellow.

.first.second {
background-color: yellow;
}

A point to note with the multiple classes is that the order is not important, for example: ‘.first.second’ is the same as ‘.second.first’.

However, there is a problem! In IE6, ‘.first.second’ works exactly the same way as ‘.second’. This is because IE6 doesn’t understand the chain of classes within a CSS selector, but instead only reads the last class in the chain.

Because of this we can’t safely use this technique if we want to support IE6. However, we can use it to create a IE6 CSS hack! To do this we add a random class that does not exist on the element before the real one and only IE6 will still match it. For example:


.ie6.third {
background-color: orange;
}


I have setup a demo page to demonstrate the multiple CSS classes & the IE6 CSS hack.

Technorati Tags: CSS, Examples, Web Standards, IE6, CSS hacks

Welcome to the 2009 CSS Naked Day. It is a celebration of semantic HTML markup by turning off your website CSS styles on 9th April each year.

I am in - do you want to get naked too? You will have to be quick it only lasts a day.

Technorati Tags: Areeba, CSS, Personal, Web Standards, Usability

Apple’s Safari web browser has for a while had the ability for users to drag the bottom right corner of a textarea and resize it to make room for more content.

While resizing textareas creates a nice unobtrusive enhancement, unfortunately it can sometimes break your CSS layout as well. So how can you turn it off? Well you actually have two easy options:

Option 1: Add min and max widths to your textarea so that Safari users can only resize it as far as you will let them.


textarea {
max-width: 300px;
max-height: 300px;
}


Option 2: If you do not want to let a Safari user resize the textarea at all, you can use the resize CSS property.

textarea{
resize: none;
}


Nice and easy - see my example of How to turn off Safari’s textarea expand.

Technorati Tags: CSS, Web Standards, Safari, Web browsers, Textarea resize

With the current dialogue about the merit of using a reset.css stylesheet within your front-end development workflow I thought it might be intriguing to delve into the inner workings of Firefox to see what the actual default styles were. The reasoning behind using a reset.css is this: with every browsers providing it’s own interpretation on each HTML element default styling, developing consistent pixel perfect designs is difficult unless you reset all the default styles back to ground zero before applying your own design. While I will not debate the pros and cons of a reset stylesheet here and now I will show you two ways of accessing Mozilla Firefox’s default stylesheet. After some digging around on my XP file system I came across the following directory: C:\Program Files\Mozilla Firefox\res and within that directory are the following Cascading Style Sheets:

1. EditorOverride.css
2. forms.css
3. html.css
4. mathml.css
5. quirk.css
6. svg.css
7. ua.css
8. viewsource.css

Note you can also access these stylesheets by typing: resource://gre/res/html.css and: resource://gre/res/forms.css etc, etc into the address bar. With this information on board we should have an easier time deciding if we really need to change the default behavior of the current element we are styling.

Related Posts

• Firefox about:config, customising Firefox the easy way

Technorati Tags: Web, Web Standards, CSS, stylesheet, Firefox

IE8 has just announced that it renders the Acid2 Face Test correctly.

Wow, this is huge news for all Font-end Developers (FEDs) around the world. Not to mention all the users that browse the web with Internet Explorer by default. This is a huge step considering the considerable flack Microsoft is getting at the moment from Opera.

As a comparison I thought I would see how other web browsers managed with the Acid2 test, Browser Shots will enlighten us all.

All we have to do now is wait for IE8 to be released and subsequently adopted.

Technorati Tags: Web Standards, Acid2 Test, IE8, Web

Ever wondered if websites need to look exactly the same in every browser? Well the world renowned front-end developer and author Dan Cederholm answers the question on a new domain:

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

You have to love the length of the domain name!

Technorati Tags: CSS, Web Standards, Interesting Website, Dan Cederholm, Simple Bits, Areeba

With all the hype surrounding Search Engine Optimisation (SEO) you would be forgiven thinking that you need a degree in computer science to optimise your website for the entire gamut of search engines. Fortunately this is note the case! As long you follow some simple rules you too can come up number one on Google.

Do I need an SEO company?

At my day job many clients ask if they should use a Search Engine Optimisation company. I always suggest to be very careful with SEO companies especially if the company is offering ‘guaranteed number one position’ or ’submission to 1000 website directories’. What I always suggest to do first is to write meaningful and unique content for your website and then do some basic search engine optimisation yourself. By using valid and semantically meaningful HTML code with good content you will be well on your way to achieving a good search engine ranking.

Content

It is often said that content rules the web and this is so very true. You can have a perfectly optimised and professionally built website, but if you don’t have content there is nothing for a search engine robot to index. Writing good and relevant content is the most important part of any search engine optimisation strategy. When writing the content for you website try to think what would someone actually type into a search engine to find what you are writing about. Once you have worked out these keywords or keyword phrases you need to try and mention them as often as possible, consequently making your content more relevant to those terms. Updating your website with good keyword dense content regularly will do two things to help your site:

1. It will encourage people to come back to your website because they will want to see the next installment of your content and;
2. it will make search engine robots revisit your website more often enabling your content to get indexed quicker.

Page titles

Following on from writing good keyword dense content I believe is the second most import part of search engine optimisation - writing good page titles. Much the same can be said about writing page titles as about writing content; it must be both relevant and keyword dense. One basic mistake often made is to have the same page title for each website page, this makes it extremely hard for both users and search engine robots to distinguish between each of your website pages. It is especially important to write good page titles as they are displayed prominently in search engine results. Because of this a website page title must be relevant while also enticing the user to action your website by clicking on your link.

Semantic HTML

Building your site with semantic and meaningful HTML is essential. Using clean and lightweight HTML code will reduce your content to markup ratio, while also structuring your code in a meaningful way for the search engine robots. Start building your website by thinking about the content and how it should be presented without styles. For example, use h1 to h6 elements to mark up headings and ul’s to markup list elements. Then use progressive enhancement of CSS, JavaScript or Flash to add style and functionality to your website leaving your HTML code as it was intended.

SEO friendly URLs

Many search engines find it hard to follow links where the URL has an appended query strings on the end. Google says that it follows up to two Get variables, however, it is much better to avoid them whenever possible. A solution to this is to use Apache’s mod_rewrite functionality to enable you to add keywords into the URL while also providing indexable links.

Inbound links

A comprehensive link building strategy is essential to a search engine optimisation, often however, this proves to be the hardest part of the process. One good place to start to find inbound links to your website are directories such as Dmoz and Yahoo!. Directories provide topical text links to your website which are seen as a vote to the importances of your website.

What to avoid

There are some arcane web development techniques that should be avioded to help maintain your search engine ranking. Some of the horrible old web development techniques include:

1. Frames - Frames provide problems when someone follows a search engine link to a famed page without the parent HTML page be present. This can be confusing and frustrating because parts of the website are missing.
2. Flash - Because search engine robots find it hard to read Flash files when they are used for an entire website none of the content will get indexed. This problem can be fixed with progressive enhancement see: SEO friendly Flash programming for more information.
3. JavaScript inserted navigation and links - Search engine robots do not read JavaScript, therefore, they will not be able to follow the inserted navigation and links.
4. Font tags - meaningless tags that should be replaced with semantic elements such as h2 and strong

By avoiding some of the old web development techniques your website will be in good stead to be fully indexed and placed high on search engine results.

Conclusion

While everything I have mentioned in this article is neither new or groundbreaking for any SEO consultant or good web developer, it is an easy way to save money on a search engine optimisation company while increasing your websites search engine visibility and search engine ranking. One word of caution however, this is not an instant process, it takes months, even years to get the right mix of content, HTML structure and inbound links.

Technorati Tags: SEO, search engine optimisation, website optimisation