Panic button pressed, IE6 I hate you :-(

[Zygoma]

OK apologies for the emotive header but I'm at my witts end heres the problem:

I tried too get this page
http://www.pauserefreshment.co.uk/homepage_draft1.html

looking right in IE 6 but instead wrecked threw a grenade into the CSS and HTML and its all messed up.

Specifically - The section Sept Coffee and Toni Guy were sread horizontally across the page now they incorrectly stack under each other.

Secondly the images of individual coffee machines were lined horizontally across the page now they have stacked up onto the right hand side of the page.

Alot of people helped me get the page sorted out but Ive done something wrong with my latest attempt to get the layout IE 6 compatible.

I would like to apologise for undoing all the code help I have had so far - I know Ive made a human error with uploading the code this morning but I just havent got the brains to spot where :-(

Here is the offending code and I am praying for someone to offer a permanent fix :-)

@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}

body {
background-color:#D68126;
}

#container
{
width: 100%;
background-color: #fff;
color: #333;
border: 0px solid #702453;
line-height: 130%;
margin:10px;
}

#top
{
padding: .5em;
background-color: #FFFFFF;
border-bottom: 0px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#top img {
margin: 0px;
padding: 0px;
}

#leftnav
{
float: left;
width: 50%;
margin: 0;
}

#content
{
margin-left: 50%;
border-left: 3px solid #622449;
}

#footer
{
clear: both;
margin: 0;
padding-bottom: 5px;
color: #333;
background-color: #FFFFFF;
border-top: 3px #702453;
color:#622449;
font-weight:bold;
}

#footer .points
{
float: left; 
position: relative;
margin-bottom:0px;
padding:0;
}

#footer .utube2
{
float: right; 
position: relative;
margin-bottom:0px;
padding: 0;
}


#content h1 { 
margin: 0 0 0 5px; 
padding-bottom: 3px;
color:#622449;
}

#leftnav h1 { 
margin: 0 0 0 5px; 
padding: 3px;
color:#622449;
}

#leftnav h3 { 
margin: 0 0 0 5px; 
padding: 3px;
color:#B5B43E;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
line-height: 1.5em;
}

#leftnav h4 {
padding: 3px;
margin: 0 0 0 5px;
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}

#content h2 { 
padding: 0;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height: 1.5em;
}

#content h5 { 
padding: 0;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}

#leftnav h2 {
padding: 0;
margin: 0 0 0 5px;
color:#B5B43E;
}



#content p {
padding: 0;
margin: 0 0 0 15px; 
color:#B5B43E;
}

#leftnav p { 
margin: 0 0 0 15px;
padding-top: 3px;
padding-left: 2px;
color:#622449;
font-weight:bold;
padding-bottom:20px;
}

#content p { 
margin: 0 0 0 15px;
padding-top: 3px;
padding-left: 2px;
color:#622449;
font-weight:bold;
padding-bottom:20px;
}

a:link {color: #622449; text-decoration: none}
a:visited {color: #622449; text-decoration: none}
a:hover {color: #D68126; text-decoration: underline; font-size: 100% }

#header {
	height:125px;
	width:100%;
	overflow:hidden;
	background-color:#702453;
		
}

#header p {
float:left;
width:222px;/*need these two*/
/*left:-2px;Won't work without a positioin*/
margin:0;
/*position:absolute;
top:5px;Using floats instead so..*/
}


#header p a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	width:207px;
	height:103px;
	margin-top:15px;
	margin-left:15px;
	background:url(../images/logo8.gif);	
}

#header ul {
/*left:244px; no need*/
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0;/*update tihs to 0 to compensate for browser differences*/
padding:0;
position:relative;
float:left;/*add this*/
top:12px;
}

