CSS IE7 Hack

So, you have a CSS class which looks just wrong in Internet Explorer 7 (IE7). This is quite simple to rectify.

Suppose the top margin is just right in all browsers except IE7, where it is too small. No problem. Set the class in the normal way, as follows, but use the value which looks best in IE7.

.gap {
margin-top: 10px;
}

Ok. Now we have a margin that looks great in IE7, but too small in other browers. So we need to change it without affecting IE7. We do this by redefining the above class in a manner that will be ignored by IE7, and we do it as follows:

html>/**/body .gap {
margin-top:8px;
}

We need to include both sets of code in the stylesheet. IE7 hates this hierarchical way of declaring classes in CSS and so ignores it. The declared values for the class are re-written for other browsers.

PHP lessons

Over the passed few months, I have received numerous comments from people, on the same course as me, to the effect that they wished I would teach them PHP.

I have decided to call their bluff and offer to run classes during the summer. Well, I have been surprised by the overwhelming response and have set up a private area of my website to facilitate the lessons.

If you wish to know more, Contact me.

PHP exam & certification

A couple of weeks ago I took a PHP exam as part of my university course. Results came out last week and I was pleased to be awarded 82% - top of the class!

This is all very good and something to be happy with, but, would it be recognized by industry?

Certification

I guess the best thing to do would be to ensure I have the qualifications that employers would recognize. So, I think I am going to get official industry recognized PHP certification - as soon as I can afford it though. I remember from when I got Lotus Domino certification that it normally costs several hundred €uros. I’m poor. I can’t afford that!

MD5 Encryption

If you need to use message-digest algorithm 5 (md5) to encrypt words or phrases, please feel free to use this tool I created for my own use:

Login with PHP

Last week I was looking at a way to make certain areas of a website accessible only via login using username and Password. Virtually everywhere I looked suggested setting up a separate MySQL database with a table containing the user details, and a separate mysqlconnect document. Without a doubt, this would work, but it’s a lot of effort to go to for just a couple of users.

I have come up with a simpler alternative, which uses an array, md5 encryption, session ID and HTTP user agent.

The first thing to do is create a login page which allows the user to enter a user name and password, like this:

<form id=”formlogin” method=”post” action=”login.php”>
Login here:
<p >Username: <input size=”25″ type=”text” name=”username” /><br />
Password: <input size=”25″ type=”password” name=”password” /><br />
<input type=”submit” value=”Login” /></p>
</form>

Right then. As you can see from the <form> tag, the info submitted is sent to login.php, so we need to create that now. Here it is:

<?php
session_start();
$passwords = array(”First User” => “first password”,
“Second user” => “next password”,);//add as many users as you need
if (!$_POST["username"] or !$_POST["password"]) {//checks if username & password entered
echo “Please enter your username and password.”;
echo ‘<a href=”login.html”>Log in</a>’;//link back to login form
exit;
}

$pass = $_POST["password"]; //assign entered password to variable

//If password is ok, set session IDs
if ($pass == $passwords[$_POST["username"]]) {
$_SESSION['auth_username'] = $_POST['username'];

//user agent stored to reduce chance of session being hijacked - user agent encrypted with md5
$_SESSION['agent'] = md5($_SERVER['HTTP_USER_AGENT']);

print “<meta http-equiv=\”refresh\” content=\”0;URL=webpage.php\”>”; //redirect to selected page
}
else {// set error message
$msg_error = ‘Login failed. Please go back and try again.’;
}

//The html below only displayed if login was not successful
?>
<html>
<head>
<link href=”/css/style.css” rel=”stylesheet” type=”text/css” />
<title>Login failed - Web developing by Jez D</title>
</head>
<body>
<p>
<?php
echo $msg_error;
?>
</p>
</body>
</html>

Ok. The next step is to put a small PHP script at the top of each PHP page you wish only authorised persons to see. It must go before everything else in the page. This script checks to see if session ID’s have been set and, if they have, are they valid. If not, it doesn’t allow the user to see the contents of the page. The script looks like this:

<?php
session_start();
if ((!isset($_SESSION["auth_username"])) OR ($_SESSION['agent'] != md5($_SERVER['HTTP_USER_AGENT']))) {
echo “<p>You must be logged in to view this page.</p>”;
echo ‘<a href=”login.html”>Login</a>’;
exit;
}

Now that works a treat, but there are a couple of other things you may wish to consider doing for even more increased security.

  • Move the file containing the user details (login.php) to a folder not accessible to a web browser, but not password protected.
  • Replace the passwords as stored in login.php with encrypted versions of the same words.

Find out what the encrypted version of the password is by using an encryption tool I have created:

Then replace the password in the array with the output from the script above.

Now you need to replace:

  • $pass = $_POST["password"];

with

  • $pass = md5($_POST["password"]);

