Whitespace below image row :-(

HTML & CSS
1


Hi from gloomy & wet but mild Wakefiled UK :slight_smile:

On this page http://www.pauserefreshment.co.uk/bean_to_cup_coffee_maker_la_Cimbali_M1.HTML I added a div class clear to prevent a header squirting up the site of the images. The div class clear does this but adds to much white space.

I attemted to wrap the images in another div class with width 100% but the css became to complex for me :frowning:

So my question is please how can I reduce the whitespace below the images?

Any insights welcome :slight_smile:

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;
}

/* Image gallery */

#content .float_image {
float:left;
padding-left:2%;
height:100px;
width:100px;
padding-bottom:0px;
}

#content .caption {
text-align:center;
padding-bottom:5px;
font-weight:bold;
}

/* Image gallery end */

/* 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: 155px;
}

#content .performance {
margin-bottom:0px;
padding-bottom:-1px;
}

#content li.eco  {
font-size:1.5em;
margin: 0;
padding: 0;
}

#content ul li.pot  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/barista_bits/coffee_pot.jpg') no-repeat top left;
}

#content ul li.arrow_up  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/barista_bits/vertical_arrow.jpg') no-repeat top left;
}


#content ul li.arrow_flat  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/barista_bits/horizontal_arrow.jpg') no-repeat top left;
}



#content ul li.cup  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/barista_bits/cup_saucer.jpg') no-repeat top left;
}

#content ul li.jug  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/barista_bits/milk_jug.jpg') no-repeat top left;
}

#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 */

/* Light Box */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 40%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

.strapshrink {
font-size:14px
}
/* Light Box Ends*/
2

Anchors and images are inline; why float them? Try these changes:

#content .float_image {
  padding-bottom:0;
  padding-left:2%;
  }

#content a img {
  border:0 solid #000000;
  height:94px;
  margin-bottom:120px;
  padding-left:20px;
  }

img {
  border:medium none;
  }

These changes are based on existing markup/structure. The anchors really belong in an unordered list. The ul could then contain the float items without any clearing element.

cheers,

gary

3

But just so you do know it’s because of the <ul> you have in there (that has the display:none <li>'s)

#content .horizontal_list{/*do whatever you want..e.g. height:0; or display:none etc etc*/
4


Definately having a bad day in the css office :frowning:

I have two problems at the mo and the fact that the server has gone down means I cant see the site but let me describe. I decided to order the images within an un ordered list to resolve the tonnes of whitespace below which it ded. But the images have inherited green ticks and a 125 x 94 image size.

So my question is please how do I get rid of the green ticks and enforce a 100 x 100 image size?

Its all on this page if the server has come out of its come - http://www.pauserefreshment.co.uk/be...imbali_M1.HTML

Any insights welcome :slight_smile:

5

Did you not try my suggestions? I’ve dealt with that, according to your existing markup and content.

cheers,

gary

6

Hi Gary…

yes I added your code but no luck however my head was v tired at the time I’ll
re paste it into the code 2 moro and see what happens :slight_smile:

7

It is inheriting the checkmark image from Content ul li which means it will be applied to all list elements in a ul within <div id=“content”>. This method is useful for setting up a style you want to use every time, but otherwise it’s better to make it a more specific identifier instead of a general rule (make it a class to use as you need it).

It sounds like you are working with code written by someone else? If you can, maybe you should ask them how they set it up, what their plan was for the site. (If it was a purchased template then I guess you don’t have that option.)

Also, there is a super helpful “code inspector” tool called FireBug that I recommend you try out. It helps you figure out what styles are being applied to what, lets you condense or expand code and make html/css “edits” that are applied within the browser real-time so you can preview how a code change will be handled (but those changes don’t apply to the server, just to your current viewing session).

8

Hi Gary … unfortunatley having uploaded your suggestions for the second time I still get tonnes of white space when the div class clear is added. I then went doen the route of an unordered list and after an hour of trying to get rid of a green tick icon i;m now going down the a third method just to get a row of images to evenly space across a web page, makes me think tables are not such a bad thing after all!

9

Very naughtily I split the thread, apologies wont do it again. Suffice to say i fixed the problem the detail of which is here:

10

The point is/was that the clearing div is superfluous, and has caused the problem.

If you were to go with a list, you could either float the items or make them inline, or inline-block. If you float, use the lessons in the tutorial I linked. Should you choose to use inline-block items, see my inline-block gallery tutorial.

The maxdesign floatutorial you followed is far from being best practice. It is one of many possible methods, but not one of the better ones.

cheers,

gary