For some reason my footer text wont stay on 1 line and Im not sure why, the footer text is subject to this class:

.fooBord a{ color:#e00a00; text-align:center; text-decoration:underline; font-size:13px;}

and this is the footer code:

<div class="fooBord">
<p><a href="/">Home</a> | <a href="electrical.php">Electrical</a> | <a href="fire.php">Fire Alarm</a> | <a href="intruder.php">Intruder Alarm</a>
<a href="access.php">Access Control</a> | <a href="cctv.php">CCTV</a> | <a href="contact.php">Contact Us</a> | <a href="sitemap.html">Sitemap</a></p>
</div>

But I cant work out why when viewed in a browser the text is over 2 lines, any ideas?

www.electrifire.co.uk

400 pixels of horizontal padding on the parent element will do things like that

.fooBord{ border:4px solid #e5e0e0; width:350px; margin:10px auto; padding:15px 200px;}

the 350px is for the boarder around the text though, should I change it to auto or something?

I think you may have got the maths slightly askew.

350 px wide with 200px of left padding and 200px of right padding??

maybe there is an extra "0" crept in there?

Im not sure where your seeing 200px left and right padding but if this is the case then thats probably my problem, where did you see this?

it's in the footer section of your style sheet.

Screen shot of the developer toolbar highlighting
electfire.png

The red border is the paragraph in the footer.

The total 400px padding is coming from here:

padding:15px 200px;

Which equals :
padding-top: 15px;
padding-right: 200px;
padding-bottom: 15px;
padding-left: 200px;

400px of total padding

Sorry for being a little thick here but this is the entire footer css, I just cant see this 200px left and 200px right. I'm a little confused now

/*Footer*/
#footer{ border-top:1px dotted #7f7f7f;border-bottom:1px dotted #7f7f7f; padding:10px 0; margin:0 0 10px 0;}
#footer p.cent{ text-align:center; color:#515348; font:bold 13px/24px Verdana;}
.fooBord{ border:4px solid #e5e0e0; width:350px; margin:10px auto; padding:15px 200px;}
.fooBord img{ float:left; width; padding:0 10px 25px 0;}
.fooBord p{ text-align:center; font-size:13px;}
.fooBord a{ color:#e00a00; text-align:center; text-decoration:underline; font-size:13px;}
.fooBord a:hover{ text-decoration:none; }
.footText{ text-align:center; font-size:11px; padding-bottom:10px;}

.fooBord{ border:4px solid #e5e0e0; width:350px; margin:10px auto; padding:15px 200px;}

The order for the values are from the Top clockwise (T R B L)
A single value would mean equal all sides

Two values would apply to T & B, L & R


so:
padding:15px 200px; MEANS

15px TOP 200px RIGHT 15px BOTTOM 200px LEFT.

I outlined exactly where the total 400px was coming from in my post above. I even broke it down for you.

It is coming from this CSS rule: padding:15px 200px

Thanks that makes more sense, I didn't realise 15px 200px meant left and right so even though you pointed it out it wasn't clear to me.

I've had a look at the css and edited the px values to see if I could solve it, with padding 5px 0px the grey border is tight around the text and with it set to 5px 150px the border width increases but the text stays bunched in the middle, am I missing something really simple?

.fooBord{ border:4px solid #e5e0e0; width:400px; margin:10px auto; padding:5px 150px;}

Use

.fooBord { border:4px solid #e5e0e0; width:400px; margin:10px auto; padding:0;}

.fooBord p { width:75%; margin: 15px auto;

That would set the paragraph horizontally centered with 15 pixel top and bottom clearance

Thanks, I edited the 2 lines in css with your code:

.fooBord { border:4px solid #e5e0e0; width:400px; margin:10px auto; padding:0;}
.fooBord p { width:75%; margin: 15px auto;}

Unfortunately the text is just bunched in the middle of the page, I really have no idea why

Ok, I would suggest that you not use a batch of <a>s inside a <p> for your footer nav. Put it into a proper unordered list, set to display:inline to make it horizontal. Put the margin:15px auto; on the <ul> and it should center.