Custom Header Text Styling

[limelites]

I wonder if anyone could take a look at my header on www.limelites.co.uk

I've added some shipping info bullet points to the header and wrapped them in <div id="headerShippingText">

I've inserted the following html into the tpl_header.php file:

<!-- bof-shipping text -->
<div id="headerShippingText"><table border="0" cellspacing="0" cellpadding="0" id="table1" height="0%" width="266">
	<tr>
		<td width="16">
			<img border="0" src="https://www.limelites.co.uk/includes/templates/freetemplate2/images/bullet1.gif" width="13" height="9"></td>
		<td width="250">
		<font face="Trebuchet MS" style="font-size: 1em">
		<a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo" style="text-decoration: none">
		<font color="#555555">Next day delivery options</font></a></font></td>
	</tr>
	<tr>
		<td width="16">
			<img border="0" src="https://www.limelites.co.uk/includes/templates/freetemplate2/images/bullet1.gif" width="13" height="9"></td>
		<td width="250">
		<font face="Trebuchet MS" style="font-size: 1em">
		<a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo" style="text-decoration: none">
		<font color="#555555">Fast worldwide shipping 
		</font></a></font> 
		</td>
	</tr>
	<tr>
		<td width="16">
			<img border="0" src="https://www.limelites.co.uk/includes/templates/freetemplate2/images/bullet1.gif" width="13" height="9"></td>
		<td width="250">
		<font face="Trebuchet MS" style="font-size: 1em">
		<a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo" style="text-decoration: none">
		<font color="#555555">Low shipping costs 
		</font></a></font> 
		</td>
	</tr>
	<tr>
		<td width="16">
			<img border="0" src="https://www.limelites.co.uk/includes/templates/freetemplate2/images/bullet1.gif" width="13" height="9"></td>
		<td width="250">
		<font face="Trebuchet MS" style="font-size: 1em">
		<a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo" style="text-decoration: none">
		<font color="#555555">Free UK shipping on £150.00+ orders</font></a></font></td>
	</tr>
</table>
</div>
<!-- eof-shipping text -->

I'm trying to style the text in CSS now so that it applies the a hover effect and goes blue when you hover over each point (the same as my categories).

I've tried everything. Can anyone think how I could go about this? I've tried #headerShippingText a:hover {color:#0000FF;} but it does nothing.

[gjh42]

Instead of using layout tables to simulate a list, just use an HTML <ul> list for the actual output:

<!-- bof-shipping text -->
<div id="headerShippingText">
	<ul>
		<li><a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo">Next day delivery options</a></li>
		<li><a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo">Fast worldwide shipping</a></li>
		<li><a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo">Low shipping costs</a></li>
		<li><a href="https://www.limelites.co.uk/index.php?main_page=shippinginfo">Free UK shipping on £150.00+ orders</a></li>
	</ul>
</div>
<!-- eof-shipping text -->

and style all of the elements in your stylesheet.
This may help your hover styling as well, as some old browsers don't support CSS hover on anything but <a> and possibly <li> elements.
The other way it will help is that inline styling such as you show takes precedence over stylesheet styling unless the stylesheet property value is given !important to strengthen it. You will make life simpler by keeping all styling in the stylesheet so normal precedence rules can apply.

[limelites]

Thanks Glen, I've replaced my html with the code above.

However, when I use this in my stylesheet, it's just being ignored (well, the color: is being ignored, not the positioning)

#headerShippingText  {
color: #555555;
bottom:65px;
font-family:trebuchet MS;
font-size:1em;
left:974px;
position:absolute;
width:300px;
}

#headerShippingText a:hover {color:#0000FF;}

[limelites]

OK, getting somewhere with this:

#headerShippingText  {
color: #555555;
bottom:65px;
font-family:trebuchet MS;
font-size:1em;
left:974px;
position:absolute;
width:300px;
text-decoration:none;
}

#headerShippingText a:link {color:#555555;text-decoration:none;}

#headerShippingText a:hover {color:#0000FF;text-decoration:none;}

...........but how do I remove the list-style and use the bullet1.gif's ?

[gjh42]

You have

#headerShippingText  {
color: #555555;
bottom:65px;
font-family:trebuchet MS;
font-size:1em;
left:974px;
position:absolute;
width:300px;
}

#headerShippingText a:link {color:#0000FF;}

You need

#headerShippingText  {
color: #555555;
bottom:65px;
font-family:trebuchet MS;
font-size:1em;
left:974px;
position:absolute;
width:300px;
}

#headerShippingText li {list-style-marker: url(../images/bullet1.gif);}

#headerShippingText a {color:#555555;}

#headerShippingText a:hover {color:#0000FF;}

OK, part way there already:)

[limelites]

Got there in a slightly different way, but thanks Glen, I've been trying to figure this out for ages!!

#headerShippingText  {
bottom:53px;
color:#555555;
font-family:trebuchet MS;
font-size:1em;
left:954px;
list-style-image:url("../images/bullet1.gif");
position:absolute;
text-decoration:none;
text-indent:-3px;
width:300px;
}

#headerShippingText a:link {color:#555555;text-decoration:none;}

#headerShippingText a:hover {color:#0000FF;text-decoration:none;}

[gjh42]

Right, list-style-image - didn't take time to look up the correct property name. Due to inheritance, the way you did it works fine. Usually such things are applied to the ul and trickle down to the li, but it obviously can go farther.

[limelites]

Well, thanks anyway Glen. Without your code to replace my html, I'd never have found the way.

I'm tempted now to replace all the html code in my Size Filter side boxes :)