Hi there,

more CSS problems!

Please look at http://www.rhinoracks.co.uk/citroen.htm

the links in the middle of the page display white, I want to change them to black but if i set them to black from my style sheet... They dissapear!

Help!

* {
	margin: 0px;
	padding: 0px;
	border: 1px;
	margin-bottom: 0px;
}

body {
	padding: 0px 0px 0px;
	background: #A9C4E0;
	color: #FFFFFF;
	font-family: tahoma, arial, sans-serif;
	font-size: 10px;
}

a {
	color: #fff;
	text-decoration: underline;
}

a:hover {
	color: #bfd8f6;
}

span {
	display: none;
}

img {
	border: none;
}

ul {
	list-style-type: none;
}

li {
	list-style-type: none;
}

p {
	margin: 10px 0px 5px;
	text-align: justify;
	line-height: 14px;
}

.clearthis {
	margin : 0px;
	height : 1px;
	clear : both;
	float : none;
	font-size : 1px;
	line-height : 0px;
	overflow : hidden;
}

input {
	padding-left: 2px;
	background-color: #eff3f7;
	border: 2px solid #eff3f7;
	color: #537caf;
	font-family: tahoma, arial, sans-serif;
	font-size: 10px;
}



#container {
	width: 98%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


/* Page Header */

#header_container {
	margin-bottom: 12px;
	height: 120px;
	border: 1px solid #fff;
	background: url('images/head.jpg') repeat-x 0px 0px;
}

#page_header {
	width: 900px;
	height: 187px;
	background: url('') no-repeat 10px 20px;
	overflow: hidden;
}


/* Page Header : Company Name & Logo */

#header_company {
	margin-top: 20px;
	width: 585px;
	height: 35px;
	float: left;
	background: url('') no-repeat 137px 0px;
	text-align: left;
}

#header_company h1 {
	background: url('') no-repeat 160px 0px;
	width: 585px;
	height: 35px;
}


/* Page Header : Welcome Note */

#header_welcome {
	padding-left: 330px;
	float: left;
	text-align: left;
	font-size: 11px;
}

#header_welcome h3 {
	padding: 3px 0px 0px;
	font-size: 14px;
}

#header_welcome p {
	margin-top: 7px;
}

#header_welcome #welcome_text {
	width: 450px;
}

/* Page Header : Menu */

#header_menu {
	padding-top: 15px;
	padding-right: 0px;
	float: left;
}

#header_menu li {
	margin-bottom: 2px;
	width: 116px;
	border: 1px solid #dee8f5;
	text-align: left;
	clear: both;
	float: none;
}

#header_menu li a {
	display: block;
	width: 116px;
	height: 20px;
	color: #e3ecf8;
	background-color: #3d6290;
	text-decoration: none;
	font-weight: bold;
	overflow: hidden;
	line-height: 10px;
}

#header_menu li a span {
	display: block;
	padding-top: 4px;
	padding-left: 31px;
}

#header_menu li a:hover {
	color: #fff;
	background-color: #2e4a6c;
}


/* Left Sidebar */

#left_sidebar {
	width: 130px;
	float: left;
}

#left_sidebar .box_container {
	margin-bottom: 11px;
	border: 1px solid #fff;
	background-color: #333333;
}


/* Left Sidebar : User Login */

#userlogin {
	padding: 7px 8px 11px 12px;
	color: #f1f5f9;
	font-weight: bold;
	text-align: left;
}

#userlogin h2 {
	width: 69px;
	height: 15px;
}

#userlogin form {
	padding-top: 5px;
}

#userlogin .form_field {
	padding-left: 1px;
	padding-top: 7px;
	width: 155px;
	float: none;
	clear: both;
	text-align: right;
}

#userlogin form strong {
	padding-top: 1px;
	display: block;
	width: 50px;
	height: 13px;
	float: left;
	text-align: left;
}

#userlogin form input {
	width: 93px;
	float: right;
}

#userlogin form input.button {
	padding: 0px;
	width: 55px;
	height: 15px;
	border: none;
	float: none;
}

#userlogin #link-password {
	padding-top: 5px;
}

#userlogin #link-password a {
	color: #eef3f9;
}

#userlogin #link-password a:hover {
	color: #bfd8f6;
}