#header ul li {
	float:left;
}
#header ul li a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	height:109px;
	background-image:url(../images/text-topnav9.jpg);
	background-repeat:no-repeat;
}
#header ul li a.who {
	width:91px;
	background-position:0 0;
	margin:0px 10px 0 0;
}
#header ul li a.our {
	width:93px;
	background-position:-91px 0;
	margin:0 10px 0 0;
}
#header ul li a.happy {
	width:105px;
	background-position:-184px 0;
	margin:0 10px 0 0;
}
#header ul li a.come {
	width:103px;
	background-position:-289px 0;
	margin:0 10px 0 0;
}
#header ul li a.useful {
	width:93px;
	margin:0 10px 0 0;
	background-position:-392px 0;
}
#header ul li a.on-line {
	width:94px;
	margin:0 10px 0 0;
	background-position:-485px 0;
}
#header ul li a.show {
	width:95px;
	background-position:-579px 0;
}
/* footer2 start */
 	.nav {
    margin:auto;
    border:1px;
    padding:0;
    width:100%;
    height:60px;
    background:#A6AE1F;
    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:#ddd;
    text-decoration:none;
    text-transform:none;
}
    .nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ffffff;
    background:;
}


/* footer2 end */

.pics li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-right:3%;
width:100%;
margin-left:1%;
display:inline;
}

#headbanners {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
}
.sector {
color:#D68126;
font-weight:bold;
font-size:1.5em;
margin:0;
padding:0;
}

#headbanners p {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	}
	
#headbanners p img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
#headbanners h2 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h2 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
#headbanners h3 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h3 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
	#headbanners h4 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h4 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}	
	
	#headbanners h5 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h5 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
	#headbanners h6 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h6 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}						
	 /* a two line height to align and to have equal border height on the p in most width cases */ 

/*pause points*/

#points {	
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
	width: 50%;	
	float:left;
}

#points p {
	float: left; /* line up adjacent */
	margin-left: 3px;
	border-left: 0px solid #702453;
	padding:1%;
	width: 50%; /* (29+2+2=33) */
	font-size:1.2em;
	margin-top: 0px;	
}

#points img {
	float: left;
	margin-right: 3%;
	margin-left:0%;
	width: 75px;
	height: 109px; 
}
	
#points h1 { 
margin: 0 0 0 5px; 
padding: 3px;
color:#622449;
}	

#points h2 {
padding: 0;
margin: 0 0 0 15px;
color:#B5B43E;
}	
	
	
	/* a two line height to align and to have equal border height on the p in most width cases */ 


/*pause points ends*/
/*strap line*/
#strapline {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#B5B43E;
	font-weight:bold;
	line-height:;	
	}
	


#strapline p img {
	float: left;
	margin-right: 3%;
	width: 119px;
	height: 105px; 
	
	/* a two line height to align and to have equal border height on the p in most width cases */ 
}

/*Hot line*/

#hotline {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
	font-family:font-family: arial, sans-serif;
	font-size:1em;
	
}

.callline {
font-family:font-family: arial, sans-serif;
color:#B5B43E;
font-size:1.1em;
}


#hotline h1 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding:1%;
	width: 100%; /* (29+2+2=33) */
	font-size: 1.5em;
}
#hotline h1 img {
	float: left;
	margin-right: 3%;
	width: 116px;
	height: 116px; /* a two line height to align and to have equal border height on the p in most width cases */ 
}

#hotline .free {
float: right;
	margin-right: 3%;
	width: 90px;
	height: 90px;
	}
/*Hot line ends*/

/*end footer*/
#endfooter {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:grey;
	font-weight:normal;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
}
#endfooter p {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px;
	width: 100%;
	font-size:13px;
	text-align:center;
	}
	 /* (29+2+2=33) */
/*end footer*/

#green {
margin-left:50%;
}

#column2 {
float:left;
clear:none;
position:relative;
width:50%;
overflow:hidden;
background-color: #fff;
border-top: 0px solid #702453;
color:#622449;
font-weight:bold;
}

#column2 p {	
margin: 0 0 0 15px;
padding-top: 3px;
padding-left: 2px;
color:#622449;
font-weight:bold;
padding-bottom:20px;
	}

#column2 h2 {
padding:0px;
margin: 0 0 0 15px;
color:#B5B43E;
}

#column2 h1 {
margin: 0 0 0 5px; 
padding-bottom:3px;
padding-top:3px;
color:#622449;
}	

