Tag Archives: Safari

Website Template Fixed – Now looks good in all browsers!

Firefox Internet Explorer Chrome and Safari
Firefox, Internet Explorer, Chrome, and Safari

Remember when I said there was a problem with my template layout that caused it to display funny in every browser except Firefox? Well I finally got around to fixing it and thought I’d share the solution with you all. I figured it might be helpful to someone.

Why The Difference?

The different browsers display things slightly different sometimes because they use different “kits” (or rather — rendering engines)
to parse the HTML/CSS/JavaScript and convert all that code into the page you see (I’m trying to keep this in layman’s terms as much as possible).

Who Uses What?

Firefox uses Gecko
Chrome and Safari use Webkit
Internet Explorer uses Trident
Opera uses Presto

What To Do?

For code you only want used by Webkit (Safari & Chrome):
follow the guide here — http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

For code you only want used by Trident (Internet Explorer):
follow the guide here — http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/

Website Alignment Issues

Firebug
Firebug Extension for Firefox

It has come to my attention that my template’s alignment is not quite right when displayed in certain browsers. Anything but Firefox to be specific.

I will take a look at the CSS and HTML and try to find the problem when I can get to a proper computer (I’m on my iPhone right now). In the meantime I thought this might be a good time to mention a handy tool for anyone who is interested in web design/development. Perhaps you have heard of it before, but perhaps not. (it’s also another great reason to use Firefox as your primary browser).

Firefox has an awesome addon called “Firebug” which allows you to do a lot of amazing things when testing, modifying, creating, and etc. I will try to devote a proper post to it at a later time. Unfortunately right now my son is throwing a fit and I must tend to him.

So if you are viewing my site in IE, Chrome, Safari, Opera, or anything other than Firefox, please be patient, I will fix the display bug as soon as possible. In the mean time check out Firefox and the firebug addon!

Alex’s Antidote now iPhone Friendly

Alex's Antidote iPhone icon
Alex's Antidote iPhone icon

That’s right folks, my website is now iPhone friendly. (Note: from what I understand it should also work in certain other fancy phones too)

Here’s how it goes:

Step 1 – Open Safari -> Navigate to: alexsantidote.com

find Alex's Antidote in iPhone's Safari Browser
find Alex's Antidote in iPhone's Safari Browser

Step 2 – Check out my fancy mobile theme

New Mobile Theme
New Mobile Theme
Page Menu
Page Menu

Step 3 – Bookmark for future reference

Bookmark Options
Bookmark Options

If you’re really awesome you’ll bookmark it to your Home Screen 😉

Bookmark to iPhone's Home Screen
Bookmark to iPhone's Home Screen

And you’ll see a nice shiny icon that will take you straight to this website when you touch it!

Shiny Bookmark Icon!
Shiny Bookmark Icon!

How’d I do it?

  • Install the WordPress plugin called: WPtouch Mobile Plugin + Theme for WordPress
  • Make a custom icon in GIMP (sudo apt-get install gimp)
    • The icon should be saved in .png format.
    • You will need 2 different sizes: 57 x 57 and 32 x 32
      • Name the 32 x 32 icon something that reflects the name of your blog (I used: Alex`s Antidote)
      • Name the 57 x 57 icon “apple-touch-icon.png” without the quotes.
  • In WordPress Settings you will find a menu called: WPtouch, upload the 32 x 32 icon there (look around, you’ll figure it out), then make necessary adjustments below (lots of settings to play with).
    • Be sure to save!
  • FTP/SSH into your root (and/or wordpress) directory for your blog and copy over the 57 x 57 icon you named “apple-touch-icon.png”
  • Done!

Let me know what you think in the comments (if you have time).