18 replies [Last post]
littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

Hi

I seem to be havi a problem with certain pages in my site I am trying to build. I am new to CSS and am tryin to move over from tables.

www.sarahhood.co.uk/makinmovies/about.htm

if you look at this page you will see the light green expands below the footer in IE, but not in safari or firefox, I cannot see what is wrong and why it is doing this.

also on the contacts page

www.sarahhood.co.uk/makinmovies/contact.htm

I want the contact box that is there to go across the page, but even when i adjust the div width nothin happens.

can someone please help me understand where i might have gone wrong.

thanking in advance

littlered

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 34 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm, both problems are

Hmmm, both problems are related to floats. You have clear: both a few times in the code, but I think in the wrong places. I also think you are floating waaay too much-- the header and footer don't need to be floated at all.

#main isn't enclosing the left column on the contact page, leaving a white gap on the right. If #main knew where the bottom of #leftcol was, then it could enclose that float.

If you are changing the width of leftcol on the contact page, make sure the width you used for the leftcol on all other pages isn't overriding it.

Though I'd just set the bg colour of #main to the same dark green and make it enclose the floats, so it fakes the left column stretching across.

http://gtwebdev.com/workshop/floats/enclosing-floats.php how to enclose floats

http://stommepoes.nl/floaties.html see what floats look like

I'm no expert, but I fake one on teh Internets

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

stomme thanks for the

stomme

thanks for the advise. I have tried to understand it and fiddle around a bit with what i thought was the correct solution but seem to have come up with ntohgin changing. could you be a little more precise with what i need to change to get rid of the main part overriding the footer. i tried overflow auto on the main but nothign happened.
thank you for your advise so far.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 16 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Looking over your code you

Looking over your code you should really consider reading up on lists for css. There are a lot of lists that you use in the contact page that are setup using

and tags. It is much simpler to use a list tag.

    (unordered list) will do the trick for most of your content.

for example

<div id="film">
	<p class="style3"><em><strong>London Office</strong></em></p>
	<p>Makin Movies<br />
	Copse Hill Farm<br />
	Southlands Rd<br />
	Iver Heath<br />
	Buckinghamshire<br />
	SL0 0PG
	</p>
	<p>Tel: 01753 544866<br />
	Fax:<br />
	Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p>
	</p>
	<p>Nick Waldron: 07768 881222<br />
	</p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6e%69%63%6b%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%6e%69%63%6b%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p>
	</p>
</div>

Instead you could organize it like this..

<div id="film">
	<h3>London Office</h3>
		<ul id="london_office">
			<li>Makin Movies</li>
			<li>Copse Hill Farm</li>
			<li>Southlands Rd</li>
			<li>Iver Heath</li>
			<li>Buckinghamshire</li>
			<li>SL0 0PG</li>
			<li>Tel: 01753 544866</li>
			<li class="fax">Fax:</li>
			<li class="email">Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></li>
			<li>Nick Waldron: 07768 881222</li>
			<li>nick@makinmovies.co.uk</li>
		</ul>
</div>

You can add an id or class to each list item for more control if you want. Like class="email" etc..

For the css you can use

ul {
list-style-type: none;
}

to get rid of the bullets

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

thanks for the list idea,

thanks for the list idea, yes it makes it much neater.

i have solved the issue of the contacts page. it had the left col in teh css file so deleted that so it was no longer overriding it, but it still seems to have the main overshoot the footer.

any clues as to how to solve this

thanks

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 16 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

For some reason I got into

For some reason I got into cleaning up your code. I added some comments to it so hopefully this helps out a little. Let me know if you have any questions.

