Simplistic website, showing different layout on different PC’s.

@SpencerKMar 16.2010

Hello there. Firstly, thank you for any and all help here.

I am no web developer, but I have done some for my degree and other various bits/bobs.

I produced a very simplistic website for a client, however the website is showing up different, on different PC’s and I cannot get to the bottom of it. Now, I know this is down to my own inexperience in coding, but I followed various books, online suggestions for layout (relative, margin) positioning techniques, and the website looks fine on my PC, on my mrs work PC, even on the clients PC in his office (this is a mixture of IE7, IE8 – Win7, XP).

However, I get an email from the client, and his understudy, last night saying the website looks terrible. All the text the 3rd column looks out of line (maybe because I used line:height?). As you can see, without having a clear understanding of the backbone of HTML coding, I am going to suffer.

The CSS validates, the HTML validates.

The website is:
~~[url]~~http://www.fpcuk.co.uk[/url]
Could you have a look at it for me, and let me know where I have gone wrong. Hopefully it will show up on your browser incorrect, so you can give me some tips on making it compatible with most browsers. There is only about 20 lines of code. It is mainly the right-hand column.

Thank you very much indeed.

Spencer K

to post a comment

HTML

6 Comments(s) _↴

@SpencerKauthorMar 16.2010 — #Eeek, cannot seem to find the edit button.

Ok, I have found the issue. It has to do with IE7 / IE8.

When using this Browser Renderer:

http://ipinfo.info/netrenderer/index.php

You can clearly see the difference in the web page.

IE7

http://img.photobucket.com/albums/v294/Jertsy/issueWithIE7.png

IE8

http://img.photobucket.com/albums/v294/Jertsy/IE8.png

So, its a browser compatibility issue. Damn, I have nothing but respect for Web Developers, having to build websites for different browsers.

So, after looking at my code - can you see any glaring issues that will cause it to distort the layout.

Thank you very much.

@tirnaMar 16.2010 — #The home page looks fine in IE8.

What browser did your client use when he saw it wasn't displaying properly?

Below is the code that comes back to the browser.

