Hi,
im having a problem with a stylesheet. Its a fixed width(780) layout and everything except the menu tabs at the top are centered. What can i do to get the tabs centred with the rest of the site?
<style>
.topformbutton {
BORDER-RIGHT: #ccc 1px outset; PADDING-RIGHT: 1px; BORDER-TOP: #ccc 1px outset; MARGIN-TOP: 5px; PADDING-LEFT: 1px; FONT-WEIGHT: bold; FONT-SIZE: 0.9em; BACKGROUND: url(images/button-bg.gif) repeat-x left top; PADDING-BOTTOM: 1px; BORDER-LEFT: #ccc 1px outset; CURSOR: pointer; COLOR: #666; PADDING-TOP: 1px; BORDER-BOTTOM: #ccc 1px outset
}
#bjtoptabs {
PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 4px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 27px; voice-family: inherit
}
#bjtoptabs UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 10px verdana, arial, sans-serif; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#bjtoptabs LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FONT-SIZE: 120%; PADDING-BOTTOM: 0px; MARGIN: 0px 2px 0px 0px; TEXT-TRANSFORM: uppercase; LINE-HEIGHT: 1.3em; PADDING-TOP: 0px
}
#bjtoptabs A {
PADDING-RIGHT: 0px; PADDING-LEFT: 3px; FONT-SIZE: 10px; BACKGROUND: url(images/tabs_left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 4px 2px 0px 0px; COLOR: #fff; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; FONT-FAMILY: Arial, Verdana, sans-serif; LETTER-SPACING: 1px; TEXT-DECORATION: none
}
#bjtoptabs STRONG {
PADDING-RIGHT: 0px; PADDING-LEFT: 3px; FONT-SIZE: 10px; BACKGROUND: url(images/tabs_left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 4px 2px 0px 0px; COLOR: #fff; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; FONT-FAMILY: Arial, Verdana, sans-serif; LETTER-SPACING: 1px; TEXT-DECORATION: none
}
#bjtoptabs A SPAN {
PADDING-RIGHT: 9px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(images/tabs_right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px
}
#bjtoptabs #current SPAN {
PADDING-RIGHT: 9px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(images/tabs_right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px
}
#bjtoptabs A SPAN {
FLOAT: none
}
#bjtoptabs #current A {
BACKGROUND-POSITION: 0px -300px; BORDER-BOTTOM: #891619 1px solid
}
#bjtoptabs STRONG {
BACKGROUND-POSITION: 0px -300px; BORDER-BOTTOM: #891619 1px solid
}
#bjtoptabs #current A SPAN {
BACKGROUND-POSITION: 100% -300px; PADDING-BOTTOM: 3px; COLOR: #fff
}
#bjtoptabs #current SPAN {
BACKGROUND-POSITION: 100% -300px; PADDING-BOTTOM: 3px; COLOR: #fff
}
#bjtoptabs A:hover {
BACKGROUND-POSITION: 0% -150px
}
#bjtoptabs A:hover SPAN {
BACKGROUND-POSITION: 100% -150px; COLOR: #fff
}
#bjtoptabs #current A:hover {
BACKGROUND-POSITION: 0% -300px
}
#bjtoptabs #current A:hover SPAN {
BACKGROUND-POSITION: 100% -300px; COLOR: #fff
}
#bjtoptabsline {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #891619; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 8px
}
#logo {
PADDING-RIGHT: 0px; height:92px; width:107px; PADDING-LEFT: 3px; BACKGROUND: url(images/logo.jpg);
}
#top { width:100%;}
.topmenu {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#851114;
padding:5px;
}
.topmenu a{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#851114;
padding:5px;
text-decoration:none;
}
.topmenu a:hover{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#851114;
padding:5px;
text-decoration:underline;
}
body {
width:780px;
margin-top:0px;
margin-bottom:0px;
margin-left:4px;
height:auto;
align:center;
}
</style>
<center>
<body>
<div id="top">
<div id="logo" align="left">
<a title="logo" href="index.php">
<IMG src="images/spacer.gif" border="0" height="92" width="107" align="left">
</a>
</div>
</div>
<DIV style="height:15px;"><IMG src="images/spacer.gif"></DIV>
<DIV id=bjtoptabs align="center">
<UL align="center">
<LI style="MARGIN-LEFT: 1px"><A title=Home
href="#"><SPAN>Home</SPAN></A>
<LI><A title=Find Jobs
href="#"><SPAN>FIND JOBS </SPAN></A>
<LI><A title=Post Resumes
href="#"><SPAN>POST RESUMES </SPAN></A>
<LI><A title=Job Alerts
href="#"><SPAN>JOB ALERTS</SPAN></A>
<LI><A title=Resume Builder
href="#"><SPAN>RESUME BUILDER </SPAN></A>
<LI><A title=Consultancy
href="#" target="blank"><SPAN>HR CONSULTANCY</SPAN></A>
<LI><A title=Employer
href="#"><SPAN>EMPLOYER </SPAN></A>
<LI><A title=Contact href="#"><SPAN>CONTACT</SPAN></A>
<LI>
</LI>
</UL></DIV>
<DIV id=bjtoptabsline style="width:780px; height:15px;"><IMG src="images/spacer.gif"></DIV>
Any help is appreciated
Linear Mode