<!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" />
		<title>Makin Movies Location Support Company</title>
		<link href="test2.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<h2 id="hotline">24HR(ish) HOTLINE - 0776 888 1 222</h2>
				<img id="logo" src="images/logo2.png" alt="" width="274" height="37" />
				<ul id="navmenu">
					<li><a href="index.htm">HOME</a></li>
					<li><a href="services.htm">SERVICES</a></li>
					<li><a href="about.htm">ABOUT</a></li>
					<li><a href="credits.htm">CREDITS</a></li>
					<li><a href="testimonials.htm">TESTIMONIALS</a></li>
					<li><a href="insurance.htm">INSURANCE</a></li>
					<li><a href="contact.htm">CONTACT</a></li>
				</ul>
			</div>
				<img id="mainphoto" src="images/homepage-main-photo.jpg" alt="" width="920" height="221" />
			<div id="main">
				<div id="leftcol">
					<h2>CONTACT</h2>
						<ul id="london_office">
							<li><h3>London Office</h3></li>
							<li>Makin Movies</li>
							<li>Copse Hill Farm</li>
							<li>Southlands Rd</li>
							<li>Iver Heath</li>
							<li>Buckinghamshire</li>
							<li>SL0 0PG</li>
							<li class="tel">Tel: 01753 544866</li>
							<li>Fax:</li>
							<li class="email">Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></li>
							<li>Nick Waldron: 07768 881222</li>
							<li>nick@makinmovies.co.uk</li>
						</ul>
						<ul id="north_office">
							<li><h3>North Office</h3></li>
							<li>Makin Movies</li>
							<li>55 Bank View</li>
							<li>Birkenshaw</li>
							<li>West Yorkshire</li>
							<li>BD11 2AG</li>
							<li class="tel">Tel:</li>
							<li>Fax:</li>
							<li class="email">Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></li>
							<li>Nick Waldron: 07768 881222</li>
							<li>nick@makinmovies.co.uk</li>
						</ul>
				</div>
			</div>
			<div id="footer">
				Web Design by Maverock Media
			</div>
		</div>
	</body>
</html>

/*--sets everything to 0--*/
* {
padding: 0;
margin: 0;
}
/*--once it is set in the body, html there is no need to repeat the same code unless it is being overriden--*/
body, html { 
font-family : Arial, Helvetica, sans-serif;
color: #fff;
font-size: 12px;
line-height: 1.4em;
background: #fffff1;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
}
div#wrapper {
width : 920px;
margin : 0 auto;
background-color : #215700;
} 
/*--border-top replaced orangestrip div--*/
div#header {
background: url(images/top-green-faded.gif) repeat-x;
height : 106px;
width : 920px;
border-top: 4px solid #694711;
}
/*--clears bullets on list items--*/
ul {
list-style: none;
}
ul#navmenu {
font-size : 14px;
word-spacing : 10px;
height : 20px;
text-align: right;
margin: 45px 40px 0 0;
} 
ul#navmenu li {
display: inline;
}
/*--no need for a div just add id to the img tag itself--*/
img#mainphoto {
height : 221px;
width : 920px;
}
div#main {
background-color : #215700;
width : 920px;
padding-bottom : 10px;
}
/*--margin and padding can be simplified on one line (top, right, bottom, left)--*/
div#leftcol {
background-color : #023113;
height : 280px;
width : 808px;
padding : 10px 45px 25px;
margin: 10px 0 10px 10px;
border : thin solid #694711;
position: relative;
}
h2#hotline {
font-size : 14px;
font-weight : bold;
font-family : Arial, Helvetica, sans-serif;
color : #ffffff;
text-align : right;
float : right;
height : 20px;
width : 300px;
margin-right : 20px;
margin-top : 10px;
}
ul#london_office {
position: absolute;
left: 200px;
}
ul#north_office {
position: absolute;
left: 540px;
}
li.tel {
margin-top: 20px;
}
li.email {
margin-bottom: 20px;
}
/*--no need for a div just add id to the img tag itself--*/
img#logo {
height : 37px;
width : 274px;
position: relative;
left: 20px;
top: 30px;
}
/*--use header tags for main headlines on the page instead of adding a class to a paragraph tag--*/
h2 {
font-family: "Berlin Sans FB";
font-size: 18px;
font-weight: normal;
color: #ff6600;
margin-left: -35px;
}
h3 {
font-style: italic;
font-size : 13px;
color : #ff6600;
margin: 10px 0;
}
div#footer {
height : 30px;
width : 900px;
background: #023113;
padding : 10px 10px 0 10px;
text-align : right;
color : #666666;
}

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

fern you are a trooper

fern you are a trooper thanks.

i had actually seen that mistake of it repeating in the css file. but had nto uplaoded it to show that fact. thanks for the lessons with the links and stuff and how to do it neater.

the odd thing is it does not seem to overflow the footer when it just has the left col but as soon as the right col is there in say the about us and credit pages it overflows it. what advise would you suggest to stop this problem. it only shows up in ie not firefox.

thanks again for tidying up the code. i will not just copy and paste but have a look and learn it properly.

thanks again for all yuor help i really appreciate it.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 16 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

I would position the right