#column2 p img {
	float: left;
	margin-right: 3%;
}

#content .paddingblast
{
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

#leftnav .paddingblast
{
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

#leftnav img
{
float:left;
}

#content img
{
float:left;
}

#column2 h6 { 
padding: 0;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height: 1.5em;
}

#column2 .paddingblast
{
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

#column2 ul li {
  margin-left: 180px;
  padding: 2px 0 2px 16px;
  list-style: none;
  background: url('../images/green/tick.jpg') no-repeat top left;
}

.column2 {
background-color:#FFFFFF;
border-top:0 solid #702453;
clear:none;
color:#622449;
float:left;
font-weight:bold;
overflow:hidden;
position:relative;
width:50%;
margin-left:-1px;
padding-left:7px;
}

.column2 h6 { 
padding: 0;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height: 1.5em;
}

.paddingblast { 
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

.column2 img
{
float:left;
margin-right:10px;
}

<!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>
<title>UK Office coffee services - rent office coffee service solutions - Call Suzy 01924 363 091 - pause...thoughtful refreshment</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/homepage_draft1.css";
</style>
</head>
<body>
<div id="container">
<div id="header">
  <p> <a href="#"> 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="usefulinfo.html" class="useful"> useful things...</a> </li>
    <li> <a href="askusaquestion.html" class="on-line"> on-line shop... </a> </li>
    <li> <a href="mondo2_coffee_machine.html" class="show"> show you care... </a> </li>
  </ul>
</div>
<div id="hotline">
  <h1><span class="callline"> UK  rental coffee machine hotline: Call Suzy 01924 363091 | <a href="mailto:hello@pause.co.uk;david@pause.co.uk">Suzy@pause.co.uk</a></span><br>
    <img src="images/kristina_call2.jpg" alt="Give pause... refreshment a call"><a href="sitemap.html"><img class="free" src="images/sitemap.jpg" alt="Don't get lost, check out the site map" style="border:none;"/></a>&quot;Join 3,500 happy customers   renting our office coffee machines from Wakefield UK.      
    When your workplace needs office coffee service call Suzy on 01924 363091.&quot;<br/>
  </h1>
</div>
<div id="headbanners">
  <p><img src="images/model_machine/brav_therm.jpg" alt="Bravilor Therm" /><span class="sector">Pump coffee machines</span><br />
    Need a portable office coffee service? pause... refreshment recommends the <a href="pump_coffee_machine.html">Bravilor Therm</a>.</p>
  <p><img src="images/model_machine/koro_2.jpg" alt="Koro bean to cup" width="75" height="164" /><span class="sector">Coffee bean machines</span><br />
    Need to rent a coffee bean machine for the office? pause... refreshment recommends the <a href="koro_coffee_machine.html">koro coffee machine</a>.</p>
  <p><img src="images/model_machine/mondo2_2.jpg" alt="rent coffee machines for your corporation" /><span class="sector">Free coffee machine</span><br />
    Need a free coffee machine for for the office? pause... refreshment recommends the <a href="mondo2_coffee_machine.html">free mondo 2 coffee machine</a>.</p>
</div>
<div id="headbanners">
  <p><img src="images/model_machine/vision_400_2.jpg" alt="Vision 400" /><span class="sector">Instant coffee maker</span><br />
    Need to rent an instant coffee maker for the office? pause refreshment recommends the <a href="vision_coffee_machine.html">Vision 400</a>.</p>
  <p><img src="images/model_machine/franke_flair.jpg" alt="franke flair" width="75" height="163" /><span class="sector">latte coffee machine</span><br />
    Need to rent a latte coffee machine for the office? pause... refreshment recommends the <a href="franke_coffee_machine.html">franke flair coffee machine</a>.</p>
  <p><img src="images/model_machine/franke_evolution2.jpg" alt="franke evolution" width="75" height="163" /><span class="sector">catering coffee machines</span><br />
    Need to rent a catering standard coffee machine for the office?pause refreshment recommends the <a href="franke_evolution_coffee_machine.html">Franke Evolution</a>.</p>
</div>
<div id="leftnav">
  <h3>Free office coffee machines</h3>
  <p><img src="images/model_filter/chris_mondo.jpg" alt="Mondo 2 - The free office coffee machine from pause" />We've got hold of the Mondo 2 a true office coffee hero. Serving up both tea and coffee the office kettle will be truly jealous and this <a href="mondo2_coffee_machine.html">coffee machine is free</a>...</p>
  <h4>Office tea and coffee promotions</h4>
  <p class="paddingblast">September promotions for members only ;-)</p>
  <p><img src="images/model_instant/gold.jpg" alt="Nescafe Gold" width="50" height="55" />Buy two jars of Nescafe Gold get one free tin of speciality coffee free!<br>
    Want to join the club? <a href="mailto:hello@pause.co.uk;david@pause.co.uk">eMail Suzy</a>.</p>
  <p><img src="images/model_instant/tetley.jpg" alt="Tetley Tea Bags" width="50" height="54" />Buy two Tetley One Cup Tea bags get third free.<br/>
    Want to join the club? <a href="mailto:hello@pause.co.uk;david@pause.co.uk">eMail Suzy</a>.</p>
</div>
<div id="content">
  <h2>Rent coffee machines</h2>
  <p><img src="images/model_instant/kristina_vision_225_192.jpg" alt="vision 400 office coffee machine" /><a href="cafe_coffee_machines.html">rent cafe coffee machines</a> | <a href="flavia_creation_400.html">rent office coffee machines</a><a href="flavia_400.html"></a> | <a href="franke_evolution_coffee_machine.html">rent catering coffee machines</a> | <a href="franke_coffee_machine.html">rent coffee bean machines </a>| </p>
  <h5>Gourmet office coffee</h5>
  <p class="paddingblast">Fresh coffee beans :-)</p>
  <p><img src="images/model_instant/coffee_beans2.jpg" alt="coffee beans" width="55" height="50" /><a href="cafeology_fairtrade_mocha_java_beans.html">Cafeology Fairtrade Mocha Java Ground</a> | <a href="cafeology_fairtrade_decaf_ground_coffee.html">Cafeology Fairtrade Decaf Ground</a> | <a href="/cafeology_fairtrade_latin_ground_coffee.html">Cafeology Fairtrade Latin Ground Coffee </a> | <a href="coffee_beans_triple_cert.html">coffee beans triple cert</a> | <a href="bewleys_organic_coffee_beans.html">Bewley's Irish Organic</a></p>
