Padding causing image below to screw up

Instead of using padding or margin on the text you could you css positioning e.g.;

#navbanner
{
position: relative;
top: 5px;
left: 0;
}

Try padding {0px 5px;}

This will remove the top and bottom padding, and keep the left and right padding.

Hope this helps

oops :idea:

Sorry I meant

#navbanner {padding:0px 5px;}

Sorry I meant

#navbanner {padding:0px 5px;}See that little "edit" button up above your posts?

Thanks for the help all!

I've made progress, but now the problem has moved upward!?

Would do you think?

(Same URL as before)

wow...

I never saw that edit button

Thanks Triumph

Can you show the CSS for the following class and id's

class="navtext"
id="navbanner"

Sure, as follows:

#navbanner{

width:798px;
height:27px;
background-image:url(../img/navbg.gif);
margin-left:17px;
background-repeat:no-repeat;
position: relative;
top: 5px;
left: 0;
}

.navtext {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:60%;
color:#FFFFFF;
text-decoration:none;
text-align:right;
padding-top:5px;
}

.navtext a{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFFFFF;
margin-left:12px;
}

.navtext a:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#FFFFFF;
}

:?

Those using screen readers won't like this page. It reads:
New Office Units - THE DEVELOPMENT
THE DEVELOPMENT
THE DEVELOPMENT
Lorem ipsum...

You're missing a closing div tag. i'm curious as to why you're slicing the image up anyway.

Why wouldn't I slice the image up?

Now have it looking like this:

http://www.roystonsimpson.co.uk/clients/newsite/

kinda getting there?! The nav text needs dropping though really?

Thanks for the help so far everyone

I never saw that edit button

Thanks Triumph I'm here to help.

Are you saying that you are doing it "just because you can"? :?

No, I thought this way was the norm. What are the other ways?

Try this for CSS

#navbanner{width:798px; height:27px; background-image:url(../img/navbg.gif); background-repeat:no-repeat; text-align:right; padding:5px;} 
.navtext { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:60%; color:#FFFFFF; text-decoration:none; text-align:right;} 
.navtext a{ font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; color:#FFFFFF; } 
.navtext a:hover{font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:underline; color:#FFFFFF; } 

And this for the HTML

<div class="navtext" id="navbanner"><a href="#" title="The Development">THE DEVELOPMENT</a> <a href="#" title="Specification">SPECIFICATION</a><a href="#" title="Location">LOCATION</a><a href="#" title="Suffolk Business Park">SUFFOLK BP</a><a href="#"title="Site plans">PLANS</a><a href="#" title="Agents">AGENTS</a></div>

Note:- I have removed the margins in the CSS
and the spacer image from the HTML cos you don't need those

Hope this helps