CSS effect issue

[WillisTi]

Hi,

Ive got this little problem relating to this css effect I recently added to my site.

If you rollover the content on each of my 5 main links at the top of the page it highlights the text grey and a red line appears. Now this all looks fine in IE and each highlight (left and right) is the same height as each other.

If you view it in FF the homepage is fine. However others for example the portfolio page highlights down to the end of the separator line (which I want it to do) and on the right-hand side the highlight height varies when i want them to both be the same height.

Heres the XHTML:

<div class="txtheaders1-Off" onmouseover="this.className='txtheaders1-On';" onmouseout="this.className='txtheaders1-Off';">
			  <p>I specialise in building clean, attractive websites that your customers will   find a pleasure to use. <br />
			    <br />
			  Whether you want a simple web presence or large brochure site with   Flash animation, I  can produce a site to suit your needs.</p>
		  </div> 
								  		<div class="txtheaders2-Off" onmouseover="this.className='txtheaders2-On';" onmouseout="this.className='txtheaders2-Off';">
Please select an option from the portfolio frame below for more information and to view my recent projects.<br />
<br />
<br />
<br />
</div>

Heres the CSS:

.txtheaders1-Off { border:solid 0px black; padding: 5px 10px 3px 17px; border-right:solid 1px #eaeaea; width:290px; float:left; }
.txtheaders1-On { background:#F5F5F5; border:solid 0px black; padding: 5px 10px 3px 17px; border-right:solid 1px #B82A2A; width:290px; float:left; }

.txtheaders2-Off { border:solid 0px red; padding: 5px 0px 3px 10px; width:290px; float:right; }
.txtheaders2-On { background:#F5F5F5; border:solid 0px red; padding: 5px 0px 3px 10px; width:290px; float:right; }

Anyone got a solution to this?

Thanks

[Tyssen]

It seems to me your padding top on your anchors is too large. Dropping it back by 3px seems to fix it for FF. I would probably not bother with any padding at all and instead make the image the height that you actually want that area to be (ie add another 70+px to the top of the images.) Also, this:

 	#nav a.last {
 	border-top: 3px solid #fff;
 	border-right:1px solid #fff;
 	margin:0;
 	padding: 75px 9px 0 7px;
 	display:block;
 	float:left;
 	text-decoration:none;
 	}

can be written more simply as:

#nav a.last { border-right:1px solid #fff;}

You don't have to repeat all the rules as they're already set on #nav a.

[WillisTi]

What part of my CSS code do i need to drop back by 3px? Tried a couple of things but it didnt seem to work.

Thanks for pointing out the repeat on #nav a, now changed

[Tyssen]

#nav a has a top padding of 75px.