Doubled Float-Margin Bug
Peekaboo Bug
IE 6 Duplicate Characters Bug
Internet Explorer and the
Expanding Box Problem
Guillotine Bug
The Float Model Problem
Three Pixel Text Jog
IE and Italics
Inherited margins on form elements
Quirky Percentages In IE6's
Visual Formatting Model
IE/Win Line-height Bug
IE6 Border Chaos
Disappearing List-Background Bug
Unscrollable Content Bug
Duplicate Indent Bug
Escaping Floats Bug
Creeping Text Bug
Missing First Letter Bug
Phantom Box Bug

Just some CSS3 fun I had this morning on twitter.

h1 ~ div > p span[title^='bo'] strong:last-child { 
	color: red;
}

span[title$=foo] strong:first-child { 
	font-style:italic;
}

span:not([title^='dd']) { 
	font-size:2em;
}

If you feel like it I would like to see the html in the comments...

In this site I use several html5 elements and attributes. One of them is <input type="search" /> which gives me (for instance) a search button on my Iphone. It degrades to an text kinda input so it's backwards compatible.

What it also does is look kinda ugly in safari, with rounded corners and a frigging shadow and so on.

Default rendering in safari 4 os x

Custom rendering

The way to render this is this one line of css:

input[type="search"]{
  -webkit-appearance:textfield;
  /* textfield instead of searchbox */
  border: 1px solid #39c;
  /* and a border of course but that's not relevant :) */ 
}

But for now that's it, on simple line in your css and apple no longers controls the style of your search field and you can style it (semi) consistent over browsers. A complete list of webkit specific styles can be found on Qooxdoo.org.

As I know, one disadvantage is that the search box does not longer appear as the default one in safari. But in my opinion the search box is not in usage as of now, so people are now more baffled by a strange box than they recognize the search box. In the future, however I think that this trick is no longer needed nor wanted.

I just decided to eat my own dogfood and upped wnas.nl to html5. Including some of the new elements like aside, header and such. Please let me know what you think.

NOTE

the design will be done some time next week...

I recently started using @font-face in a major website. The time has come to free ourselves from the shackles of the webfonts. I got the chance to host the fonts on a amazon s3 cloudfront instance. Really fast and with the 'bullet-proof @font-face' solution of Paul Irish I decided to give it a go.

So I started testing and everything looked very promising, even the FOUT wasn't too bad. But when we got around to implementing it in the real templates for the site, my esteemed colleague Maarten found a flaw.

It seems that the .otf file that we use isn't being read properly in Firefox, but instead gives a weird error.

Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf 

Safari uses the same .otf file and displays it properly. But with this CSS:

@font-face { 
  font-family:'FrescoStdNormalRegular';
  src: url('http://wnas.nl/fonts/FrescoStd-Normal.eot');
  src: local('no local - Fresco Std Normal Regular'),local('no local-FrescoStd-Normal'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.woff') 
    format('woff'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.otf') 
    format('opentype'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.svg#FrescoStd-Normal') 
    format('svg'); 
}
#test{
	font-family:FrescoStdNormalRegular,courier;
}

FrescoStdNormalRegular,courier;

Firefox, as you can see, just doesn't render the font, can anyone help me and point out what I am doing wrong? Please let me know in the comments...

Update

It seems that this does work on my website, but not locally... Here is a test page where I get two different responses from firefox 3.5.7 on os X 10.6.2.

• on the Imac it says : The resource from this URL is not text: http://wnas.nl/fonts/FrescoStd-Normal.otf
• And the macbook pro says: Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf

Get the source from here and let me know what happens on your machines through the comments or twitter.

#WIN

Thanks to Jeroen who at least does some research, before asking the rest to help, we have a cause and a solution. On the mozzilla page about font-face it states:

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site.

So you should set this in your .htaccess file and you're right as rain.

# example Apache .htaccess file to add access control header
 
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Thanks everybody for helping, I hope someone else benefits from this as well. I just learned something new, the main reason I really like my job!