Archive for the ‘Uncategorized’ Category

Why Isn't My .htaccess Working?

Friday, October 28th, 2011

Hitting snags in setup can be a real pain. We just had a problem where .htaccess files seemed to be completely ignored by our Apache web server. More specifically, in our local development environment powered by MAMP.

After a lot of searching and debugging, it turned out that the new version of MAMP had a little rule defined in httpd.conf which did not allow .htaccess to do it's magical overriding. So we head into our configuration file:

vi /Applications/MAMP/conf/apache/httpd.conf

And look for the following line:

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None

The AllowOverride None line is the one causing our little problem. We have two options, switch this line to "All" to allow .htaccess files in any directory, or set up a directory-specific rule with the code below:

<Directory "/Users/matt/Sites">
    AllowOverride All

A simple fix but it can be a pain to nail down the answer.

Input type="image" value not present, replaced by x,y coordinates

Thursday, May 19th, 2011

If you're reading this, you may have noticed (as we did) that relying on the value returned from <input type="image"> is breaking your forms. This isn't a bug. It appears to be a new 'feature' in FireFox 4, which actually makes the browser compliant with the HTML 5 standard, instead of the older HTML 4.01 standard.

Check: HTML 4.01 Standard
Check: HTML 5 Standard

The new behavior gives you the X and Y coordinates of where the user clicked on the button element.

<form method="get">
    <input type="image" name="myButton" value="Submit" src="images/submit.gif" />

Old output:


New behavior:


This result is bad if you use images as your "Submit" action and rely on the value of the input to catch the user's intention. For example, you might have an edit and a delete button on a field and your handler changes based on the value of the submit button.

The workaround:

Use CSS like the following on an <input type="submit" /> to give it an image appearance.

input.myClass {
    border: none;
    cursor: pointer;
    display: block;
    text-indent: -3000px;
    background: url(../images/submit.gif) no-repeat 0 0;
    width: 17px;
    height: 11px;