I would position the right column absolutely. I think you have it set on float right now. Just change the width of the left column to give room for the right and then change the positions for the unordered lists..london office and north office..something like left 50px and left 300px.

div#rightcol {
background-color : #023113;
height : 280px;
width : 220px;
padding : 10px 45px 25px;
margin: 10px 0 10px 10px;
border : thin solid #694711;
position: absolute;
left: 600px;
top: 330px;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 34 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Wait, you DON'T want the

Wait, you DON'T want the light green background to come down to the footer?

All the other pages do, in both FF and IE.

If you don't want IE bringing the #main down to the footer, don't set Haslayout on it (setting a height or a width usually does that). Then IE won't improperly enclose its floats.

Absolutely positioning the right column would also stop this, but then if content grows (like when old ladies or Ed Seedhouse do a text-enlarge), it won't push the footer down, as the footer won't see it (hopefully the left column would always be longer).

I'm no expert, but I fake one on teh Internets

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

hi sommes yes i do want it

hi sommes

yes i do want it to go up to the darker green footer. however, in IE, it goes below it. i wanted the dark footer to be the last bit at the bottom of the page.

so you are saying that an absolute would work on the right and stop this, but will not wotk if they increase the size of text etc. hmm that might be the answer for now.

thanks alot everyone for your help so far. i really appreciate you all helping me understand css better.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 34 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

No, I misunderstood.

No, I misunderstood. Absolute positioning isn't anything I'd ever recommend for this, and I meant that it *could* stop IE from wrongly enclosing its floats. Setting things to position: absolute is always dangerous if there's a possibility that the page could change size, shape, or amount of content-- which is why it's sparingly used.

I wouldn't float the footer anyway, but would add clear: both instead.

I'm no expert, but I fake one on teh Internets

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

hi stomme i tried it with

hi stomme

i tried it with the footer havin a clear both and still the same issue happens. it is all very very odd.

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

hi stomme i tried it with

hi stomme

i tried it with the footer havin a clear both and still the same issue happens. it is all very very odd.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 16 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Sorry forgot to position

:bigoops: Sorry forgot to position the #main to relative..then you can position it to absolute. If you set the column heights in em like 23em then they will grow when you resize the text. The layout is a fixed width so columns don't need to grow horizontally just vertically. That is why i suggested positioning it absolutely..is that still a bad idea?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 34 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Actually if it was possible

Actually if it was possible I'd try to set the height to auto (or, leave it at that default) because setting heights in em's will grow, sure, but not at the same rate that text can wrap (try it). Eventually the text can outpace the height. I'd only set the width.

Abso-po wouldn't be SO bad here if there wasn't a footer. That's why a lot of sites get away with abso-po'd sidebars... no footer to push down.

Since there's a background colour on the box in question, it would cover the footer if it grew in height and the footer text would not interfere since it would be hidden behind the bg colour.

I guess I'll have to copy some of the site's code to see what's going on with IE and the footer.

I'm no expert, but I fake one on teh Internets

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

thanks very much for this

thanks very much for this guys really appreciate it.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 34 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Okay, redid the CSS. You

Okay, redid the CSS. You really should have looked at Fern's code, as s/he came saw the same things I did (like using a real border to imitate that empty orangestripe div) though I would not put addresses in a list (I believe it's a sequence and not a list of stand-alone items, but Ed would disagree... not sure it matters ultimately anyway). Setting your menu in a list (it's a list of otherwise stand-alone links) and making your images stand alone instead of wrapping them each in their own box (it's like rewrapping a present... using too much paper here), all that...

But anyway,

When I saw that bottom padding on #main I wondered if that was it, but I didn't want to tell you to mess with that too without building it first and seeing if that's really what it was. It was. Lawlz.

What I did was, I kept the #footer inside #wrapper but took it out of #main so #main's bottom padding wasn't something holding #footer up. That's basically what I did, plus removed the clearing div and let the footer do the clearing.

