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

Australian Web Week has been born, this year from October 2 - 9. There is not much on at the moment, however, give it a couple of years and I think it will be a really exciting time for the Australian digital industry. Taken from the Australian Web Week website (http://webweek.com.au) the week involves:

…the best of the Australian web industry - sites and applications, designers and designs, innovative Australians taking it to the world. Over ten days professionals across the industry from around the country and the from around the world will come together to connect, learn and celebrate the strength of the Australian web industry.

Technorati Tags: Australian Web Week, Web

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 have Firefox 3 open basically all day while I am at work and just to spice things up I thought I would share some of its hidden features / Easter eggs.

In the address bar try typing the following:

1. about:mozilla
   - The Book of Mozilla, 11:9
2. about:robots
   - Welcome Humans! from the robots. Also, try pressing the button.
3. chrome://browser/content/browser.xul
   - Opens another browser inside the current browser

Enjoy!

Technorati Tags: Firefox, Easter Eggs, Web

On and off I have been thinking of redesigning this website and the first step is always the logo. So after months I have finally got around to knocking something up in Illustrator.

What do you think?

Technorati Tags: Personal, Web design, Logo Design

Has anyone ever search for a solution to a problem in Google to only find that high up on the search results page comes Experts Exchange? I searched for ‘css background image on textarea‘ and low and behold Experts Exchange comes up in 4th position. Just like every other time I am meet with the message:

“View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you’re done.”

I always wondered how they get Google to cache this page if I can’t see it, I even checked Google’s cache view with no luck.

But wait there is a simple solution to this problem…. scroll down to the bottom and BAM there is the answer! I can’t believe I never saw that after 6 years of searching for programming problems.

I hope someone else find this useful. Enjoy!

Technorati Tags: Web, Personal, Interesting Sites, Hacking

I have run across this problem a few times lately and I thought I would write a post here as a way of remembering how to do it.

So you are doing some DOM Scripting and you want to find the first parent element that has a particular class. I have been using jQuery a lot lately and I initially thought this would be easy:

$('#test').parents('.parent-element');


However, as you notice with the example below you get all the parent elements with the specified class. So all we need to do now is filter out just the first element, like so:

$('#test').parents('.parent-element').filter(':first');


Done and done, see some example code to show it in action: Use jQuery to find the first parent element

I hope someone else finds this useful.

Technorati Tags: jQuery, JavaScript, Web, Example

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