Simple fix for IE6 PNG transparency
This is a simple method to compensate for Internet Explorer 6’s lack of PNG alpha transparency support using a .htc file and a blank .gif.
Simply place the two files into a desired folder and use this small piece of CSS to activate the fix when the user is using IE6.
img, div, input { behavior: url(“http://www.yourdomain.co.uk/pngfix/pngfix.htc”) }”
Place the code between the <head></head> tags, be sure to change the location to the loaction where you placed the files.
<!--[if IE 6]>
<style type="text/css" media="screen">
img, div, input { behavior: url("http://www.yourdomain.co.uk/pngfix/pngfix.htc") }
</style>
<![endif]-->
This piece of code can also be used as part of a .CSS document to save time if multiple pages use PNG transparency.
Download Files: IE6PNGFix.zip
Rounded corners with CSS 3
A new introduction in CSS 3 is the ability to create rounded corners using CSS rather than having to rely on images. It is very simple to apply a round corner to a box items using a border tag and the new radius tag.
Both Firefox and Safari support this feature (but as usual Internet Explorer does not currently support this feature) but each browser requires its own tag to created rounded corners.
Firefox uses: -moz-border-radius: 0px;
Safari uses: -webkit-border-radius: 0px;
To create rounded corners on a box element simply apply these tags to the CSS and give it a desired radius (the larger the radius the rounder the corners) and the border width and colour.
Read the rest of this entry »
CSS Opacity In Internet Explorer.
For some reason Microsoft decided not to use the opacity tag in CSS to set an items opacity, instead they went with the filter: alpha option. Both do pretty much the same thing, the only difference is that opacity uses a scale from 0.0 to 1.0 while filter: alpha uses 0 to 100.
Opacity Syntax (0.0 invisible – 1.0 visible):
opacity: 0.5;
Internet Explorer filter:alpha Syntax (0 invisible – 100 visible):
filter: alpha(opacity = 50);
When applied together the syntax will look similar to that below and will apply a 0.5 opacity to the assigned object.
.transparent {
opacity: 0.5;
filter: alpha(opacity = 50);}
In IE the object must also be given a position in order for IE to display the transparency correctly. One way is to apply the {zoom: ;} tag, but standard positioning will also work. I have also noticed however that when IE displays text with transparency it will (general) distort the text, for some strange reason only known to Microsoft programmers.
Mac OS X Indent Text with CSS 3
One of the new features of CSS 3 is the ability to apply drop shadows, this new feature can produce many different effects, ranging from solid box shadows to flaming text, but for now here is how to create indented text, similar to text found on Mac OS X.
The code below will give web text the indented shadow shown above.
text-shadow: 1 2 3 4
1. Colour of shadow.
2. Horizontal position.
3. Vertical position.
4. Blur radius.
The completed code looks like this:
text-shadow: #CCCCCC 0px 1px 0px;
If your browser supports CSS 3 then the text below should have the indent shadow.
Validate CSS 3 with the W3C Validator.
At the moment the W3C CSS Validator uses CSS 2.1 as the default profile when validating CSS, because of this when you attempt to validate CSS 3 it shows it as invalid.
The default profile will be OK for most users, but as more and more CSS 3 features are been implemented onto peoples sites it is only a matter of time before CSS 3 becomes the default profile.
In the meantime the following pieces of code will link to the CSS3 profile on the W3C CSS Validator site.
To use a pre-set URL:
http://jigsaw.w3.org/css-validator/validator?uri=http://dannydickinson.co.uk&profile=css3
Or use the referer method:
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
Remember to change “http://dannydickinson.co.uk” with your website.
New site, new blog.
I’m due to release the next version of my portfolio and have redesigned the blog to better suit this new theme. Because of this I have decided to clean up my posts, remove unwanted posts and repost the ones I will keep.
WPtouch Plugin.
There is a superb free plugin for WordPress that will create a mobile version of your blog, compatible with devices such as the iPhone.
Simply download, install and activate the plugin and your mobile site is done it’s as simple as that. There are several options available but on the whole all you had to do is click the activate button to create the mobile blog.
You can download he plugin from here.
Scientific Calculator on the iPhone.
There are many app’s on the AppStore that charge for a basic scientific calculator, however there is one already built into the iPhone. To access the scientific calculator simply turn your phone horizontally and it will change from the regular calculator to the scientific version.
Redirect WordPress 404 Pages.
If you would prefer your WordPress blog to redirect the user to your home page (or any page you want) all you need to do is insert the following code into the top of your 404.php file for the theme you are using.
< ?php
header("Status: 301 Moved Permanently");
header("Location: http://YourSite.co.uk");
?>
Replace Yoursite.co.uk with the URL you want to use and your error page should now redirect visitors to that page automatically.
iPhone Screen Resolution.
I recently created my first iPhone site for my portfolio, not the greatest iPhone site ever but does it’s job. I thought I would create a simple diagram highlighting the dimensions of the current iPhone screen to help those creating those own iPhone sites to ensuring their site fits the iPhone’s display.