</div>
<div style="clear:both"></div>
<div class="column2">
  <h6>Sept Coffee Machine Hot Deal</h6>
  <p class="paddingblast">"Get a £50 choc hamper free for your office!"</p>
  <p><a href="flavia_creation_400.html"><img src="images/hot_deal/hot_flavia_150_157.jpg" alt="MMmmmm chocolate" /></a>Rent a <a href="flavia_creation_400.html">flavia 400 creation</a> coffee meachine this September and we'll send your office a £50  chocolate hamper :-) Call Suzy on 01924 363091 | eMail <a href="mailto:hello@pause.co.uk;hello@pause.co.uk">Suzy@pause.co.uk</a></p>
  <ul>
    <LI><a href="flavia_creation_400.html">Offer exclusive to UK Offices Only</a></LI>
  </ul>
</div>
<div class="column2">
  <h6>Toni & Guy choose pause</h6>
  <p class="paddingblast">"Prestige hair salon pick pause"</p>
  <p><a href="http://www.pauserefreshment.co.uk/hairdressing_coffee_machine.html"><img src="images/testimonial/toni_guy_black.jpg" alt="Fast rental coffee machine quotes" ></a>pause refreshment visited Rebecca Gill, Business Manager for Toni & Guy Hairdressing and in her own words let us know how much  they've enjoyed pause refreshment coffee machine services for over 10 years...<a href="hairdressing_coffee_machine.html">more</a></p>
