SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    front page layout problem :-(

    http://s216.photobucket.com/albums/c...UT_blunder.jpg


    Hi from Sunny & Mild 10 degrees C wakefield UK :-)

    Heaven knows how this happened but it has... On this page www.pauserefreshment.co.uk the layout viewing thru IE 8 is all wrong but viewing thru Firefox 3.5.8 its all correct. If anyone has any idea on how I could make the homepage look like it does in firefox in IE 8 I'd be very gratefull :-)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("quick").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Professional coffee machines | pause... refreshment business coffee machine services</title>
    <meta name="google-site-verification" content="M0o9TZ5kOwVHp64vyvkZ2Ae0oQ0QJuWfde3yCuy-FMc"/>
    <style type="text/css" media="all">
    @import "css/product_detail.css";
    </style>
    </head>
    <body onload="MM_preloadImages('images/button/stage_2.png')">
    <script type="text/javascript" src="js/wz_tooltip.js"></script>
    <script type="text/javascript" src="js/tip_balloon.js"></script>
    <div id="pagewidth">
      <div id="header">
        <p> <a class="plain" href="index.html"> Pause </a> </p>
        <ul>
          <li> <a href="whoweare.html" class="who"> who we are... </a> </li>
          <li> <a href="ourrange.html" class="our"> our range... </a> </li>
          <li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
          <li> <a href="talktous.html" class="come"> come &amp; say hello... </a> </li>
          <li> <a href="hotel_coffee_machines.html" class="useful"> useful things...</a> </li>
          <li> <a href="office_coffee_machines.html" class="on-line"> on-line shop... </a> </li>
          <li> <a href="shop_coffee_machines.html" class="show"> show you care... </a> </li>
        </ul>
      </div>
      <div>
        <ul id="quick">
          <li><a href="ourrange.html"><img src="images/button/stage_A.2.png" alt="coffee machine range" /></a>
            <ul>
              <li><a href="#">Bean to cup</a>
                <ul>
                  <li><a href="franke_coffee_machine.html">Franke flair coffee machine</a></li>
                  <li><a href="cafe_coffee_machines.html">FreshGround 310 coffee machine</a></li>
                  <li><a href="franke_evolution_coffee_machine.html">Franke Evolution coffee machine</a></li>
                </ul>
              </li>
              <li><a href="#">Instant</a>
                <ul>
                  <li><a href="flavia_creation_400.html">Vision 400 coffee machine</a></li>
                </ul>
              </li>
              <li><a href="#">Filter</a>
                <ul>
                  <li><a href="flavia_creation_400.html">Flavia 400 coffee machine</a></li>
                  <li><a href="mondo2_coffee_machine.html">Mondo 2 coffee machine</a></li>
                  <li><a href="pump_coffee_machine.html">Therm coffee machine</a></li>
                  <li><a href="qwikbrew_coffee_machine.html">Quick brew coffee machine</a></li>
                </ul>
              </li>
              <li><a href="#">Coin operated</a>
                <ul>
                  <li><a href="coin_operated_coffee_machines.html">Flavia & Vision 400</a></li>
                </ul>
            </ul>
          </li>
          <!-- etc. -->
          </li>
          <!-- etc. -->
        </ul>
      </div>
      <div id="cup_left">
        <h3 class="headerbloat">pause... refreshment</h3>
        <p class="address"><a href="hotel_coffee_machines.html">Catering coffee machines</a> | <a href="shop_coffee_machines.html">Shop coffee machines</a> | <a href="office_coffee_machines.html">Office coffee machines</a> | <a href="talktous.html">Get a professional coffee machine quote...</a></p>
        <a href="talktous.html"><img src="images/horeca/cup_quote.jpg" alt="Get me a coffee machine quote" width="255" height="187"
     " /></a>
        <div id="block_1_c"> <img src="images/model_filter/toni_guy_circle1.jpg" alt="Toni &amp; Buy choose pause" />
          <p class="biglink"><a href="coffee_machine_photo_testimonials.html">Photo testimonials</a>...</p>
          <p>See how pause... refreshment fits the right coffee machine for your office, shop or hotel.<a href="coffee_machine_photo_testimonials.html"> Check out our photo testimonials</a></p>
        </div>
        <div id ="block_2_c"> <img src="images/model_bean/chris_beans_frontpage3.jpg" alt="Chris says Hi!" />
          <p class="biglink"><a href="ouringredients.html">Your coffee bean supplier</a>...</p>
          <p>We source our coffee beans from all over the globe to ensure we offer the very best blends compatible with your coffee machine.<a href="ouringredients.html"> Check out our coffee bean range.</a></p>
        </div>
        <div id ="block_3_c"> <img src="images/model_bean/krist_vision_circle1.jpg" alt="Kristine says Hi!" />
          <p class="biglink"><strong><a href="ourrange.html">Our coffee machines</a>...</strong></p>
          <p>It doesn't matter whether you make ten cups of filter coffee, or 600 cups of freshly ground coffee per day we have the coffee machine just right for you.<a href="ourrange.html"> Check out our coffee machine range</a>.</p>
        </div>
        <div id ="block_4_c"> <img src="images/model_bean/nick_circle_frontpage.jpg" alt="Nick says Hi!" />
          <p class="biglink"><strong><a href="pausepromise.html">Our service promise</a>...</strong></p>
          <p>We're commited to getting your goods to you on time, everytime! We're also great at looking after your equipment once its been installed. <a href="pausepromise.html">Check out our total coffee machine service promise.</a></p>
        </div>
      </div>
      <div id ="strap_right">
        <h1>Professional Coffee machines </h1>
        <p class="strapline"> <span style="color:#D68126;font-weight:bold; font-size:20px;">pause... refreshment</span> supplying <a href="ourrange.html"><strong>professional coffee machine</strong></a> solutions  to the <a href="office_coffee_machines.html">office</a>, <a href="shop_coffee_machines.html">shop</a> and <a href="hotel_coffee_machines.html">hotel</a> sectors.</p>
        <p>&quot;We take a personal approach and appreciate that every type of business needs a tailored solution to their beverage requirements.
          So whether you're an <span class="endpadding"><a href="office_coffee_machines_2.html">office</a>, <a href="retail_coffee_machines.html">shop</a>, <a href="/catering_coffee_machines.html">hotel</a> or catering facility</span> looking to maximise your margin, a retail outlet that's trying to keep their customers in store with a quality cup of coffee, we've got a broad range of <a href="ourrange.html"><strong>professional coffee machines</strong></a> for you to choose from.&quot; </p>
        <p class="endpadding">&quot;Backed with total service support and big choice on biscuits, sweeteners and paper cups make pause... refreshment</span> your one stop shop for professional coffee machine service solutions for your <a href="office_coffee_machines_2.html">office</a>, <a href="retail_coffee_machines.html">shop</a>, <a href="/catering_coffee_machines.html">hotel</a> or catering facility.&quot;</p>
        <img class="floatleft" src="images/model_filter/flavia_creation.jpg" alt="Professional coffee machine offer" />
        <h2 class="paddingstrip"><a href="flavia_creation_400.html" onmouseover="Tip('<b>Attention Chocoholics :-)<\/b><br>Order a Flavia before Wed 31st March get a 50 choc hamper', BALLOON, true, ABOVE, true, OFFSETX, -17, PADDING, 8)" onmouseout="UnTip()">Flavia choc offer ends Wed 31st March</a></h2>
        <p class="paddingstrip">Get one very big chocolate hamper for the New Year.
          With every <a href="flavia_creation_400.html">flavia 400<strong> professional coffee machine </strong></a>available from pause... refreshment we'll send you into chocolate heaven with a 50 choc hamper.</p>
        <p><strong>offer ends soon.</strong>..</p>
        <h3 class="headerbloat">Contact pause... refreshment 01924 363091 <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></h3>
        <p class="cats"><strong><a href="hotel_coffee_machines.html">Catering coffee machines</a> | <a href="shop_coffee_machines.html">Shop coffee machines</a> | <a href="office_coffee_machines.html">Office coffee machines</a> | <a href="flavia_creation_400.html">flavia 400 coffee machine</a> | <a href="flavia_drinks_station.html">flavia drinks station</a> |<a href="franke _flair_coffee_machine.html"> franke flair coffee machine</a> | <a href="vision_coffee_machine.html">vision 400 coffee machine</a> | <a href="koro_coffee_machine.html">Koro coffee machine</a> | <a href="franke_evolution_coffee_machine.html">franke evolution coffee machine</a> | <a href="pump_coffee_machine.html">Bravilor Therm coffee machine</a> | <a href="mondo2_coffee_machine.html">Mondo 2 coffee machine</a> | <a href="qwikbrew_coffee_machine.html">Marco quick brew coffee machine</a></strong></p>
      </div>
    </div>
    </div>
    <div id="footer_hp">
      <ul class="nav">
        <li><a href="sitemap.html" target="_blank">Site Map</a></li>
        <li><a href="talktous.html">Contact us</a></li>
        <li><a href="legal1.html" target="_blank">Privacy</a></li>
        <li>
          <!-- // MAILCHIMP SUBSCRIBE CODE \\ -->
          <a href="http://eepurl.com/enWw" target="_blank"><img src="images/newsletter/subscribe2.jpg" alt="get voucher codes save money" /></a>
          <!-- \\ MAILCHIMP SUBSCRIBE CODE // -->
        </li>
        <li><a href="http://twitter.com/pause_coffee" target="_blank"><img src="images/twit/twitter_jpg.jpg" alt="pause on Twitter :-)" /></a></li>
        <li><a href="#"><img src="images/green/blog_link.jpg" alt="how green is our office" /></a></li>
        <span>
        <li class="paddinglogo"><img src="images/brand/aramark_logo.jpg" /></li>
        </span>
      </ul>
    </div>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
    </script>
    <script type="text/javascript"> 
    _uacct = "UA-4432210-1";
    urchinTracker();
    </script>
    </body>
    </html>
    Code:
    body {
    	margin:0;
    	background:url(../images/bg-body.gif) repeat-x 0 0;
    	font:11px Arial, Courier, Helvetica, sans-serif;
    	color:#712453;
    	min-width:985px;
    	border: 0px solid #702453;
    }
    
    img {
    	border:none;
    	display:block;
    }
    a {
    	color:#702453;
    	text-decoration:underline;
    }
    a:hover {
    	text-decoration:underline;
    }
    #pagewidth {
    	width:985px;
    	margin:0 auto;
    	overflow:hidden;
    	position:relative;
    	
    }
    #header {
    	height:130px;
    	width:985px;
    	overflow:hidden;
    	
    }
    #header p {
    	margin:0;
    	position:absolute;
    	top:13px;
    	left:18px;
    }
    #header p a {
    	display:block;
    	overflow:hidden;
    	text-indent:-9999px;
    	width:207px;
    	height:103px;
    	background:url(../images/logo_go_home.gif);
    }
    
    #header .plain {
    	display:block;
    	overflow:hidden;
    	text-indent:-9999px;
    	width:207px;
    	height:103px;
    	background:url(../images/logo_athome.gif);
    	z-index:5;
    }
    
    #header ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    	top:12px;
    	left:244px;
    }
    #header ul li {
    	float:left;
    }
    #header ul li a {
    	display:block;
    	overflow:hidden;
    	text-indent:-9999px;
    	height:120px;
    	background-image:url(../images/text-topnav10.jpg);
    	background-repeat:no-repeat;
    }
    #header ul li a.who {
    	width:91px;
    	background-position:0 0;
    	margin:0 12px 0 0;
    }
    #header ul li a.our {
    	width:93px;
    	background-position:-91px 0;
    	margin:0 7px 0 0;
    }
    #header ul li a.happy {
    	width:105px;
    	background-position:-184px 0;
    	margin:0 5px 0 0;
    }
    #header ul li a.come {
    	width:103px;
    	background-position:-289px 0;
    	margin:0 9px 0 0;
    }
    #header ul li a.useful {
    	width:93px;
    	margin:0 14px 0 0;
    	background-position:-392px 0;
    }
    #header ul li a.on-line {
    	width:94px;
    	margin:0 13px 0 0;
    	background-position:-485px 0;
    }
    #header ul li a.show {
    	width:95px;
    	background-position:-579px 0;
    }
    #main {
    	width:100%;
    	overflow:hidden;
    }
    
    #zoom {
    width:0;
    padding-top:3px;
    float: left;
    }
    
    
    
    /* content 2 */
    
    #content_2 .h3 {
    padding:0px;
    font-size:1.5em;
    color: #B5B43E;
    text-decoration:none;
    }
    
    #content_2 .h32 {
    padding:0px;
    font-size:1.5em;
    color:#2B832C;
    text-decoration:none;
    }
    
    #content_2 .h2 {
    padding: 0;
    margin: 0;
    font-size:1.5em;
    text-decoration:none;
    color:#2B832C;
    }
    
    #content_2 .orange {
    padding: 0;
    margin: 0;
    font-size:2em;
    text-decoration:none;
    color:#D68126;
    }
    
    #content .orange {
    padding-top:28px;
    margin: 0;
    font-size:2em;
    text-decoration:none;
    color:#D68126;
    padding-bottom:3px;
    }
    
    #content .orange2 {
    padding-top:10px;
    padding-bottom:3px;
    margin: 0;
    font-size:2em;
    text-decoration:none;
    color:#D68126;
    }
    
    
    #content_2 .type {
    font-family:"Courier New" Courier monospace;
    }
    
    #content_2 .h1 {
    
    padding-bottom:0px;
    margin:0;
    font-size:2em;
    text-decoration:none;
    }
    #content_2 .h1footer {
    
    padding-bottom:10px;
    margin:0;
    font-size:2em;
    text-decoration:none;
    }
    #content_2 .h4footer {
    padding-bottom:10px;
    margin:0;
    font-size:2em;
    text-decoration:none;
    font-family:"Courier New" Courier monospace;
    }
    
    #content_2 .homefooter {
    padding-top:20px;
    padding-bottom:20px;
    margin:0;
    font-size:2em;
    text-decoration:none;
    font-family:"Courier New" Courier monospace;
    }
    
    #content_2 a:link {color: #622449; text-decoration: none}
    #content_2 a:visited {color: #622449; text-decoration: none}
    #content_2 a:hover {color: #D68126; text-decoration: underline; font-size: 100%;
    font-weight:900; }
    
    
    #content_2 li {   
          font-size:1.5em;  
    } 
    
    #content_2 ul .clear {
    list-style-type: none;
    font-weight:bold;
    }
    
    #content_2 a img {
    height:94px;
    width:125px;
    border:0px solid #000; 
    padding-left:20px;
    margin-bottom:120px; 
    } 
    
    #content_2 .left {
    	float:left;
    	width:75%;
    	padding:0 0 28px;
    }
    
    #content_2 .free
      {
        float:left;
    	padding-right:3px;
      }
      
     #content .productpic
      {
        float:left;
    	padding-right:3px;
      }
       
     
    #content_2 p {
    font-size:1.5em;
    margin-bottom: 15px;
    }
    
    #content_2 .imagefloatleft {
    float:left;
    padding-right:2px;
    }
    
    #content_2 .h3green {
    color:green;
    font-size:16px;
    padding-bottom:0px;
    margin-bottom:0px;
    }
    
    #content_2 .ecoarticle {
    margin-top:0px;
    padding-top:0px;
    }
      
    /* content 2 ends */
    
    
    
    #content p {
    font-size:1.5em;
    padding-right:2px;
    }
    
    #content .left {
    	float:right;
    	width:77%;
    	padding:0;
    }
    
    #content .h2 {
    padding:0px;
    font-size:15px;
    color: #B5B43E;
    }
    
    #content .hotel {
    padding:0px;
    font-size:15px;
    color: #B5B43E;
    }
    
    
    #content .h3 {
    padding:0px;
    font-size:15px;
    color: #B5B43E;
    text-decoration:none;
    }
    
    #content .type {
    font-family:"Courier New" Courier monospace;
    }
    
    
    #content .call {
    padding-top: 5px;
    }
    
    .home {
    margin-left: 5%;
    }
    
    
    #content a img {
    height:94px;
    width:125px;
    border:0px solid #000; 
    padding-left:20px;
    margin-bottom:120px; 
    } 
    
    /* disabled
    #content a:hover img { 
    width:300px; 
    height:225px; 
    } 
    */
    /* The rule below makes the effect work in IE */ 
    #zoom a:hover { 
    padding-left:0px;
    } 
    
    /* End Photo Zoom CSS */
    
    
    /* * html #content .right {
                padding:85px 0 0 28px;
    } */
    #content p {
    	margin:16px 0 0;
    }
    .image {
    	margin:0 0 0 -28px;
    }
    /*
    Regular side bar
    */
    #sidebar {
    	float:left;
    	width:225px;
    	padding:30px 0 0;
    }
    
    #sidebar .pic {
    		padding-bottom:50px;
    		padding-top:50px
    }
    
    #sidebar ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	width:225px;
    	overflow:hidden;
    }
    #sidebar ul li {
    	width:225px;
    	overflow:hidden;
    	float:left;
    	margin:4px 0 0;
    }
    #sidebar ul li a {
    	width:225px;
    	overflow:hidden;
    	display:block;
    	text-align: right;
    	font:14px "Arial", Courier New, San-serif;
    	line-height:18px;
    	color: #884970;
    }
    #sidebar ul li.activeblue a {
    	background: #702453;
    	text-decoration: none;
    	color: #6ecee4;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #6ecee4;
    }
    #sidebar ul ul li.activeblue2 a {
    	text-decoration: underline;
    	color: #6ecee4;
    }
    #sidebar ul ul li a:hover {
    	text-decoration: underline;
    	color: #6ecee4;
    }
    #sidebar ul li.activeyellow a {
    	color: #fece49;
    	background: #702453;
    	text-decoration: none;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #fece49;
    }
    #sidebar ul li.activeyellow2 a {
    	text-decoration: underline;
    	color: #fece49;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #fece49;
    }
    #sidebar ul li.activeorange a {
    	text-decoration: none;
    	background: #702453;
    	color: #f6872d;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #f6872d;
    }
    #sidebar ul li.activeorange2 a {
    	text-decoration: underline;
    	color: #6ecee4;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #f6872d;
    }
    #sidebar ul li.activepink a {
    	text-decoration: none;
    	background: #702453;
    	color: #dd5762;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #dd5762;
    }
    #sidebar ul li.activepink2 a {
    	text-decoration: underline;
    	color: #6ecee4;
    }
    #sidebar ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #dd5762;
    }
    .sidebar ul li a dotsblue {
    	color: #6ecee4;
    	font-weight: bold;
    }
    #sidebar ul li a em {
    	color: #fece49;
    	font-weight: bold;
    }
    #sidebar ul ul {
    	margin:0;
    	padding:6px 13px 12px 0;
    	list-style:none;
    	width:212px;
    	text-align:right;
    	line-height:18px;
    	border-top:1px solid #fff;
    	background:#f0e9ed url(file:../images/separator.gif) repeat-x 0 100%;
    }
    #sidebar ul ul li {
    	float:none;
    	width:auto;
    	margin:0;
    }
    #sidebar ul ul a {
    	text-indent:0;
    	height:auto;
    	width:auto;
    	color: #702453 !important;
    	display:inline;
    	font:12px Arial, San-serif !important;
    	background:none !important;
    }
    #sidebar ul ul a:hover {
    	text-decoration: underline;
    }
    #footer {
    	height: 30px;
    	width: 985px;
    	overflow:hidden;
    	padding: 0px 0px 0px 0px;
    	margin: 0px auto 0px auto;
    	border-top: 1px dotted #333;
    }
    
    #footer ul {
    	margin: 10px 0 0 240px;
    	padding: 0;
    }
    
    #footer ul li {
    	list-style: none;
    	float: left;
    }
    
    #footer ul li a {
    	display: block;
    	overflow:hidden;
    	font:10px;
    	line-height:18px;
    	color: #884970;
    	padding: 0px 10px 0px 10px;
    	border-right: 1px solid #aaa;
    }
    #footer ul li a:hover {
    	background: #702453;
    	text-decoration: none;
    	color: #fece49;
    }
    
    #content h2 {
    padding:0;
    margin:0;
    color:#B5B43E;
    }
    
    #content h1 {
    margin:0;
    padding-top:25px;
    }
    
    #content .h1 {
    padding-top:0px;
    padding-bottom:0px;
    margin:0px;
    }
    
    #content h3 {
    margin:0;
    padding-top:5px;
    color:#B5B43E;
    text-decoration:underline;
    }
    
    
    
    #content .cart2
      {
        display: block;
        width: 69px;
        height: 54px;
        background: url("../images/shopping_cart.jpg") no-repeat 0 0;
      }
    #content .cart2
     {
     margin-left:80%;
     margin-top:20px;
    
      }
      
    #content .cart2:hover
      { 
        background: url("../images/shopping_cart_go.jpg") no-repeat 0 0;
      } 
    
    #content a:link {color: #622449; text-decoration: none}
    #content a:visited {color: #622449; text-decoration: none}
    #content a:hover {color: #D68126; text-decoration: underline; font-size: 100%;
    font-weight:900; }
    
    #thumnails .pics li {
        float: left;
        width: 10em;
    	list-style:none;
    	padding: 2%;
    }
    
    
    #content .free
      {
        float:left;
    	padding-right:3px;
    	margin-bottom:5px;	
      }
      
      
      #content .freextra
      {
        float:right;
    	margin-right:10px;
      }
     
      
    #content li {
    font-size:1.5em;
    margin: 0;
    padding-left: 0;
    }
    
    
    #content ul li {
      margin-left: 0;
      padding: 2px 0 2px 16px;
      list-style: none;
      background: url('../images/green/tick.jpg') no-repeat top left;
    }
    
    
    #content ul {
    padding-left: 150px;
    }
    
    
    #content li.eco  {
    font-size:1.5em;
    margin: 0;
    padding: 0;
    }
    
    
    #content ul li.eco  {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/recy_icon.jpg') no-repeat top left;
    }
    
    #content ul li.eco2  {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/power_2.jpg') no-repeat top left;
    }
    
    #content ul li.eco3  {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/low_energy.jpg') no-repeat top left;
    }
    
    #content ul li.eco4  {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/fairtrade.jpg') no-repeat top left;
    }
    
    #content ul li.eco5  {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/rain.jpg') no-repeat top left;
    }
    
    #content ul li.eco6  {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/organic.jpg') no-repeat top left;
    }
    
    #content ul li.eco7 {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/compass.jpg') no-repeat top left;
    }
    
    #content ul li.eco8 {
      margin: 0;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/bean.jpg') no-repeat top left;
    }
    
    #content ul li.eco9 {
      margin-left: 3px;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/terry.jpg') no-repeat top left;
    }
    
    #content ul li.eco10 {
      margin-left: 3px;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/az2.jpg') no-repeat top left;
    }
    
    #content ul li.eco11 {
    margin-left: 3px;
      padding: 7px 0 7px 30px;
      list-style: none;
      background: url('../images/green/rubbish2.jpg') no-repeat top left;
    }
    
    #content ul li.eco12 {
    margin-right: 3px;
      padding: 7px 0px 7px 30px;
      list-style: none;
      background: url('../images/green/heat13.jpg') no-repeat top left;
    }
    
    #content ul li.eco13 {
    margin-right: 3px;
      padding: 7px 0px 7px 30px;
      list-style: none;
      background: url('../images/green/chef_taste.jpg') no-repeat top left;
    }
    
    #content ul li.eco14 {
    margin-left: 3px;
      padding: 7px 0px 7px 30px;
      list-style: none;
      background: url('../images/green/chris_face2.jpg') no-repeat top left;
    }
    
    #content ul li.eco15 {
    margin-left: 3px;
      padding: 7px 0px 7px 30px;
      list-style: none;
      background: url('../images/green/david_face2.jpg') no-repeat top left;
    }
    
    
    
    .style2 {
    	color: #2B832C;
    	font-weight: bold;
    }
    
    #leftcolumn
    {
    float: left;
    width: 50%;
    margin-top: 10px;
    margin-bottom:20px;
    }
    
    #leftcolumn .watermachine 
    {
    float:left;
    margin-top:5px;
    }
    
    #leftcolumn p 
    {
    margin-top:5px;
    }
    
    #rightcolumn p 
    {
    margin-top:5px;
    }
    
    #rightcolumn
    {
    margin-left: 50%;
    border-left: 0px solid #622449;
    margin-top: 10px;
    margin-bottom:20px;
    }
    
    #rightcolumn .watermachine 
    {
    float:left;
    margin-top:5px;
    }
    
    #content .print
    {
    color:red;
    text-align:right;
    padding-right:5px;
    }
    
    #sitemap ul {
    font-size:1em;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #sitemap ul li {
    font-size:1.1em;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #sitemap h1 {
    padding-left:10px;
    }
    
    #sitemap a:link {color: #622449; text-decoration: none}
    #sitemap a:visited {color: #622449; text-decoration: none}
    #sitemap a:hover {color: #D68126; text-decoration: underline; font-size: 100%;
    font-weight:900; }
    
    /* home page */   
    #container_hp
    {
    width: 96%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 180%;
    max-width: 1200px; 
    min-width: 550px;
    margin:2% auto;
    }
    
    #top_hp
    {
    padding: 0em;
    border-bottom: 1px solid gray;
    font-family:Arial, Helvetica, sans-serif;
    height:190px;
    background: #FFFFFF url(../images/model_filter/office_female_window4.jpg) no-repeat right center;
    color:white;
    font-size:1.5em;
    line-height:90%;
    font-stretch:extra-expanded;
    }
    
    #top_hp .floatleft {
    float:right;
    }
    
    #top_hp h1
    {
    margin:0px;
    color:#D68126;
    padding:4px;
    color:#D68126;
    }
    
    #leftnav_hp
    {
    float: left;
    width: 28%;
    margin: 0;
    padding: 1em;
    background: white url(../images/model_filter/waiter4.jpg) no-repeat top right;
    }
    
    #leftnav_hp img
    {
    float:left;
    }
    
    #content_hp img {
    float:left;
    }
    
    #rightnav_hp
    {
    float: right;
    width: 28%;
    margin: 0;
    padding: 1em;
    background: white url(../images/model_filter/corporate_coffee3.jpg) no-repeat top right;
    }
    
    #rightnav_hp img {
    float:left;
    }
    
    
    #content_hp
    {
    margin-left: 30%;
    border-left: 1px solid gray;
    margin-right: 30%;
    border-right: 1px solid gray;
    padding: 1em;
    max-width: 36em;
    background: white url(../images/model_filter/shop_coffee2.jpg) no-repeat top right;
    }
    
    
    #footer_hp
    {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
    }
    
    
    
    #content_hp .headerfont { 
    font-size:2em;
    padding:0px;
    margin:0px;
    color:#622449;
    }
    
    #leftnav_hp .headerfont
     {
    font-size:2em;
    padding:0px;
    margin:0px;
    color:#622449;
    } 
    
    #leftnav_hp .headerfont2
     {
    font-size:2em;
    padding:0px;
    margin:0px;
    color:#622449;
    background: white url(../images/model_filter/shop_coffee2.jpg) no-repeat top right;
    } 
    
    
    #rightnav_hp .headerfont {
    font-size:2em;
    padding:0px;
    margin:0px;
    color:#622449
    }
    
    
    #emailUs
    {
      display: block;
      width: 151px;
      height: 46px;
      background: url("../images/button/smiley_thumb.jpg") no-repeat 0 0;
    
    }
    
    #emailUs:hover
    { 
      background-position: 0 -23px;
      background: url("../images/button/smiley_thumb_green.jpg") no-repeat 0 0;
      }
    
    
    #emailUs span
    {
      display: none;
    }
    
    body.mp {
    	background-image: none;
    	background-color:#622449;
    	color:#FFFFFF;
    	min-width:985px;
    	}
    
    .parapump {
    font-size: 1.5em;
    color:#622449;
    font-size:1.5em;
    font-weight:bold;
    }
    
    .parapump2 {
    font-size: 1.5em;
    color:#622449;
    font-size:1.5em;
    font-weight:bold;
    background: white url(../images/model_filter/hotel_coffee3.jpg) no-repeat top right;
    }
    
    .parapump3 {
    font-size: 1.5em;
    color:#622449;
    font-size:1.5em;
    font-weight:bold;
    background: white url(../images/model_filter/shop_coffee3.jpg) no-repeat top right;
    }
    
    .parapump4 {
    font-size: 1.5em;
    color:#622449;
    font-size:1.5em;
    font-weight:bold;
    background: white url(../images/model_filter/business_coffee.jpg) no-repeat top right;
    }
    /* home page footer start */  
    
     	.nav {
        margin:auto;
        border:1px;    
        height:60px;
        background:#FFFFFF;
        font:bold 88%/1.1 verdana;
    	clear:both;
    	overflow:hidden;
    	}
    
     	.nav li {
        float:left;
        list-style:none;
    	margin:5px;
    	
    		}
    	
    	.nav li a img {	
    	margin:0 -5px;
    	border:1px inset #66f;
    	color:#ffffff
    	background:;
    		}
    
        .nav li a {
        float:left;
        padding:0 5px; 
        height:50px;
    	line-height:50px;
        color:#D68126;
        text-decoration:none;
        text-transform:none;
    	font-size:1.25em;
    }
        .nav li a:hover {
        margin:-3px;
        border:3px inset #66f;
        color:#CC6600;
        background:;
    }
    
    .paddinglogo {
    padding-left:15px;
    }
    		
    /* home page footer end */  
    /* home page ends*/   
    a:link {color: #622449; text-decoration: none}
    a:visited {color: #622449; text-decoration: none}
    a:hover {color: #D68126; text-decoration: underline; font-size: 100% }
    
    .hbloat {
    font-size:2em;
    font-weight:bold;
    color:#622449;
    }
    
    /* blocks */
    #wrap_blocks {
    width:100%; 
    clear:both;
    overflow:hidden;
    
    }
    
    #block_1{
    float:left;
    width:15%;
    background-color: ;
    border: 2px solid #702453;
    color:#622449;
    margin-right:3%;
    margin-top:3%;
    margin-left:10%;
    height:320px; 
    }
    
    #block_1 img {
    margin-left:25%;
    padding:5px; 
    }
    
    #block_1 p{
    font-size:1.5em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    }
    
    #block_1 .biglink {
    font_size:2em;
    
    }
    
    #block_2 {
    width:15%;
    float:left;
    border: 2px solid #702453;
    margin:3%;
    background-color: ;
    height:320px; 
    }
    
    #block_2 img {
    margin-left:25%;
    padding:5px;
    }
    
    #block_2 p{
    font-size:1.5em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    }
    
    #block_3 {
    width:15%;
    float:left;
    margin:3%;
    border: 2px solid #702453;
    background-color: ;
    height:320px; 
    }
    
    #block_3 p{
    font-size:1.5em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    }
    
    #block_3 img {
    margin-left:25%;
    padding:5px;
    }
    
    #block_4 {
    width:15%;
    float:left;
    margin:3%;
    border: 2px solid #702453;
    background-color: ;
    height:320px; 
    }
    
    #block_4 p{
    font-size:1.5em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    }
    
    #block_4 img {
    margin-left:25%;
    padding:5px;
    }
    
    #block_2 p{
    font-size:1.5em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    }
    
    #block_1 p{
    font-size:1.5em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2%;
    }
    
    #block_2 h1{
    font-size:2.5em;
    font-family:Arial,Verdana,Sans-serif;
    }
    
    
    /* end blocks */
    
    /*cup and text */
    
    #wrap_cupandtext {
    width:100%; 
    clear:both;
    }
    
    #cup_left {
    float:left;
    width:50%;
    background-color: #fff;
    border-top: 0px solid #702453;
    color:#622449;
    font-weight:bold;
    margin-left:-1px;
    }
    
    
    
    #cup_left img {
    display: block;
        margin-left: auto;
        margin-right: auto;
    	padding-top:0px;
    	margin-top:0px;
    			} 
    
    #cup_left h2{
    margin-left:8%;
    font-size:1.75em;
    }
    
    #cup_left .address {
    padding-left:20px;
    font-size:15px;
    padding-top:0px;
    margin-top:1px;
    }
    
    #cup_left h3{
    margin:0;
    padding-top:10px;
    padding-bottom:0px;
    margin-bottom:0px;
    font-size:25px;
    color:#D68126;
    padding-left:20px;
    }
    
    #strap_right {
    width:50%;
    float:right
    }
    
    #strap_right .endpadding {
    padding-bottom:50px;
    }
    
    #strap_right .contact {
    color:#F2CF4D;
    font-size:2em;
    margin-top:0px;
    padding-top:0px;
    }
    
    #strap_right .floatleft {
    float:left;
    }
    
    #strap_right .paddingstrip {
    padding:0px;
    padding-top:0px;
    margin-top: 0px;
    margin-bottom:0px
    margin-left:0px;
    margin-right:5px;
    }
    
    #strap_right .headerbloat {
    font-size:17px;
    background-color:#A6AE1F;
    }
    
    #strap_right .cats {
    font-size:13px;
    margin-left:-1px;
    }
    
    #strap_right .strapline {
    font-size:2em;
    padding-top:0px; 
    margin-top:0px;
    padding-bottom:0px;
    margin-bottom:0px;
    }
    
    #strap_right p{
    font-size:1.25em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2%;
    }
    
    #strap_right h1{
    font-size:3em;
    font-family:Arial,Verdana,Sans-serif;
    padding-bottom:0px;
    margin-bottom:0px;
    padding-top:0px;
    margin-top:0px;
    }
    
    .centre 
    {
    text-align:center;
    }
    
    /*cup and text ends*/
    
    
    /* blocks under cup start */
    #wrap_blocks_c {
    width:100%; 
    clear:both;
    overflow:hidden;
    }
    #block_1_c, #block_2_c, #block_3_c, #block_4_c{display:inline;}
    
    #block_1_c{
    float:left;
    width:100px;
    background-color: ;
    border: 1px solid #702453;
    color:#622449;
    margin:1%;
    height:340px; 
    } 
    
    #block_1_c img {
    padding:5px; 
    display: block;
    margin-left: auto;
    margin-right: auto; 
    }
    
    #block_1_c p{
    font-size:1em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    padding:2px;
    }
    
    #block_1_c .biglink {
    font-size:1.4em;
    text-align:center;
    }
    
    #block_2_c {
    width:100px;
    float:left;
    border: 1px solid #702453;
    margin:1%;
    background-color: ;
    height:340px; 
    }
    
    #block_2_c .biglink {
    font-size:1.4em;
    text-align:center;
    }
    
    #block_3_c .biglink {
    font-size:1.4em;
    text-align:center;
    }
    
    #block_4_c .biglink {
    font-size:1.4em;
    text-align:center;
    }
    
    #block_2_c img {
    padding:5px;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    }
    
    #block_2_c p{
    font-size:1em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    padding:2px;
    }
    
    #block_3_c {
    width:100px;
    float:left;
    margin:1%;
    border: 1px solid #702453;
    background-color: ;
    height:340px; 
    }
    
    #block_3_c p{
    font-size:1em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    padding:2px;
    }
    
    #block_3_c img {
    padding:5px;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    }
    
    #block_4_c {
    width:100px;
    float:left;
    margin:1%;
    border: 1px solid #702453;
    background-color: ;
    height:340px; 
    }
    
    #block_4_c p{
    font-size:1em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    padding:2px;
    }
    
    #block_4_c img {
    padding:5px;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    }
    
    #block_2_c p{
    font-size:1em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2px;
    }
    
    #block_1_c p{
    font-size:1em;
    font-family:Arial,Verdana,Sans-serif;
    margin-left:2%;
    }
    
    #block_2_c h1{
    font-size:2.5em;
    font-family:Arial,Verdana,Sans-serif;
    }
    
    /* blocks under cup ends */
    
    .pause {
    color:#D68126;
    font-weight:bold;
    font-size:20px;
    }
    
    #sidebar ul li.sub a {
    	text-decoration: none;
    	background: #A6AE1F;
    	color: #622449;
    	}
    	
    #sidebar .sub a:hover {
    	text-decoration:none;
    	color: #622449;
    }	
    
    #emailUs
    {
      display: block;
      width: 100px;
      height: 66px;
      background: url("../images/testimonial/get_quote_2.jpg") no-repeat 0 0;
      margin-left:0px;
      float:left;
    }
    
    #emailUs:hover
      { 
        background: url("../images/testimonial/get_quote.jpg") no-repeat 0 0;
      }
    
    
    #emailUs span
    {
      display: none; 
    }
    
    /*quick find*/
    
    #quick, #quick ul { /* all lists */
    	padding: 0;
    	margin-left: 20px;
    	list-style: none;
    	line-height: 1;
    	font-size:15px;
    	font-family:Arial, Helvetica, sans-serif;
    	}
    
    #quick a {
    	display: block;
    	width: 15em;
    }
    
    #quick li { /* all list items */
    	float: left;
    	width: 16em; /* width needed or else Opera goes nuts */
    }
    
    #quick li ul { /* second-level lists */
    	position: absolute;
    	background: #CCCCCC;
    	width: 15em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #quick li ul ul { /* third-and-above-level lists */
    	margin: -1em 0 0 10em;
    }
    
    #quick li:hover ul, #quick li.sfhover ul {
        left: auto;
    }
    
    #quick li:hover ul ul, #quick li.sfhover ul ul {
    	left: -999em;
    }
    
    #quick li:hover ul, #quick li li:hover ul, #quick li.sfhover ul, #quick li li.sfhover ul {
        left: auto;
    }
    
    #cup_left {
    	clear: left;
    	}
    
    /* Quick find end */
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    As unlikely as it seems the problem is caused by one extra quote in your image tag here:

    Code:
    <a href="shop_coffee_machines.html">Shop coffee machines</a> | <a href="office_coffee_machines.html">Office coffee machines</a> | <a href="talktous.html">Get a professional coffee machine quote...</a></p>
            <a href="talktous.html"><img src="http://www.pauserefreshment.co.uk/images/horeca/cup_quote.jpg" alt="Get me a coffee machine quote" width="255" height="187"
     " /></a>
            <div id="block_1_c"> <img src="h
    Juts after the height="187" you have an extra quote.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, problem fixed :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •