26
Nov
2008

How to make a website look good in multiple browsers.

Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

As some of you may have noticed over the past day or so I’ve updated the theme for thisismyurl.com, this has changed the overall look for the site but it’s also lead to a couple of interesting questions from some of you. As an example, one of my testers came back to me with a couple of screen shots and asked why the Shameless Self Promotion box to the right looked different in Safari vs. FireFox.

shameless both How to make a website look good in multiple browsers. image

The answer of course is that each web browser, while programmed to display the same content chooses how to display that content differently. When a web developer designs a website, the first thing that they must do is decide upon a starting point and work outward from there, correcting issues as they appear. In my case, the first thing that I do is program a website for Safari on the Macintosh and then after I have everything appearing exactly as I want it in the first browser, I test it in the next.

In my case, this is the order I build for:

  1. Safari for Macintosh
  2. Safari for Windows
  3. FireFox for Mactinosh
  4. FireFox for Windows
  5. Internet Explorer 6 for Windows
  6. Internet Explorer 7 for Windows
Now … some of you will point out that it’s a strange oder, considering first that Windows makes up more that 80% of the market and that Internet Explorer accounts for 50% of the traffic but to that I would respond you’re correct. However, I would also make a point of saying Safari is the most W3C compliant and, it happens to be what I use on my MacBook.  Building for one platform first means exactly that, I build for one set of rules first and then ensure the design is migrated to each of the other platforms only after I am happy with the changes to the first.
When you’re doing this, always remember to check that the edits you’ve done for later browsers does not have a negative effect on your earlier browsers. In my example above, for Apple Safari I used the following code to create my Shameless Self Promotion effect:
<div id=’shamelessselfpromotion’>
        <p><strong>Shameless Self Promotion</strong></p>
        <p>I’m a <a href=”http://www.thisismyurl.com/services/”>freelance web designer, web master and developer</a>. I build business solutions for the internet, consult on WordPress projects and help build better websites. If you’re looking for a helping hand, <a href=”http://www.thisismyurl.com/about/contact/”>send me a message.</a></p>
</div>
#sidebar #shamelessselfpromotion {
background-image: url(images/chrisross.jpg);
background-repeat: no-repeat;
background-position: 55px right;
padding: 0px 150px 0px 0px;
}
After viewing it in FireFox however, I had to edit the HTML and CSS to look like this:
<div id=’shamelessselfpromotion’>
        <p><strong>Shameless Self Promotion</strong></p>
        <p><img class=’alignleft’ src=’

http://www.thisismyurl.com/wp-content/themes/thisismyurl/images/chrisross.jpg

‘ alt=’Christopher Ross’ title=’Christopher Ross’/>I’m a <a href=”http://www.thisismyurl.com/services/”>freelance web designer, web master and developer</a>. I build business solutions for the internet, consult on WordPress projects and help build better websites. If you’re looking for a helping hand, <a href=”http://www.thisismyurl.com/about/contact/”>send me a message.</a></p>
</div>
#sidebar #shamelessselfpromotion {
width: 300px;
}
As you can see, the code edit was rather minor but needed to ensure the page was compatible in both FireFox and Safari, as a side benefit it also ensured the page was compatible with Internet Explorer and the Wii.

Tags: , , , ,
Posted in Web Site Advice

6 Responses to “How to make a website look good in multiple browsers.”

  1. Ikki says:
    November 26, 2008 at 7:15 pm

    It is a weird order, indeed. I usually start from 6th to 1st since, as you said, the vast majority of people is on Windows browsing the web using either IE or FF.

    P.S.: your blog kinda breaks on IE if you resize the window. Comments’ textarea float under your list of links (Things of Interest).

  2. Christopher Ross says:
    November 27, 2008 at 11:54 am

    Thanks Ikki, I’ll take a look at that today.

    As for the order, there’s actually a pretty good reason for why I leave IE till last. The other browsers in the list follow the W3C rules a lot closer than Microsoft has elected to do, so getting websites to work on 4 out of 6 is fairly straight forward, then once you’ve completed that task adding CSS hacks to make it work in IE 6 and 7 is equally straight forward. On the other hand, it’s harder to apply fixes on top of hacks. Chris

  3. brandon alan scofield says:
    December 2, 2008 at 10:28 pm

    What about website validation service :)

  4. jacob says:
    February 6, 2009 at 12:52 pm

    i have done all of the xhtml and css right and to the point no mistakes and it does not show right on mozilla firefox safari and all others except enternet explore why? please someone help me

  5. Christopher Ross says:
    February 6, 2009 at 12:56 pm

    @Jacob, can you post a link to your web page that’s causing you problems?

    @Brandon, the W3C validator (http://validator.w3.org/) is the best place to look for code validation.

  6. Artiom says:
    February 19, 2009 at 4:08 pm

    ikariam ali svetaine ;)

Leave a Reply