The user can still log in with the unencrypted password, the script encrypts it and then compares it to the encrypted version stored in the array. If someone manages to get access to the script, they will only see the encrypted version of the password. If this is entered in the login form, it will be rejected.

Design Coding Vid

Excellent rap vid by a guy called m0serious. Telling us all how to code clean and the importance of doing so.

Internet Explorer and CSS Box Model

Had a conversation with a Web Team Leader a while back and he asked me what I knew about the difference between how IE interprets the CSS box model and how Firefox inteprets it. I had to embarrassingly admit my ignorance in this area. The other person was suitably unimpressed. So I decided to find out about it.

The issue arises because IE includes the border and padding as part of the width of the content as opposed to adding it on. Example:

.class {
width: 25%;
margin: 5%;
padding: 2%;
border: 2%;
}

In the above rule, IE will set the content width as 25%, but the padding and border will be within that 25%. So, in reality, in IE the content width will actually only be 21%, which will be smaller than in Firefox.

The solution

Have a look at my previous article on CSS hacks.

.

Search Engine Friendly URL’s

Ok. I’m going to try to KISS this article.

I realised that I needed to changed the URL’s on my website. They were similar to this:

  • www.domain.co.uk/genericpage.php?pagename

This method allows for a degree of dynamism. It allows for just one page to display all the content. Everything after the ‘?’ are arguments with which my script selects content to be shown. Great, isn’t it? Not according to search engines or the human mind.

The Solution

What I needed to do was change these into search engine friendly URL’s, as Google had only indexed my home page. So here is what I did:

  1. Create a file in notepad called ‘.htaccess’
  2. Add the following lines to the file
    • RewriteEngine on
    • RewriteRule ^skillset(.html)?$ /publish.php?Skillset
  3. Repeat the RewriteRule for each URL you want to mask

The first line turns on the rewrite engine on the Apache server. The second line creates the rule. Everything up to the ‘$’ is what is requested by the browser. Everything after it, is what is returned by the server.

  • ‘^’ represents http://www.domain.co.uk/
  • what appears in ( ) followed by ‘?’ means that it may or may not be present

So, what my .htaccess file achieves is that either of the following requests:

  • www.domain.co.uk/skillset
  • www.domain.co.uk/skillset.html

will return - www.domain.co.uk/publish.php?skillset, yet the address that appears in the location bar is the one entered by the user. Much tidier than javascript redirect or obselete frames.

Job Interview

On Thursday 27 Mar 2008, I had a job interview in Manchester, UK. It was the first one I have had for a long time, so, I was very apprehensive.My car. Yes, that really is part of the reg number. Fortunately, I arrived early enough to have time to cruise around looking for a suitable parking space.

Anyway, I parked up and entered the 18 storey building where the interview was to be held. I booked in at reception and was told that the company I was there to see lives on the 14th floor. Thank God the lifts were in good working order!

The Company

I am not going to name the company, but I will say it is a large new media agency with approximately 1000 clients around the UK. They have a small team of developers and designers, and were looking for PHP programmer to join the team.

The Interview

I thought that, generally, it went pretty well. MySQLThe interview was really more of a chat about what they were looking for and what I can do. They were looking for a programmer competent in PHP, XHTML, CSS and MySQL. It appeared to be ideal for me.

The interviewer acknowledged that accessibility and standards had not been a priority when designing the websites. As standards and accessibility have become a kind of obsession of mine, I had brought it up during the interview. Maybe this was a mistake!

He showed me plans detailing the structure of the websites they build. PHP I was elated, as they build them exactly the same way I built my personal website. That filled me with confidence. Then when he asked if I was able to create tableless websites, I was over the moon because that’s the only way I do it now.

The interview lasted just 25 minutes and I was brought down to earth at the end when he informed me that I was just one of five people he was interviewing that morning for the role. One of my competitors was a programming expert from Russia!


Update

Well you may be surprised to hear that I was offered the job. I was certainly surprised - particularly when I was up against the Russian programming expert!

Validation Warning - Byte-Order Mark found in UTF-8 File

Morning,

Yesterday, when I was working on a website for a friend, I tested my code via the W3C.org wesbite and, even though it validated OK, I was shown the following message:

Warning Byte-Order Mark found in UTF-8 F

“What the heck does that mean?”
According to W3C, this in itself is not a problem. But, it may present difficulties with older browsers. Well, I can’t have that!

With IE6+ there does not seem to be any visible oddities, but, Firefox 2 has added this to the top of the page:



How bizarre! I checked my source code and there is nothing in there that would explain these characters being visible.

A little bit of research and I found out that this is all to do with how the text file is encoded and saved. So, what’s the solution? Very simple actually.

  • I opened the .html file in notepad.
  • Clicked Save As
  • In the dialog box, change the Encoding field value to ANSI
  • Save and transfer to server.

Simple. Not only did the bizarre characters disappear, but, I no longer get the warning for the W3C validator.