/* Left Sidebar : Latest News */

#news {
	padding: 10px 17px 10px 12px;
	text-align: left;
}

#news h2 {
	width: 76px;
	height: 19px;
	background: url('images/news_title.gif') no-repeat 0px 0px;
}

#news h4 {
	padding-top: 6px;
	font-size: 10px;	
	font-weight: bold;
}

#news p {
	margin-top: 5px;
	margin-bottom: 6px;
	line-height: 12px;
}

#news .link-more {
	text-align: right;
	font-weight: bold;
}


/* Main Content */

#maincontent_container {
	border-top : 1px solid #d5dfec;
	border-left : 1px solid #d5dfec;
	float: right;
	text-align: left;
}

#maincontent {
	width: 700px;
	margin-top: 7px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 16px;
}

#maincontent_top {
	margin-bottom: 11px;
	width: 561px;
	background: url('images/maincontent_verticaldiv.gif') repeat-y 310px 5px;
}


/* How We Started */

#started_container {
	width: 313px;
	float: left;
}

#started {
	padding-top: 2px;
	width: 294px;
}

#started h2 {
	width: 96px;
	height: 14px;
	background: url('images/started_title.gif') no-repeat 0px 0px;
}


/* Repairing */

#right_container {
	width: 247px;
	float: left;
	text-align: left;
}

#repairing {
	margin-left: auto;
	margin-right: 1px;
	padding-bottom: 5px;
	width: 231px;
	float: right;
}

#repairing h2 {
	width: 125px;
	height: 19px;
	background: url('images/repairing_title.gif') no-repeat 0px 4px;
}

#repairing p {
	margin-top: 6px;
}


/* Get Special Offer */

#offer_container {
	margin-left: auto;
	border: 1px solid #fff;
	background-color: #436da1;
	float: right;
}

#offer {
	margin: 5px 17px 4px 10px;
	width: 205px;
}

#offer h2 {
	width: 120px;
	height: 22px;
	background: url('images/offer_title.gif') no-repeat -1px 0px;
}

#offer p {
	margin-top: 1px;
}

#offer .link-go {
	text-align: right;
}

#offer .link-go a {
	margin-left: auto;
	display: block;
	width: 34px;
	height: 13px;
	background: url('images/offer_go.gif') no-repeat 0px 0px;
}


/* Featured Products */

#featured_container {
	border: 1px solid #fff;
	background-color: #537caf;
	float: left;
}

#featured {
	margin: 9px 30px;
	width: 498px;
}

#featured h2 {
	width: 111px;
	height: 20px;
	background: url('images/featured_title.gif') no-repeat 0px 0px;
}

#featured_products ul {
	padding-bottom: 2px;
	width: 498px;
}

#featured_products li {
	margin: 6px 21px 10px 1px;
	float: left;
}

#featured_products li.end {
	margin-right: 0px;
}

#featured_products li a {
	display: block;
	width: 107px;
	height: 84px;
	background-color: #fff;
	overflow: hidden;
}

#featured_products li a img {
	margin: 1px;
}

#featured_products li h4 {
	padding-top: 3px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
}

.featured_nav {
	padding-left: 3px;
	padding-right: 9px;
	float: left;
	font-weight: bold;
}

.featured_nav a {
	text-decoration: none;
}

#featured .link-more {
	padding-right: 3px;
	font-weight: bold;
	float: right;
}


/* Page Footer */

.page_footer {
	margin: 20px;
	width: 100%;
	float: none;
	text-align: center;
	font-size: 11px;
	background-color: #303030;
}

.glossymenu{
list-style-type: none;
margin: 5px 0;
margin-top: 0;
padding: 0;
width: 110px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: inherit;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 100px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}
.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: right;
margin-top: 29 px; 
color: #fff;
padding: 2px 10px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: #ffffff;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

.solidblockmenu{
	padding-tp: 10;
	float: left;
	font: bold 11px Arial;
	width: 100%;
	border: 1px solid #625e00;
	border-width: 1px 0;
	background: black url(media/blockdefault.gif) center center repeat-x;
	list-style: none;
	margin-top: -11px;
	margin-right: 10;
	margin-bottom: 10;
	margin-left: 10;
}
.right a {
	color: #FFFCD1;
	background: inherit;
}

		
	.rt {
		background: #132028 url() no-repeat;
		color: #FFF;
		height: 7px;
	}
