Using jQuery to overcome IE deficiencies

OK. Here is my attempt to add some code to the blog.
I recently faced a problem that IE doesn't really support the visibility style properly. Now you can't really have conditions in your CSS code. I have always found a problem with using those awful !IE comments in the HTML head.

What you can do is add CSS elements to your page using jQuery. You can therefore put conditions in your jQuery and apply one type of style to IE and another to browsers which are prepared to work within W3C standards.

if($.browser.msie)
{
$("#myID").css("display","none");
}
else
{
$("#myID").css("visibility","collapse");
}

Lessons Learned Creating a Browser Test Using XHTML, PHP and JavaScript

You're going to need information delivered by the client useragent going into PHP. To do this add the following code
$cua = $_SERVER['HTTP_USER_AGENT'];
You then need to strip out the various parts you're going to need. See image below.


For example, I stripped out the items between the brackets and added them to an array.
using things like stripos($ua, '(');
Here we start to find a few Windows issues.
If you also need to know what Window version your are using you will need to take the Platform token and interpret it. Eg
'Windows NT 6.1' = 'Windows 7'
'Windows NT 6.0' = 'Windows Vista'
'Windows NT 5.2' = 'Windows Server 2003 or Windows XP x64 Edition'
'Windows NT 5.1' = 'Windows XP'

Another Windows problem. If you put your browser test on a server IE version 8.0 can report itself as IE 7.0. So you need to pick out the word 'trident' from your user agent and force it to appear the browser such as this JavaScript which you can change for PHP:
string browserType = Request.Browser.Type;
// IE8 is not reported in browser type but it can be detected
// by word "Trident" in the user agent if (Request.UserAgent.ToUpper().Contains("TRIDENT")) browserType = browserType.Replace("IE7", "IE8");

That's all for now.

How to create a semi-transparent png for your web page

Things you'll need

• A proper graphics editor link GIMP.
• A proper web browser like Mozilla Firefox.
• A proper text editor like gedit.

Graphics Steps

1. Open up GIMP.
2. Create a new image. When you do this you are offered size etc, but there is also an advanced section which you need to open. Choose to have a transparent background.
3. Add a new layer to your image.
4. Now, on the new layer add a shape. First choose the colour you want your shape to be. Then choose the shape. Create the shape on your image.
5. In the layer window you should now be able to change the opacity of your layer. Move it down to about 50%.
6. Save you image as a png.

The HTML Steps

1. Create a simple HTML page.
2. Create a div and give it an id.
3. Create a reference in your HTML Head to a style sheet.

The CSS Steps

1. Create a .css file with the same name as you referred to in your HTML page.
2. In your css file create an entry for the body of your page and add a coloured background. Just so that you can see the semi-transparency.
3. Now create a reference to the div you created in your HTML page.
4. In the reference for your div add a reference to the background image you created in your image editor.

Review
Now save everything and preview it in your web browser.
For a further test add some text your your div.

Done.