</div>
<div id="thumnails">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div class="pics">
    <ul>
      <li><a href="mondo2_coffee_machine.html"><img src="images/model_machine/chris_mondo.jpg" alt="Chris from sales says Hi!" /></a></li>
      <li><a href="http://www.pauserefreshment.co.uk/flavia_creation_400.html"><img src="images/model_machine/az_flavia.jpg" alt="Az from distribution says Hi!" /></a></li>
      <li><a href="bewleys_organic_coffee_beans.html"><img src="images/model_bean/tracy_bewley.jpg" alt="Tracy prefers Irish coffee!"/></a></li>
      <li><a href="http://www.pauserefreshment.co.uk/franke_coffee_machine.html"><img src="images/model_machine/ruth_franke2.jpg" alt="Ruth from customer services says Hi!"/></a></li>
      <li><a href="vision_coffee_machine.html"><img src="images/model_machine/krist_vision.jpg" alt="Kristina from customer services says Hi!" /></a></li>
    </ul>
  </div>
  <ul class="nav">
    <li><a href="http://www.pauserefreshment.co.uk/green_switch.html"><img src="images/green/how_green.jpg" /></li>
    <li><a href="sitemap.html">Site Map</a></li>
    <li><a href="bean_meets_machine.html">| &nbsp;Our best selling office coffee machines</a></li>
  </ul>
  <div id="endfooter">
    <p>&copy; 2009 pause refreshment | Unit 3 128 Thornes Lane | Wakefield | West Yorkshire | WF2 7RE | 01924 363 091 | <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
  </div>
</div>
</body>
</html>

[RyanReese]

Originally Posted by Zygoma

OK apologies for the emotive header but I'm at my witts end heres the problem:

I tried too get this page
http://www.pauserefreshment.co.uk/homepage_draft1.html

looking right in IE 6 but instead wrecked threw a grenade into the CSS and HTML and its all messed up.

Specifically - The section Sept Coffee and Toni Guy were sread horizontally across the page now they incorrectly stack under each other.

Because you add 7px left padding and that adds to the overall width

.column2
{
	padding-left:0;/*50% width+7px left padding..thats too high*/
	/*Either set left padding to 0 or set the left margin to -8px (doesnt look great*/
}

Secondly the images of individual coffee machines were lined horizontally across the page now they have stacked up onto the right hand side of the page.

I guess my above code fixed taht as I don't see that

Alot of people helped me get the page sorted out but Ive done something wrong with my latest attempt to get the layout IE 6 compatible.

I would like to apologise for undoing all the code help I have had so far - I know Ive made a human error with uploading the code this morning but I just havent got the brains to spot where :-(

Here is the offending code and I am praying for someone to offer a permanent fix :-)

[Zygoma]

http://www.pauserefreshment.co.uk/homepage_draft1.html

You life saver thanks Ryan. One last thing - promise. My confidence is a bit low following the hash up I made so I'm not going to make any code guesses :-(

But how could I create some padding In between the graphic hot deal and the text that starts with "Rent a flavia". At the mo its squeezed right up to the square, I need some white space in there.

Thanks In advance...
http://www.pauserefreshment.co.uk/homepage_draft1.html

[RyanReese]

Originally Posted by Zygoma

http://www.pauserefreshment.co.uk/homepage_draft1.html

You life saver thanks Ryan. One last thing - promise. My confidence is a bit low following the hash up I made so I'm not going to make any code guesses :-(

No problem . Makes it easier for me.

But how could I create some padding In between the graphic hot deal and the text that starts with "Rent a flavia". At the mo its squeezed right up to the square, I need some white space in there.

Thanks In advance...
http://www.pauserefreshment.co.uk/homepage_draft1.html

Just add a right margin to ".column2 img" (btw also give it display:inline; to be safe).

A float drop won't occur because you didn't give a width thus it will calculate the width minus the margin thus giving what you want .

[RyanReese]

Also I'm seeing some things.

.nav li {
    float:left;
    list-style:none;
	margin:5px;
	
		}

Add display:inline; for taht.

.pics li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-right:3%;
width:100%;
margin-left:1%;
display:inline;
}

If that wasn't display:inline; then it would be 104% width, and IE6 would expand that

Also remove all your #column2 stuff as it has been replaced by .column2 (as I told you in another thread )