So, I generally did not rewrite your HTML like Fern did (and again, you should take a look at that code), but I did rewrite the CSS (not dissimilar to Fern's). I moved the images and the footer around and removed the clearing div.

I did NOT copy everything for all the p's etc so your copy isn't styled (your headers aren't the right colour and your p's don't have padding or margins anymore-- that's because of the reset I would think).
I was focussing on making the major containers look pretty much the same and fixing the footer.

http://stommepoes.nl/makinmovies.html (testemonials page I think)
code since I'm not going to keep this on my server real long:

<!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" />
<title>Makin Movies Location Support Company</title>
<style type="text/css"> 
 
* {
  margin: 0;
  padding: 0;
}
 
body {
  font-family: Arial, Helvetica, sans-serif; /*instead of repeating this everywhere, set it here, once */
}
 
/*no need to declare your links several times, once will do it : )  */
a { 
color : #fff; 
text-decoration : none; 
} 
 
a:hover {
color : #999; 
}   
 
 
#wrapper { 
width : 920px; /*all static blocks inside this wrapper are automatically also 920px wide*/
margin : 0 auto; 
background-color : #215700; 
} 
 
#header { 
background-image: url(top-green-faded.gif); 
border-top: 4px solid #694711; /*don't need a div holding a bg colour... this was always a border, wasn't it?*/
height : 106px; 
} 
 
#hotline { 
font-size: 14px;
font-weight: bold; 
color : #fff; 
text-align : right; 
float : right; 
height : 20px; 
width : 300px; 
margin-right : 20px; 
margin-top : 10px; 
} 
 
#navmenu { 
font-size: 14px; 
word-spacing : 10px; 
float : right; 
height : 20px; 
width : 575px; 
color : #fff; 
margin-top : 20px;  /*reduced*/
} 
 
#logo { 
display: block; /*because I made the image alone, no div wrapper*/
height : 37px; 
width : 274px; 
margin-left : 20px; 
margin-top : 30px; 
}
 
 
#mainphoto { 
display: block;/*because I made the image alone, no div wrapper*/
clear : right; /*clears the right-floating stuff in the header*/
background-color : #215700; /*your image seems to be 1 pixel not-wide-enough */
} 
 
#main {
background-color : #215700;
padding-bottom : 10px;
}
 
 
#leftcol, #rightcol {
	float : left;
        display: inline; /*IE6*/
	width : 550px;
	padding: 10px 25px;
	border : thin solid #694711;
	background-color : #012f0e;
	margin: 10px 0 10px 25px;
	color: #FFF;
	font-size: 12px;
} 
#rightcol { /*these values only override what we stated for both columns above*/
	float : right;
	width : 200px;
	padding-right : 10px;
	margin-right : 25px;
	margin-left : 0;
	font-size : small;
}
 
 
 
.style1 { 
color : #fff; 
font-weight : bold; 
}
 
.style3 { 
font-size : small; 
color : #f60; 
} 
 
.style2, .style4 { 
font-family : "Berlin Sans FB"; /*set backup font*/
font-size : large; 
font-weight : normal; 
} 
 
#footer {
	height : 30px;
	background-color : #012f0e;
	padding: 10px 10px 0 10px;
	text-align : right;
	font-size: 12px;
	color : #666;
	clear: both; /*clearing the two floating columns*/
}
</style>
</head>
 
<body>
<div id="wrapper">
  <div id="header">
 
  <div id="hotline">24HR(ish) HOTLINE - 0776 888 1 222</div>
    <img id="logo" src="logo2.png" width="274" height="37" alt="Makin Movies, Location Support Company" />
      <div id="navmenu"><a href="index.htm">HOME</a> <a href="services.htm">SERVICES</a> <a href="about.htm">ABOUT</a> <a href="credits.htm">CREDITS</a> <a href="testimonials.htm">TESTIMONIALS</a> <a href="insurance.htm">INSURANCE </a><a href="contact.htm">CONTACT</a></div>
