Hey,
Can anyone help me with this design: http://www.freemanholland.com/cow/
It looks ok in firefox, but not in Ie7/8
How can i fix?
Thanks
Can’t see any differences between Opera 10 and IE 8…
Hey,
thanks for replying, it should look like this:
http://www.freemanholland.com/clients/cow/01_home.jpg
Ignore the additional stuff, i’m trying to get the layout right. The footer should appear higher and also the #header div appears to low down, this is only in IE7 and 8.
Any ideas how i can fix?
Fix what? I didn’t get it. This is (see attachment) what I see on Windows7 using a screen resolution of 1600x900 Pixel - no matter which browser*.
It didn’t fits to your screenshot nor to your description.
*) tested on Opera 10.52, Firefox 3.6 and MS IE 8
Hey,
I’m awaiting for your screenshot to be accepted. If you look at this link: http://www.freemanholland.com/clients/cow/01_home.jpg
That is what the design should look like, i will look at your screenshot to see what you can see on your screen…
Will get back to you shortly
Thanks
Hey,
I can see your attachment, The COW logo and cart should not be that far to the right. (See the link i sent to what it should look like)
How can i make the #header inline instead of being so far to the right?
Thanks
The problem is that you have a fixed width design that only works at abut 1300px width. On monitors wider than that the elements are misplaced and smaller than that they disappear.
Make up your mind what you want 
If its a fixed width then give it a fixed width.
If it’s fluid then re-design it to work in a fluid environment. At present it will only display correctly at an exact size.
It doesn’t look as though floating your page wrapper to the right is a good idea anyway and you should probably do something similar to this:
#page-wrap {
min-width: 1059px;
max-width: 1260px;
/*float:right;*/
/*display:inline;*/
margin:0 0 0 200px;
}
The min and max widths aren’t really much use because the content has nowhere to go.
Hey,
Thanks Paul.
Well this is meant to be a fluid/liquid layout. I need to make some elements much smaller, so i will do this and see how i get on
So as this needs to be a fluid layout, what have i done wrong? I am used to creating fixed width designs, fluid is not my strong point 
Thanks
So as this needs to be a fluid layout, what have i done wrong?
Well you need to decide what you want it to look like when the screen is squashed and then what you want it to look like when the screen is wide and the work towards that goal
I can’t really help until I know what you want it to look like. At present it can only look right at one basic size.
What you could do is to take make the yellow portion a fixed width and then center it so that it appears to be a bit fluid.
I don’t really see how that layout can be really fluid anyway. It’s basically a fixed width left aligned site by design.
Hey,
I’ve managed to put something together 
Just one thing, i have added a white box #read-more. But i am having to put a huge minus margin of -455px…
Why am i having to do this?
Hi, for the #read-more element you don’t specify coordinates for it (you absolutely position it) and as a result the browser guesses where to place it. Since the <img> is before the #read-more it assumes it should be under it.
You could float it instead of absolutely postition it (you should also float the .model too for cross browser c onsistancy, and you could also remove the margin set on it)
Hey,
Thanks Ryan, i didn’t know it was that simple. However how would you suggest floating the .model?
It looks ok in firefox, but not in IE7
I am going to the gym now, but if I recall from messing with firebug, floating the .model and the #read-more does the trick, and I didn’t see a reason right there as to why IE7 wouldn’t play along (though granted it was literally a glance), however you also need to remove the margin on .model (I believe that one has the 28em margin?)
If you still can’t get things working by the time I get back I’ll take a look
CSS is simpler then most people think, but at the same time, more complex
Hey,
I have had a bit of a play around, and managed to get something going…
However i know for sure its not the best way of doing it, hopefully you can suggest an alternative?
Enjoy the gym! At least some people actually go! :goof:
Thanks
Hi,
I think you’ve made it worse
At any screen width less than 1100px the layout is broken. On my 27" mac at full screen the Cow cart and Birmingham store elements are miles away from the rest of the layout.
You would have been better doing as I said and centering the yellow portion so that it moves as a whole when the page is wider and then set min and max widths to constrain it. That’s the way I would do it without a re-design.
Alternatively you would need to make the elements more fluid (e.g, the text box could percentage width). Put the picture of the girl in the background and centred so that she moves with the window. Then allow the content to slide over the top of the picture of the girl so that the content remains visible.
Just placing two element on the right of the screen as you have done is not really a viable solution unless you also move other elements correspondingly.
Constructing a fluid layout starts at the design stage which is why you are finding it hard to suddenly turn a fixed width layout design into a fluid one.
Oh what a shame!
As you already may be aware, i am used to creating fixed width designs, so am having trouble with this.
Do you know of a template or something that would get me going, so i can follow it??
I think your suggestion is perfect, centering the content no matter the size of the screen.
Is there something i could look at for inspiration 
thanks
Hi,
Ok I’d do something like this to start with:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css"/>
<title>Cow | Homepage</title>
<style type="text/css">
/*
Created by Ibrar Hussain of Freeman Holland Ltd
E-Mail: ibrar@freemanholland.com
*/
/* BASIC STRUCTURE */
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
color:#000;
background:#fcff00 url('http://www.freemanholland.com/cow/images/lines.png');
font: 12px Arial, helvetica, sans-serif
}
img {
border:0px
}
.margin-left {
margin-left:-6px;
}
.margin-leftmore {
margin-left:-5px;
}
.left {
float:left
}
.right {
float:right
}
a {
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
.submit {
background:url("images/submit.jpg") repeat scroll 0 0 transparent;
border:0 none;
height:16px;
width:65px;
vertical-align:top;
cursor:pointer;
margin-top:-1px;
}
.input-text {
vertical-align:top;
margin-left:5px;
padding:1px;
margin-top:-4px
}
h1 {
font-size: 1.8em;
padding:0.2em 0.3em;
}
h2 {
font-size: 1.3em;
color: #8b0000;
}
/* BASIC STRUCTURE */
/********************************************
HEADER
********************************************/
#main {
margin-left:10.3em;
min-height:0;
overflow:hidden;
background:url(http://www.freemanholland.com/cow/images/woman.png) no-repeat 50% 100px;
min-width:650px;
}
#main-inner{
max-width:1200px;
margin:auto;
}
* html #main,* html #main-inner {
height:1%;
overflow:visible
}
#header {
height:11em;
margin-top:1em;
}
#header-left {
float:left;
width:25.4em;
height:10.4em;
margin-left:1em;
}
#header-right {
background:url("http://www.freemanholland.com/cow/images/home-cart.png") repeat scroll 0 0 transparent;
float:right;
font-size:11px;
height:47px;
margin-right:20px;
padding:53px 24px 30px;
width:230px;
}
#checkout {
margin-top:35px;
width:231px;
text-align:right
}
/********************************************
MAIN LEFT NAV
********************************************/
#main-left-nav {
position:absolute;
left:0;
width:10.3em;
top:0
}
/********************************************
CONTENT WRAP
********************************************/
#content-wrap {
padding:0 1em 1em;
height:420px
}
.model {
float:right;
margin-left:35em;
margin-top:-7.4em;
}
.bird {
float:right;
margin-top:110px;
margin-right:30px;
}
#read-more {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
font-size:11px;
margin:40px 0 0 2%;
display:inline;
padding:15px;
width:30%;
z-index:100
}
/********************************************
FOOTER
********************************************/
#footer {
text-align:center;
margin-top:20px;
padding:2px 0 0;
color:#fff;
background:url('http://www.freemanholland.com/cow/images/footer.png');
position:relative;
list-style:none;
text-align:center;
width:100%;
}
#footer li,#footer input{display:inline;vertical-align:middle;}
#footer a {
color:#fcff00;
text-decoration:none;
margin:0 20px 0 0;
}
#footer span {
margin-left:20px
}
#footer a:hover {
text-decoration:underline
}
#footer img{margin:0 20px;vertical-align:middle;}
#footer .input-text {
vertical-align:middle;
margin:2px 0 6px 5px;
padding:1px;
}
</style>
</head>
<body>
<div id="main-left-nav"> <a href=""><img src="http://www.freemanholland.com/cow/images/we-are-cow.png" alt=""/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/we-love-vintage.png" alt="" class="margin-leftmore"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/buy-cow-online.png" alt="" class="margin-left"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/cow-people.png" alt="" class="margin-left"/></a> </div>
<div id="main">
<div id="main-inner">
<div id="header">
<div id="header-left"> <a href="http://www.freemanholland.com/cow/"><img src="http://www.freemanholland.com/cow/images/home-logo.png" alt=""/></a> </div>
<div id="header-right">
<p class="right">Total: £0 basket</p>
<span>Shopping bag: items: 0</span>
<div id="checkout"><a href="">Empty basket</a> | <a href="">Checkout</a></div>
</div>
</div>
<div id="content-wrap"> <img src="http://www.freemanholland.com/cow/images/bird.png" alt="" class="bird"/>
<div id="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliq ua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut ali quip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna ali quaUt enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliq.</p>
<br/>
<p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid atat non proident, sunt in
culpa qui officia des</p>
<br/>
<a href=""><img src="http://www.freemanholland.com/cow/images/read-more.jpg" alt="" class="right"/></a> </div>
</div>
</div></div>
<ul id="footer">
<li><a href="">Terms and Conditions</a></li>
<li><label for="emailaddress"> Sign up for updates</label></li>
<li><input type="text" name="" class="input-text" style="width: 195px" id="emailaddress" value="e-mail address" onfocus="if (this.value=='e-mail address') this.value='';" onblur="if (this.value=='') this.value='e-mail address';"/></li>
<li><input type="submit" name="" value="" class="submit"/></li>
<li> Email: <a href="mailto:info@wearecow.com">info@wearecow.com</a> <span>Tel: 0161 567 4563</span><img src="http://www.freemanholland.com/cow/images/twitter.jpg" alt=""/> <img src="http://www.freemanholland.com/cow/images/facebook.jpg" alt="" /></li>
</ul>
</body>
</html>
Just copy that and try it in the browser while online and it will work as I have absolutely linked to your images for testing.
That’s more or less what I was thinking
The footer needs some work as it is not consistent and you may need to redo the image to allow it to break to another line without the line appearing.
Hi,
Ok I’d do something like this to start with:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css"/>
<title>Cow | Homepage</title>
<style type="text/css">
/*
Created by Ibrar Hussain of Freeman Holland Ltd
E-Mail: ibrar@freemanholland.com
*/
/* BASIC STRUCTURE */
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
color:#000;
background:#fcff00 url('http://www.freemanholland.com/cow/images/lines.png');
font: 12px Arial, helvetica, sans-serif
}
img {
border:0px
}
.margin-left {
margin-left:-6px;
}
.margin-leftmore {
margin-left:-5px;
}
.left {
float:left
}
.right {
float:right
}
a {
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
.submit {
background:url("images/submit.jpg") repeat scroll 0 0 transparent;
border:0 none;
height:16px;
width:65px;
vertical-align:top;
cursor:pointer;
margin-top:-1px;
}
.input-text {
vertical-align:top;
margin-left:5px;
padding:1px;
margin-top:-4px
}
h1 {
font-size: 1.8em;
padding:0.2em 0.3em;
}
h2 {
font-size: 1.3em;
color: #8b0000;
}
/* BASIC STRUCTURE */
/********************************************
HEADER
********************************************/
#main {
margin-left:10.3em;
min-height:0;
overflow:hidden;
background:url(http://www.freemanholland.com/cow/images/woman.png) no-repeat 50% 100px;
min-width:650px;
}
#main-inner{
max-width:1200px;
margin:auto;
}
* html #main,* html #main-inner {
height:1%;
overflow:visible
}
#header {
height:11em;
margin-top:1em;
}
#header-left {
float:left;
width:25.4em;
height:10.4em;
margin-left:1em;
}
#header-right {
background:url("http://www.freemanholland.com/cow/images/home-cart.png") repeat scroll 0 0 transparent;
float:right;
font-size:11px;
height:47px;
margin-right:20px;
padding:53px 24px 30px;
width:230px;
}
#checkout {
margin-top:35px;
width:231px;
text-align:right
}
/********************************************
MAIN LEFT NAV
********************************************/
#main-left-nav {
position:absolute;
left:0;
width:10.3em;
top:0
}
/********************************************
CONTENT WRAP
********************************************/
#content-wrap {
padding:0 1em 1em;
height:420px
}
.model {
float:right;
margin-left:35em;
margin-top:-7.4em;
}
.bird {
float:right;
margin-top:110px;
margin-right:30px;
}
#read-more {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
font-size:11px;
margin:40px 0 0 2%;
display:inline;
padding:15px;
width:30%;
z-index:100
}
/********************************************
FOOTER
********************************************/
#footer {
text-align:center;
margin-top:20px;
padding:2px 0 0;
color:#fff;
background:url('http://www.freemanholland.com/cow/images/footer.png');
position:relative;
list-style:none;
text-align:center;
width:100%;
}
#footer li,#footer input{display:inline;vertical-align:middle;}
#footer a {
color:#fcff00;
text-decoration:none;
margin:0 20px 0 0;
}
#footer span {
margin-left:20px
}
#footer a:hover {
text-decoration:underline
}
#footer img{margin:0 20px;vertical-align:middle;}
#footer .input-text {
vertical-align:middle;
margin:2px 0 6px 5px;
padding:1px;
}
</style>
</head>
<body>
<div id="main-left-nav"> <a href=""><img src="http://www.freemanholland.com/cow/images/we-are-cow.png" alt=""/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/we-love-vintage.png" alt="" class="margin-leftmore"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/buy-cow-online.png" alt="" class="margin-left"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/cow-people.png" alt="" class="margin-left"/></a> </div>
<div id="main">
<div id="main-inner">
<div id="header">
<div id="header-left"> <a href="http://www.freemanholland.com/cow/"><img src="http://www.freemanholland.com/cow/images/home-logo.png" alt=""/></a> </div>
<div id="header-right">
<p class="right">Total: £0 basket</p>
<span>Shopping bag: items: 0</span>
<div id="checkout"><a href="">Empty basket</a> | <a href="">Checkout</a></div>
</div>
</div>
<div id="content-wrap"> <img src="http://www.freemanholland.com/cow/images/bird.png" alt="" class="bird"/>
<div id="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliq ua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut ali quip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna ali quaUt enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliq.</p>
<br/>
<p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid atat non proident, sunt in
culpa qui officia des</p>
<br/>
<a href=""><img src="http://www.freemanholland.com/cow/images/read-more.jpg" alt="" class="right"/></a> </div>
</div>
</div></div>
<ul id="footer">
<li><a href="">Terms and Conditions</a></li>
<li><label for="emailaddress"> Sign up for updates</label></li>
<li><input type="text" name="" class="input-text" style="width: 195px" id="emailaddress" value="e-mail address" onfocus="if (this.value=='e-mail address') this.value='';" onblur="if (this.value=='') this.value='e-mail address';"/></li>
<li><input type="submit" name="" value="" class="submit"/></li>
<li> Email: <a href="mailto:info@wearecow.com">info@wearecow.com</a> <span>Tel: 0161 567 4563</span><img src="http://www.freemanholland.com/cow/images/twitter.jpg" alt=""/> <img src="http://www.freemanholland.com/cow/images/facebook.jpg" alt="" /></li>
</ul>
</body>
</html>
Just copy that and try it in the browser while online and it will work as I have absolutely linked to your images for testing.
That’s more or less what I was thinking
The footer needs some work as it is not consistent and you may need to redo the image to allow it to break to another line without the line appearing.
Hey,
Thanks Paul i appreciate your help.
I am fixing the footer now, i think the best way is to increase the background image size…
Anyway, just one thing, the background where you can see the woman, is too short. The womans legs are missing 
and need to go underneath the footer…
I have uploaded the amends here: http://www.freemanholland.com/cow2/
Notice the design should look like this, which is what i am following:
http://www.freemanholland.com/clients/cow/01_home.jpg
HI,
Probably better if you use a sticky footer type layout with 100% height on #main so that the full graphic shows.
You may want to find the picture of the girl with all her legs intact and then the page could grow a bit more
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="styles.css"/>
<title>Cow | Homepage</title>
<style>
*
Created by Ibrar Hussain of Freeman Holland Ltd
E-Mail: ibrar@freemanholland.com
*/
/* BASIC STRUCTURE */
* {
margin: 0;
padding: 0;
}
html,body{height:100%}
body {
margin:0;
padding:0;
color:#000;
background:#fcff00 url('http://www.freemanholland.com/cow/images/lines.png');
font: 12px Arial, helvetica, sans-serif
}
img {
border:0px
}
.margin-left {
margin-left:-6px;
}
.margin-leftmore {
margin-left:-5px;
}
.left {
float:left
}
.right {
float:right
}
a {
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
.submit {
background:url("http://www.freemanholland.com/cow/images/submit.jpg") repeat scroll 0 0 transparent;
border:0 none;
height:16px;
width:65px;
vertical-align:top;
cursor:pointer;
margin-top:-1px;
}
.input-text {
vertical-align:top;
margin-left:5px;
padding:1px;
margin-top:-4px
}
h1 {
font-size: 1.8em;
padding:0.2em 0.3em;
}
h2 {
font-size: 1.3em;
color: #8b0000;
}
/* BASIC STRUCTURE */
/********************************************
HEADER
********************************************/
#main {
margin-left:10.3em;
overflow:hidden;
background:url(http://www.freemanholland.com/cow/images/woman.png) no-repeat 50% 100px;
[B] min-width:650px;
min-height:100%;
}
* html #main{height:100%}
#main:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}[/B]
[B]#main-inner{
max-width:1200px;
margin:auto;
padding:0 0 100px;
}[/B]
* html #main,* html #main-inner {
height:1%;
overflow:visible
}
#header {
height:11em;
margin-top:1em;
}
#header-left {
float:left;
width:25.4em;
height:10.4em;
margin-left:1em;
}
#header-right {
background:url("http://www.freemanholland.com/cow/images/home-cart.png") repeat scroll 0 0 transparent;
float:right;
font-size:11px;
height:47px;
margin-right:20px;
padding:53px 24px 30px;
width:230px;
}
#checkout {
margin-top:35px;
width:231px;
text-align:right
}
/********************************************
MAIN LEFT NAV
********************************************/
#main-left-nav {
position:absolute;
left:0;
width:10.3em;
top:0
}
/********************************************
CONTENT WRAP
********************************************/
#content-wrap {
padding:0 1em 1em;
height:420px
}
.model {
float:right;
margin-left:35em;
margin-top:-7.4em;
}
.bird {
float:right;
margin-top:110px;
margin-right:30px;
}
#read-more {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
font-size:11px;
margin:40px 0 0 2%;
display:inline;
padding:15px;
width:30%;
z-index:100
}
/********************************************
FOOTER
********************************************/
#footer {
text-align:center;
[B] margin-top:-50px;[/B]
padding:2px 0 0;
color:#fff;
background:url('http://www.freemanholland.com/cow/images/footer.png');
position:relative;
list-style:none;
text-align:center;
width:100%;
position:relaive;
z-index:99;
}
#footer li,#footer input{display:inline;vertical-align:middle;}
#footer a {
color:#fcff00;
text-decoration:none;
margin:0 20px 0 0;
}
#footer span {
margin-left:20px
}
#footer a:hover {
text-decoration:underline
}
#footer img{margin:0 20px;vertical-align:middle;}
#footer .input-text {
vertical-align:middle;
margin:2px 0 6px 5px;
padding:1px;
}
</style>
</head>
<body>
<div id="main-left-nav"> <a href=""><img src="http://www.freemanholland.com/cow/images/we-are-cow.png" alt=""/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/we-love-vintage.png" alt="" class="margin-leftmore"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/buy-cow-online.png" alt="" class="margin-left"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/cow-people.png" alt="" class="margin-left"/></a> </div>
<div id="main">
<div id="main-inner">
<div id="header">
<div id="header-left"> <a href="http://www.freemanholland.com/cow/"><img src="http://www.freemanholland.com/cow/images/home-logo.png" alt=""/></a> </div>
<div id="header-right">
<p class="right">Total: £0 basket</p>
<span>Shopping bag: items: 0</span>
<div id="checkout"><a href="">Empty basket</a> | <a href="">Checkout</a></div>
</div>
</div>
<div id="content-wrap"> <img src="http://www.freemanholland.com/cow/images/bird.png" alt="" class="bird"/>
<div id="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliq ua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut ali quip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna ali quaUt enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliq.</p>
<br/>
<p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid atat non proident, sunt in
culpa qui officia des</p>
<br/>
<a href=""><img src="http://www.freemanholland.com/cow/images/read-more.jpg" alt="" class="right"/></a> </div>
</div>
</div>
</div>
<ul id="footer">
<li><a href="">Terms and Conditions</a></li>
<li>
<label for="emailaddress"> Sign up for updates</label>
</li>
<li>
<input type="text" name="" class="input-text" style="width: 195px" id="emailaddress" value="e-mail address" onfocus="if (this.value=='e-mail address') this.value='';" onblur="if (this.value=='') this.value='e-mail address';"/>
</li>
<li>
<input type="submit" name="" value="" class="submit"/>
</li>
<li> Email: <a href="mailto:info@wearecow.com">info@wearecow.com</a> <span>Tel: 0161 567 4563</span><img src="http://www.freemanholland.com/cow/images/twitter.jpg" alt=""/> <img src="http://www.freemanholland.com/cow/images/facebook.jpg" alt="" /></li>
</ul>
</body>
</html>
Changes in bold above - don’t miss the negative top margin on the footer.