.right_articles {
		font-size: 0.9em;
		background: #132028 url() no-repeat bottom;
		color: #ffffff;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}
	.right_bottomgarticles {
		font-size: 0.9em;
		background: ##132028 url() no-repeat bottom;
		color: #ffffff;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}
.image {
	float: left;
	margin: 0 9px 3px 0;
}
.yellow{font-family:Tahoma; font-size:11px;  color:#313131; }
  .NEWBLUE{font-family:Tahoma; font-size:11px;  color:#0066FF; }
   .white{font-family:Tahoma; font-size:11px;  color:#FFFFFF; }
    .BLACK{font-family:Tahoma; font-size:11px;  color:#000000; }

1) Have you looked at your page in Firefox? It's broken bad.

2) You mixed div's and table's. That makes it really hard to know what is where.

Here is the section of the code you are referring to
<div align="center" class="style13">
<table cellspacing="0" cellpadding="0" width="98%" align="center" border="0">
<tbody>
<tr>
<td bgcolor="#282b2d" height="22"><div align="center">Citroen Vans </div></td>
</tr>
</tbody>
</table>
<a href="courier.php"><br />
</a> <a href="berlingo.php">Berlingo 1996 on</a><a href="dispatch.php"><br />
<br />
Dispatch 1995-2007</a><a href="new_dispatch.php"><br />
<br />
New Disptach 2007 On<br />
<br />
</a><a href="relay.php">Relay upto 2006</a><a href="new_relay.php"><br />
<br />
New Relay Oct 2006 On</a>
<p>&nbsp;</p>
</div>

You need to add a style that section either by adding a div around the links to style or cleaning up the code by getting rid of the tables. I would do the latter.

* bangs head on the desk after looking at Firefox... *

I added the "black" style to it but then the link magically disapears from my screen (using DW8)

Sorry for not knowing the DW terminology but are you using it in design mode and not code mode? If you are having problems, Add the style in a text editor which won't hit you with a hammer

You've got so many nested tables in there just for something so relatively simple - and easy to do with no tables .

I think you're problem is the <span> that sets the color to white. Add the classes for the colors to the <a>'s instead, and put the white on the text color in the div or table or whatever they're in at that point.

Excellent, that sorts out that small problem. Now for the biggerone!

Whats happening with Firefox? Im assuming its to do with the menu positioning on the left?

.glossymenu{
list-style-type: none;
margin: 5px 0;
margin-top: 0;
padding: 0;
width: 110px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: inherit;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 100px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}

Looks to me like the clearing isn't working on the solid block menu area.

* select all *
* delete *

Hope that helps!

It doesn't, it's pointless .

add this is your css

/* ---find this line-- */
.BLACK{font-family:Tahoma; font-size:11px;  color:#000000; }

/* ---add this-- */
.BLACK:hover
    {font-family:Tahoma; font-size:11px;  color:#000000; }
    

/* ---replace your glossymenu class with this one, backup ur original in case u don't want to use this or modify it accordingly-- */


.glossymenu{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
width: 110px;
border: 1px solid #9A9A9A;
color: #000000;
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#CCCCCC;
list-style:none;

}

.glossymenu li{
display:block;
width:110px;
margin: 0px;
}

.glossymenu li a{
text-decoration: none;
padding: 5px 1px;
background-color:#17191A;
color: #EBAB01;
width:110px;
display:block;
}

.glossymenu li a:visited{
background-color:#17191A;
color: #EBAB01;
}

.glossymenu li a:hover{

background-color:#17191A;
color: #FEC121;
}

.glossymenu li.selected{
position: relative;
top: 1px;
}

.glossymenu li.selected a{ /*selected main tab style */
background-color:#17191A;
color: #ffffff;
/* border-bottom:1px solid #FFFFFF; */
}

.glossymenu li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
    

tricky firefox fix

<!-- find -->

<ul class="solidblockmenu">
  <li><a href="contact.htm">Contact Us</a></li>
   <li><a href="about.htm">About Us</a></li>
   <li><a href="index.htm">Home</a></li>

</ul>

<!-- after add -->

<br /><br />

all above is working for me