[Zygoma]

Thank you Ryan - You fixed it :-)

[Zygoma]

The above shows a layout issue Ive got on page -
http://www.pauserefreshment.co.uk/homepage_draft1.html

As you can see with the red circle I get two types layout probs. Prob one -
When you get a smaller monitor the images start to stack below as in the example.

Problem No2 - If you have a big monitor you get a tonne of whitespace off to the right after the last image.

So is there a CSS solution to get the images to allways evenly fill the available space?

Thanks in advance :-)

<div class="pics">
    <ul>
      <li><a href="mondo2_coffee_machine.html"><img src="images/model_machine/chris_mondo.jpg" alt="Chris from sales says Hi!" /></a></li>
      <li><a href="http://www.pauserefreshment.co.uk/flavia_creation_400.html"><img src="images/model_machine/az_flavia.jpg" alt="Az from distribution says Hi!" /></a></li>
      <li><a href="bewleys_organic_coffee_beans.html"><img src="images/model_bean/tracy_bewley.jpg" alt="Tracy prefers Irish coffee!"/></a></li>
      <li><a href="http://www.pauserefreshment.co.uk/franke_coffee_machine.html"><img src="images/model_machine/ruth_franke2.jpg" alt="Ruth from customer services says Hi!"/></a></li>
      <li><a href="vision_coffee_machine.html"><img src="images/model_machine/krist_vision.jpg" alt="Kristina from customer services says Hi!" /></a></li>
    </ul>
  </div>

.pics li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-right:3%;
width:100%
margin-left:1%;
display:inline;
}

[Paul O'B]

Hi,

There are a couple of issues here.

Firstly, the effect of the image dropping to a new line is exactly what you would want for users with smaller monitors to see the images without scrolling.

Secondly if I maximise my screen on my 1680x1050 22" monitor then the lines of text are too long and hard to read. I would suggest that you implement a min and max width on your layout that would stop the layout form either getting too large ot too small.

If you always want five images on a line then you can't use floats because floats always wrap unless they are in a fixed width container. The simplest answer in this case would be to use a 5 celled table set to 100% width and then the images will automatically expand and contract without breaking to another line.

It could be done in css but would be more complicated than using a table (See the second quiz here).

here's an example using the code form the quiz:

    <div class="pics">
        <ul>
            <li>&nbsp;<a href="mondo2_coffee_machine.html"><img src="http://www.pauserefreshment.co.uk/images/model_machine/chris_mondo.jpg" alt="Chris from sales says Hi!" /></a></li>
            <li><a href="http://www.pauserefreshment.co.uk/flavia_creation_400.html"><img src="http://www.pauserefreshment.co.uk/images/model_machine/az_flavia.jpg" alt="Az from distribution says Hi!" /></a></li>
            <li><a href="bewleys_organic_coffee_beans.html"><img src="http://www.pauserefreshment.co.uk/images/model_bean/tracy_bewley.jpg" alt="Tracy prefers Irish coffee!"/></a></li>
            <li><a href="http://www.pauserefreshment.co.uk/franke_coffee_machine.html"><img src="http://www.pauserefreshment.co.uk/images/model_machine/ruth_franke2.jpg" alt="Ruth from customer services says Hi!"/></a></li>
            <li class="last"><a href="vision_coffee_machine.html"><img src="http://www.pauserefreshment.co.uk/images/model_machine/krist_vision.jpg" alt="Kristina from customer services says Hi!" /></a>&nbsp; &nbsp</li>
        </ul>
    </div>

Note that the non breaking space is important.

Here is the CSSS:

.pics {
    text-align:justify;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    clear:both;
    min-width:820px;
}
.pics li {
    display:inline;
}
.pics li.last {
    margin-right:100%;
}
.pics li a {
    display:-moz-inline-box;
    display:inline-block;
}

[Paul O'B]

I also notice that you have a horizontal scroll bar on the window due to the fact that in a few places you have used 100% width and also adding padding. You can't add padding to 100% width without making the element too wide so remove the padding or change/remove the width.

[Zygoma]

Thank You Paul :-)