Cross browser box shadows (yet again)

A client recently asked me to make their site a 'copy' (don't ask) of another website. The site needing to be copied had employed one of those shadows using a very long image with a drop shadow at either end and repeated on the Y axis as a background. Plus, top and bottom shadow images to give the 360 degree effect.  This wasn't going to be possible to use with the site which I had developed, since my site was responsive. So I had to return to the old chestnut of drop shadows in IE. If my client was asking for a 'copy' of another site, there was a good chance they were IE users and I couldn't assume I'd get away with providing standard solutions (I can say this, we have a good relationship) .
See below.

.container
{
  margin-top:20px;
  box-shadow:3px 3px 10px 5px #666666;
  -moz-box-shadow:3px 3px 10px 5px #666666;
  -webkit-box-shadow:3px 3px 10px 5px #666666;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=315,strength=2);
}

Yet more fun with IE

I've been working with a good designer recently. To be fair to him, I've made more of an effort to accurately represent his work in IE 7 and 8. My layout has used twitter bootstrap and I discovered 2 things about CSS in IE along the way:
1. To style the <legend> tag, you need to encase your form elements in a <fieldset> tag.
2. To specifically target IE 7 and 8 in your styles, you need to add /9 to the end of styles. These will not affect your styles targeting good browsers. I put these specific styles at the bottom of my stylesheet so that I don't have to hunt round for them at a later date. Here are some examples below. Very quirky.

/*All IE 7 and 8 stuff*/

hr.bluehr
{
width:104.3%\9;
}

#formholder legend
{
margin-left:-6px\9;
}

input[type='text'], input[type='password']
{
width:94%\9;
}

.btn
{
border:1px dotted #EEEEEE\9;
margin-left:-0px\9;
}

I was forced to find an IE Tester

First post in a long time. I've been very busy.

Normally, by keeping to W3C standards, I can develop a site and then do some tweaks for IE at the end. Recently developed an application in which I tested for IE along the way. Or so I thought. I was in fact, testing in IE8. Not good enough. The application came out a total mess in IE7. This was one particular customers IT Department browser of choice. This seems like a ramble but I'm getting to the point.

I then discovered IE Tester at http://www.my-debugbar.com/wiki/IETester/HomePage. This is an excellent tool if you need to view your work in various versions of IE without messing up your existing install. It works stand-alone and also happily access pages delivered by your localhost.

Well done DebugBar!

PHP Form, jQuery, working in IE

Some days, you start by saying, "'I'll just get this out of the way, then I can concentrate on something heavier". You then write code without testing because you know how it works, and apart from a little syntax change, you get it working fine. About 15 minutes. This was my experience with writing a page with a form. It stored the data in a text file, then updated the page tag with the new contents. It worked fine in Chrome and Firefox. Then the dreaded IE pulled me back. 3 hours later, I find the solution. Below are code examples to a common problem.
Create a html form.
On submission, write the contents of the form to a file.
Once the file has been updated, refresh a section showing the new content.

Here is the code for readdata.php. Notice the @ before file_get_contents. This suppresses a warning if the file does not already exist.

<?php
foreach (explode("\n", @file_get_contents('data.data')) as $value)
{
echo $value."<br />";
}
?>
Here is the code for writedata.php. Nothing particularly clever here.

<?php
file_put_contents('data.data', $_POST['stuff']."\n", FILE_APPEND);
?>
Now to the main page. A few of important items here:

1. Only $.get works in IE .load doesn't.
2. $.ajaxSetup({cache: false}) is also required for IE otherwise you get all sorts of content varients coming through.
3. I used the jQuery Form Plugin from http://jquery.malsup.com/form/ It saves a lot of problems.

Have fun.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Read and write using jquery</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$.fn.readStuff = function()
{
$.get('readdata.php', null, function(data)
{
    $('section').html(data);
});
$('#stuff').val('');
}
$(document).ready(function()
{
$.ajaxSetup({cache: false});
$('form').ajaxForm(function()
{
$(this).readStuff();
});
});
</script>
</head>
<body>
<h1>PHP and jQuery read/write test</h1>
<h2>Write data</h2>
<form action="writedata.php" method="POST">
<input type="text" name="stuff" id="stuff" />
<input type="submit" />
</form>
<h2>Read data</h2>
<section>
<?php
include 'readdata.php';
?>
</section>
</body>
</html>

Lessons from the coal face

I've been having a few problems with css3pie lately, but it's not their fault. I really should have read the issues page. All I can say is, despite sizing using em everywhere else, use pixels with items using css3pie.

And on to improving my HTML template. There is an excellent template at http://html5boilerplate.com, but it's a bit too big for me and I also like to get as many updates as I can without physically going to get them.

It does however, contain this line of code.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

It forces Internet Explorer to get the latest rendering engine, thus make your pages work more reliably in the terrible browser. Of course, if you asked most people which browser they use, they'll say Google or Facebook. That's where we are, so there's no point in being upset about them not using Chrome or Firefox.

And so here is my new standard HTML page. As soon as Google start hosting version 3 of Yui, I'll include that, but I can't be bothered to chase the version numbers at this stage.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Sharing data from the Facebook API</title>

<!--[if IE]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />

<style>

body

{

font-family:Sans-serif;

line-height:1.5em;

}

</style>

<script src="http://www.google.com/jsapi"></script>

<script>

google.load("jquery", "1");

google.load("jqueryui", "1");

</script>

<script>

$(document).ready(function()

{

});

</script>

</head>

<body>

<header><h1>Header 1</h1></header>

<section id="mainContent">

<p>Hello World!</p>

</section>

<footer>Footer</footer>

</body>

</html>

Forgive me, for I have sinned

No, of course I haven't suddenly got religion. I'm so for removed, I needed to use the spell checker for the word 'religion'. The real sin, is that I did not thoroughly check that some of the examples I have provided in previous blog posts did not work in IE.

I've fixed them now. Namely :
http://effectivewebdesigns.blogspot.com/2010/08/simple-layout-1.html
That's a bad start isn't it.
http://effectivewebdesigns.blogspot.com/2010/09/simple-layout-3.html
http://effectivewebdesigns.blogspot.com/2010/09/simple-layout-4.html
http://effectivewebdesigns.blogspot.com/2010/12/two-equal-row-layout-beginnings.html

One which I should have uploaded, but didn't :
http://effectivewebdesigns.blogspot.com/2011/02/simple-layout-15.html

Four cornered web page

How do you add four different backgrounds as corners to your web page?
The answer is below. It even work in IE. You will have to create your own corner images.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 corners</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
#topLeft, #topRight, #bottomLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(topLeftCorner.png) no-repeat left top;
z-index:-10;
}
#topRight
{
background:url(topRightCorner.png) no-repeat right top;
z-index:-9;
}
#bottomLeft
{
background:url(bottomLeftCorner.png) no-repeat left bottom;
z-index:-8;
}
#bottomRight
{
background:url(bottomRightCorner.png) no-repeat right bottom;
z-index:-7;
}
#mainContent, h1
{
padding:2em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="topRight"></section>
<section id="bottomLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>Hello World!</h1>
</section>
</body>
</html>

Pixel to em calculator

These days we need to use the most flexible means of sizing elements in our web content. Our websites have to cope with different devices, different resolutions, different user preferences, accessibility, etc...

Step forward em. This can, not only be used for font sizes, but layout too. We are used to sizing elements of our pages using pixels. To be more flexible, and get in the swing of thinking about em instead of pixels, in the early stages we need a converter. Now of course, IE certainly early versions of it need to be covered, if we want our pages to be rendered consistently. For this we should put an * before our properties.

The example below, provides you with a converter and an example of how to use it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel to em calculator</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage
{
margin:0 auto;
width:30.8em;
*width:30em;
}

</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
jQuery(function( $ )
{
$("#button").click(function()
{
$('#emlVal').val(parseFloat($('#pixelVal').val()*0.0625).toFixed(2));
$('#emForIEval').val(parseFloat($('#emlVal').val()*1.1).toFixed(2));
});
});
</script>
</head>
<body>
<div id="mainPage">
Pixel value<br /><input type="text" name="pixelVal" id="pixelVal" /><br />
Em value<br /><input type="text" name="emVal" id="emlVal" /><br />
Em for IE value<br /><input type="text" name="emForIEval" id="emForIEval" /><br />
<input type="submit" value="Submit" id="button" />
</div>
</body>
</html>

CSS Box gradient - cross browser

Here is a nice small example of how to get box gradients (using CSS) working across most browsers. Don't be put off by the silly stuff you need for IE. Just replace the colour values.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>