The Ultimate CSS Hack Pt. 3

Well here it is. The final chapter of the series. With CSS3 on it's way, hopefully browsers will continue to adapt and finally agree for the most part on how to display websites. But until then, we'll continue to hack away (when necessary of course).

Opera
Although there are many hacks for Opera, the following code is ONLY read by Opera browsers, and will be ignored by ALL other browsers.

.top {
padding-top: 10px;
}
@media screen and (min-width: 900px) {
.top {
padding-top: 10px;
}
}

The CSS surrounded by the code highlighted in blue, is only read by Opera and "top" can be replaced by any old CSS syntax. Because of the "Linear Rule" that we defined at the start of the series, Opera browsers will follow the second rule. As stated above, other browsers will just ignore the second rule, and follow the first.

We hope these posts have helped you on your way to creating brilliant looking sites no matter what browser they're viewed in!

The Ultimate CSS Hack Pt. 2

Until all web browsers begin to interpret CSS correctly, the CSS Hack is a necessary evil. Although the series will address Internet Explorer, Safari and Opera, Firefox hacks are simply not necessary. In short, Firefox is head and shoulders above all other browsers in terms of rendering CSS correctly, so a good rule of thumb is: Write for Firefox, hack the others.

Safari
Remember the "linear rule" we discussed in Pt. 1? If not, take a moment to refresh your memory before we continue. Using the "linear rule," Safari hacks are easy. Whenever CSS syntax includes the # sign in the exact location as shown below, Safari will ignore the entire CSS rule, and any other rules that follow after the # sign is read.

body {
background-color: black;
}

body {
background-color: white;#}

In the above example, ALL browsers other than Safari will have a white background. Because Safari ignores the second rule, it will show a black background. Pretty easy huh?

In general, Safari is pretty good with CSS compliance, but because Safari does NOT support styled forms, hacks are especially useful in this area.

Net Up: Opera

The Safe, Effective way to Move your Pages

We've all been there; you want to move a page because it no longer belongs. Maybe it's better suited to be in a new directory, or maybe you'd like to change the file name to one that better suits its content. Regardless of the reason, the page needs to be moved. But how do we move it? And better yet, will this cause problems with Google and other major search engines?

Moving a page CAN cause problems when it comes to search engine rank and indexing. The first problem is obvious: If you move a page without telling Google that the former address no longer exists (we'll get into how to do this shortly), Google will think you've created an entirely new page. And worst of all, you'll get hit with a duplicate content penalty, since the new page will look identical to the old one in the eyes of Google. Sure, the search engines will eventually pick up on the fact that the old URL no longer exists, but it won't be soon enough to avoid a penalty.

In recent years, it was common to use Meta Refresh to redirect a page. Meta Refresh (often used in Doorway Pages) is a short command placed on a page that sends the user to its new location. Unfortunately, the technique quickly became an easy way for devious types to trick users into thinking they were visiting a page, and instead sending them to a completely unrelated page (often full of advertisements). It didn't take long for Google to pick up on this little trick, and soon it began to penalize sites using Meta Refresh.

But what about the people who just want to move a page for legitimate reasons? Well fear not, because here comes 301 re-direct to save the day!

A 301 re-direct is a form of server-side scripting. Most websites have a file called .htaccess that resides in the site's root directory (a root directory is the highest point in your in your website's heirarchy system). It's a simple text file that produces special commands in addition to what the actual page may have to offer. Because it's called .htaccess, it has no file extension. If you can't view your .htaccess file, or are not sure if you have one, download an FTP client and select "view hidden files" as an option. If you don't have one, it can be created easily. Just open up your favorite notepad, enter the code, and save it as a text file. After you upload it to your server, rename it to .htaccess, and you'll be on your way to server side scripting!

On to the code... If you find your .htaccess file has code your unfamiliar with, just leave it as and enter the following line(s) of code one line beneath the existing code.

Redirect 301 /blog.html http://www.pinbottle.com/index.html

(1)Redirect 301 (2)/blog.html (3)http://www.pinbottle.com/index.html

1) Just a simple title you'll use for all your 301s.
2) The url that will no longer exist. This isn't a full url, just the file name and it's path to the. The file we want to move's full url is http://www.pinbottle.com/blog.html (we just leave out the domain part).
3) This is the FULL url to the new file's new home.