[CODE] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
 <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
 <head>
 <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="title" content="Franchise Print Centre" />
 <meta name="description" content="Franchise Print Centre, cheap online ordering, printed items, demo, franchise" />
 <meta name="keywords" content="Franchise, Print, Demo, FPC, Online Ordering Solution, Howarth Franchising Group, Franchise Industry, Printed Items, Print Ordering" />
 <meta name="verify-v1" content="Uy6E4hqQe1yFAZdkpwDtVw4e1XST8DPOwGV6GRGIwhY=" />
 <link href="css/fpc.css" rel="stylesheet" type="text/css" />
 <title>Home page</title>
 <!--[if lt IE 7]>
 <script type="text/javascript" src="unitpngfix.js"></script>
 <![endif]-->
 <style type="text/css">
 /*<![CDATA[*/
 p.c2 {text-align: center}
 h4.c1 {text-align: center}
 /*]]>*/
 </style>
 </head>
 <body><br />
 
 <div class="wrapper"><!--*************  main wrapper class-->
 <div class="leftContent"><!--Left contents start-->
 <h1 id="tel">Tel: 01732 772 838<br />
 <a href="[EMAIL="[email protected]"]mailto:[email protected][/EMAIL]" id="mailTo" name="mailTo">[email protected]</a></h1><br />
 <p class="headText">DIGITAL! DIGITAL! DIGITAL!</p><br /><br /><p id="printChat">The latest HP Indigo is ready to take your orders.<br /></p>
 
   <ul id="content">
   <li><span>SHORT RUNS</span></li>
   <li><span>FAST TURNAROUND</span></li>
   <li><span>BRILLIANT COLOURS</span></li>
   <li><span>FANTASTIC PRICES</span></li>
   </ul>
 </div>
 <!--*********************Left contents Finish-->
 
 <div class="middleContent"><!--*****************   Middle conents Start-->
 <p id="UpperText">KEEPING YOUR FRANCHISEES HAPPY!</p>
 <img src="images/FPS_web-montage_A.png" alt="Web Montage" name="monitor" id="WebMontage" />
 <p id="printChat6">The Franchise Print Centre will increase your market exposure and reduce your print and marketing costs.<br />
 <br />
 Our tried and tested online secure system will allow editing, proofing and ordering of all your printed items in minutes.<br />
 <br />
 Together we can plan effective print campaigns for your franchisees covering all requirements from a business card through to multi page catalogues.</p>
 <p id="middletext">RING US NOW<br />01732 772838</p>
 </div>
 <!--*********************  Middle conents Finish-->
 
 <div id="rightContent"><!--********************* Right contents Start-->
 <h4>5<br />MINUTES<br /></h4>
 <p class="c2">OUR LIVE PHONE DEMO<br />WE LEAD YOU THROUGH EVERY STEP.</p>
 <div class="demoTEL">01732 772838<br />
 <div class="watchText">WATCH!</div>
 <img class="demoIMG" src="images/cartoon1.gif" width="59" height="69" alt="Cartoon Printer" /><a id="btnDemo" class="right" href="demo.html" name="btnDemo"><img src="images/clickUp.png" alt="Start Demo" /></a></div>
 <p id="printChat8"><span class="demoFont">View our demo showing how easy editing, proofing and ordering really is.</span><br /></p>
 
 
   <div class="PrintCentre">
   <h6>FRANCHISORS<br />WORKING TOGETHER</h6>
   <p>By streamlining your print ordering and purchasing process with The Franchise Print Centre you will be saving money from day one.<a id="btnReadOn" class="right" href="franchisors.html" name="btnReadOn"><img src="images/readUp.png" alt="Read More" width="83" height="25" /></a></p>
   </div>
 
 
   <div class="questions">
   <h5>Your Questions Answered!</h5>
   <p id="printChat4">Here are some typical questions and answers about the Franchise Print Centre.<a id="btnreadMore" class="right" href="questions.html" name="btnreadMore"><img src="images/readMoreUP.png" alt="Read More" width="83" height="25" /></a></p>
   </div>
 </div><!--********************* Right contents Finishes-->
 <div id="footer"><!--************************  Footer content starts-->
 <ul id="footerLinks">
 <li><a href="index.html"><span class="fontC"><strong>HOME</strong></span></a></li>
 <li><a href="demo.html">DEMO</a></li>
 <li><a href="franchisors.html">FRANCHISORS</a></li>
 <li><a href="questions.html">Q&amp;A</a></li>
 <li><a href="contact.html">CONTACT</a></li>
 </ul>
 </div>
 <!--Footer content finishes-->
 <a href="[URL]http://www.franchise-consultants.com/[/URL]" target="_blank"><img src="images/HF1_new.png" id="logo" alt="Go to the Franchising Centre website" name="logo" /></a>
 </div><!--********************* Main wrappper finishes-->
 </body>
 </html>
 [/CODE]

@R4N_S_SMar 16.2010 — #it looks like it needs work in IE6 also but havent gone in and had a look yet as busy with work

@tirnaMar 16.2010 — #When I look at your website actually using IE8, what I see is slightly different to what you have in your IE8.png

In the browser it looks ok.

Maybe there is an issue with the wau the rendering website you are using renders web pages.

If you want to check how web pages look in browsers, it's probably best to use the actual browser.

@MrEnderMar 17.2010 — #60% of people use IE... you now how to consider the other 40% of people who use FireFox, GoogleChrome, Safarie so on so on.

each and every web browser has its own little thing it hates. (IE happens to have the most things it hates.) So when you program for other web sites that don't hate most code. They then do hate your code ^{^.^{^}}

You also have to consider the resolution they have their computer set on.

Using fixed sizes like pixles (px) will not adjust to work on different resolutions so some stuff wont align and it will look horrible.

Shelby

@R4N_S_SMar 17.2010 — #As Shelby has stated this could also be down to your resolution on your pc as I have seen that on a few sites

Also in #HTML _↴

[RESOLVED] Fieldset wraps divs in IE7 Trying to make an HTML e-mail Accordion Script not rendering in IE 7,8 or 9 - Works fine in Chrome/Firefox

Success!

Help @SpencerK spread the word by sharing this article on Twitter...

Tweet This

Simplistic website, showing different layout on different PC’s.

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Simplistic website, showing different layout on different PC’s.

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