</div>
  <img id="mainphoto" src="homepage-main-photo.jpg" width="920" height="221" alt="Movie location in the desert" />
      <div id="main">
        <div id="leftcol">
          <p class="style4">TESTIMONIALS</p>
          <p>Below you will find some testimonials from Location Managers, Producers and Production Managers Makin Movies have worked with and contiune to work with.</p>
          <p class="style3"><strong><em>Jermey Johns - Production Supervisor</em></strong></p>
 
          <p>&quot;I've used Makin Movies since their 1st day of operation, Nick and his team have the kit,<br />
            knowledge and manpower to make it happen. On the numerous occasions I've called them in, <br />
            I'm pleased to say, they've never let us down. </p>
          <p>Makin Movies is the ultimate &quot;Get Out of Jail&quot; Card for Location Managers and Production Managers. They are that secret Unit Manager you didn't budget. Based on the doorstep of Pinewood Studios and prepared to service your Base Camp, Set or Location either at the Studios, through out the UK and Internationally if required. Be it a Make Up Mirror or Flood Light at the Studio or a fully functional Marquee for a 1000 crowd, plugged in and ready to go on location. The Makin Movies team have the kit, knowledge and manpower to make it happen.</p>
          <p>Don't say turnover without their number in your mobile phone memory!&quot;</p>
 
          <p class="style3"><strong><em>Christian McWilliams - Location Manager</em></strong></p>
          <p>&quot;Filming on Location in Morocco with crews of 700 - 1800 people who need feeding , changing and keeping 
          cool, is a difficult experience without Making Movies. Nick Waldron has created a company that I have used on two continents, 
          and he is an excellent backup for a location manager,  and an asset to any production.</p>
          <p>Tents , Base camps,  road building , air conditioning, 4x4 access , is a phone call or a flight away, <br />
            and he is my first call on any production. From £3 million  budgets, to  $25 million budgets, to $240 million budgets , he will tailior make a budget 
            to serve a films needs efficiently and speedily. </p>
          <p>I would recommend Nick and his team to anyone, its like having a location department in the shadows, 
            ready to arrive which solutions and positive energy.&quot;</p>
          <p class="style3"><strong><em>Emma Pill - Location Manager</em></strong></p>
 
          <p>&quot;I have worked with Makin Movies on many films, and every time they have been able to deliver <br />
            the requirements that I have needed to facilitate the filming, from putting up tents in fields, <br />
            to half way up mountains, to overseas locations, to setting up halls in London. The service is excellent, 
          and they are able to respond to the ever changing demands of the film industry at a moments notice.<br />
          <br />
            Even down to the drivers of the 4 x 4s they can supply, everyone is very helpful, <br />
          and there to assist the location department in what ever way they can.&quot; </p>
 
          <p class="style3"><em><strong>Sam   Breckman - Production Manager / Location Manager</strong></em></p>
          <p>&quot;When planning a film there are often many variables that you have to take into consideration. <br />
            Where will the generators park, how will I dress and make up five hundred extras, <br />
            how will I feed a unit of eight hundred, how will I get the equipment up the side of that mountain etc etc. <br />
            <br />
            Makin Movies takes all these worries away. Together with his logistical know how Nick Waldron and his team make films happen!   
            From marquees to pick up rental Makin Movies provides the British Film and Television Industry with a truly comprehensive service. <br />
 
            <br />
          Makin Movies is an industry leader and its position as the number one supplier of equipment and personnel is richly deserved.&quot;<br />
          <br />
          </p>
          </div>
         <div id="rightcol">
           <p class="style2">CONTACT US</p>
           <p class="style3">London Office</p>
 
           <p>Tel: 01895 832490<br />
Fax: 01753 835318<br />
Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></p>
           <p class="style3">Manchester Office</p>
           <p>Tel: <br />
             Fax: <br />
             Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%22%3e%61%64%6d%69%6e%40%6d%61%6b%69%6e%6d%6f%76%69%65%73%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></p>
 
        </div>
      </div>
  <div id="footer">Web Design by Maverock Media</div>
</div>
</body>
</html>

Yes, I stuffed all the CSS in the file for ease of reading. Since the left and right col code that was in the HTML page was overriding whatever was in the external stylesheet, I just used them as the reference and didn't look at the ones in the external sheet at all.

Anyway I hope this is how you wanted the footer, and good luck. Don't forget about your ALT text on images!! Also, you'll need PNGfix or something similar if you really want to use a PNG for that Makin Movies logo img. IE6 and under can't deal with it (grey background on that one). Myself, I'd just make that either a semi-transparent gif, or even copy the background from header and stick it on there and then it can be a normal gif or png, no transparency needed.

I'm no expert, but I fake one on teh Internets

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

wow stommes thank you very

wow stommes thank you very much..

i now see where i was going wrong..... and have learnt about navs and using a different and better system.

thanks lots everyone on here... really appreciate all your help and patience with me whilst i try to learn css rather then using tables...

thanks again...

littlered

littlered136
littlered136's picture
Offline
Enthusiast
Last seen: 7 years 51 weeks ago
Timezone: GMT+1
Joined: 2008-11-22
Posts: 92
Points: 41

wow stommes thank you very

wow stommes thank you very much..

i now see where i was going wrong..... and have learnt about navs and using a different and better system.

thanks lots everyone on here... really appreciate all your help and patience with me whilst i try to learn css rather then using tables...

thanks again...

littlered