NOTE: Notice the space between each element above. This space is necessary for the line of code to work:
Redirect 301_SPACE_/blog.html_SPACE_http://www.pinbottle.com/index.html

We hope this article has been of help to anyone looking to move a page the search engine friendly way.

The Ultimate CSS Hack Pt. 1

Website Design can be tricky when it comes to pleasing all the major web browsers. Here are a few tips that will ensure your website's cross-browser fluidity.

It's important to note that web browsers read from top to bottom and will always follow the last rule they've been told. In the following example, the second CSS class "white" is followed. We'll call this the "linear rule" throughout the series.

Internet Explorer: Conditional Comments
Following our linear rule, the following syntax will provide hacks for all versions of Explorer.
Insert the code below into the "head" tags of your document.

The browser follows "if" rules. First, it reads the main style sheet, and applies the styles. However, if the web browser happens to be IE 7, IE 6 or any other version, it reads the rules within the style sheet titled [if IE 6], [if IE 7], etc.

Any new and alternative styles applied to the alternative style sheet will be applied. Here's an example.

If the browser is Internet Explorer, it will change the "color: black;" syntax to "color:white;"
In addition, Internet Explorer will introduce a margin of 20 pixels into the document, but other browsers such as Firefox would naturally ignore the alternative style sheet, and therefor will not have a 20 pixel top-margin.

In the example below, because the alternate style sheet does not include specific instructions for "margin-top," Internet Explorer will follow the initial rule it reads in the main style sheet. In order to adjust the margin-top property for Internet Explorer, apply "margin-top: 30px" syntax to the alternative style sheet, and Explorer will now follow the rule.

Stay tuned for part 2: Safari

Hi, I'm a PC and I'm a Mac

It truly is amazing what can be accomplished with CSS. I just updated our menu with convenient tool-tips that couldn't have been accomplished without it. Working with CSS Layout is both exhilarating and liberating at the same time. I can't tell you how many headaches I've had over the monotony of working with nested tables, but luckily those days are over.

If you've you ever seen those Apple commercials where one guy's a "Mac" and one guy's a "PC," then you know that the "Mac" character portrays a creative type while "PC" is a little dull. Well in the Web Design world, tables are the "PC," and CSS is the "Mac." Which one do you want designing your website?

Why No Comments?

Some have emailed and asked why this blog doesn't offer a comments section, similar to many other blogs. Unfortunately, the answer is spam.

I've noticed some trends taking place across the web to combat spam. Many blogs I visit are moderating their comments (that is, the comment must be approved before it appears), others are getting rid of comments altogether and some are moving toward the infamous "no follow" tag. Whatever the case, blog spamming is becoming obsolete, but there are still many spammers who have no idea that their links are flagged with "no follow," simply because they're not aware of it. Until the majority of the spamming community catches onto "no follow", spammers will continue to flood good blogs with useless comments but at least bloggers out there like myself are putting up a pretty good fight.

10 Favorite Programs and Tools

Everyone always says "The internet is full of information," but sometimes some of the best websites are rarely discovered. The following is my list of favorite websites that I simply couldn't live without:

http://www.webuildpages.com/neat-o/
Allows Windows users to install multiple copies of Internet Explorer for testing websites

http://www.webuildpages.com/neat-o/
Creates a list of back-links as well as anchor text for any site

http://www.fontgarden.com/archive/a/a7.htm
1,000's of free fonts with some funny quotes

http://wellstyled.com/tools/colorscheme2/index-en.html
Creates color schemes instantly for any color

Complete CSS Guide
A detailed CSS Tutorial

http://binboy.sphere.pl/index.php?show=download&p2=1783
Evsoft 1st Page 2000 Download (2006 closes tags automatically which is really annoying, and Evrsoft no longer offers 2000 for download)

http://www.mindworkshop.com/alchemy/gifcon.html
An easy to use GIF animation program

http://www.lview.com/
Don't want to pay $650 for Photoshop? L-View is a nice alternative.

http://www.smartftp.com/
Smart FTP is pretty well-known, but I just couldn't live without it's user-friendly interface

http://filezilla.sourceforge.net/
Because Smart FTP doesn't allow you to view hidden files, Filezilla get's the job done for editing files like .htaccess