IE8 bug with class links style

[kimmi_baby]

I'm having an issue with IE8.

I have special links which I want to have a different colour but for some reason in IE8, the link is white (which is what the a:link is, not the contentlink class). For some reason the hover works though.

I think it may because of my actual link having <br/> tags inside it.

<a class="contentlinks" href="carpetcleaning.php" >carpet cle-<br />aning</a>

Is there a way to fix this? I need the word to be aligned which is why I've had to use the <br/>

It works fine in Firefox, Chrome and Safari.

[Sammy12]

I doubt it is because of the <br>

First, try removing :link from a:link
Next, try

.contentlinks {
   color: #333 !important;
}
.contentlinks:hover {
   color: #BBB !important;
}

[kimmi_baby]

Thank you so much! That worked!!!

Just a question, what does !important do?

I've never actually used it before.

[Sammy12]

anything with !important will override anything of the same CSS style and works all the way down to ie6!

here's a little snippet that is ordered from weakest to strongest!

.imALittleWeakClass {
   color: #111;
}
#imABigStrongId {
   color: #222;
}
.imALittleWeakClassMadeStronger {
   color: #333 !important;
}
#imABigStrongIdMadeEvenStronger {
   color: #444 !important;
}

as you can see id is stronger than class, but with !important, a class is stronger than an id! Nonetheless, an id with !important is GOD!

initially, ids override classes, but even a class can override an id with !important!
this allows for an expanded amount of control over your elements!

[kimmi_baby]

Ohh that's great! Good to know. IE is driving me crazy.

I was wondering whether I could ask you a question about tables, I'm not really used to using them since I don't like them haha.

Would you mind taking a look at http://www.purpleblaze.com.au/ninjaclean/corporate.php

I've used a table there, now I need it pretty much to go the full length of the image below it and I also need the rollover background to be completely red with bold text and the current tab to be highlighted.

Is there a better way to do this rather than using a table? And if I am using a table, what am I actually doing wrong?

#services {
float:left;
padding-left:30px;
font-size:11pt;
padding-top:20px;
	
	
}

#services2 {
float:right;	
padding-left:30px;
font-size:11pt;
margin-right:340px;
margin-top:-154px;
}


table a {
	display:block;
	
	
}
table a:hover {
color: white; 
background-color: red;
}

td {
background-color:#CCC;
padding:5px;
padding-right:5px;

}






table {
border-spacing:5px;
}

tr.heading td {
background:white;	
	
}

<div id="services">
<br />
<table>

<tr class="heading">
<td><font color="#CCCCCC"><b>Commercial Cleaning:</b></font></td>
<td></td>
<td><font color="#CCCCCC"><b>Additional Services:</b></font></td>
</tr>

<tr>
<td><a href="corporate.php" title="corporate/office">Corporate/Office</a></td>
<td><a href="medicaloffices.php" title="Medical Offices">Medical Offices</a></td>
</tr>

<tr>
<td><a href="shoppingcentres.php" title="Shopping Centres">Shopping Centres</a></td>
<td><a href="educationcentres.php" title="Education Centres">Education Centres</a></td>
</tr>

<tr>
<td><a href="industrial.php" title="Industrial/Warehouse">Industrial/Warehouse</a></td>
<td><a href="exit.php" title="Exit/End of Lease">Exit/End of Lease</a></td>
</tr>

<tr>
<td><a href="construction.php" title="Construction/Buildings">Construction/Buildings</a></td>
<td><a href="eventcleaning.php" title="Event Cleaning">Event Cleaning</a></td>
</tr>

</table>
</div>

<div id="services2">

<table>
<tr>
<td><a href="windowcleaning.php" title="Window Cleaning">Window Cleaning</a></td>
<td><a href="blindcleaning.php" title="Blind Cleaning">Blind Cleaning</a></td>
</tr>

<tr>
<td><a href="carpetcleaning.php" title="Carpet Cleaning">Carpet Cleaning</a></td>
<td><a href="teatowelsupply.php" title="Tea-towel Supply Services">Tea-towel Supply Service</a></td>
</tr>

<tr>
<td><a href="pressurecleaning.php" title="Pressure Cleaning">Pressure Cleaning</a></td>
<td><a href="washroomsupplies.php" title="Washroom Supplies Service">Washroom Supplies Service</a></td>
</tr>

<tr>
<td><a href="hardfloorcare.php" title="Hard Floor Care">Hard Floor Care</a></td>
<td><a href="recycling.php" title="Recycling"><i>Recycling - COMING SOON</i></a></td>
</tr>

</table>


</div>

[Sammy12]

Regarding the background not being completely red, you have a padding on the td!

td {
   background-color:#CCC;
   padding:5px;
   padding-right:5px;
}

this padding is constricting the <a> tag! Essentially the padding is pushing the <a> tag inward.



try setting the hover to the td

#services table td:hover {
   background-color: #FF0000;
}

[Sammy12]

On second thought, just place this code in place of yours!

<style type="text/css">
	#services {
	overflow: hidden;
	width: 690px;
	float: left;
	padding: 25px 0 0 25px;
}
#commercialCleaning {
	float: left;
}
#additionalServices {
	float: right;
}
.brush-links {
	border-spacing: 5px;
}
.brush-links th {
	color: #BBB;
	border: none;
}
.brush-links td {
	background-color: #CCC;
}
.brush-links td a {
	text-decoration: none;
	color: #FFF !important;
	width: 150px;
	display: block;
	padding: 5px;
}
.brush-links td a:hover {
	background-color: #FF0000;
}
</style>

Here's an image of what you need to delete in your css file! Everything from /* Services */ to /* Home Content CSS */
In the picture, I've replaced it with the new css (above)




Here's the new HTML!

<div id="services">
	<table id="commercialCleaning" class="brush-links">
		<thead>
			<tr>
				<th>Commercial Cleaning</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<a href="#">Corporate/Office</a>
				</td>
				<td>
					<a href="#">Medical Offices</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#">Shopping Centres</a>
				</td>
				<td>
					<a href="#">Educational Centres</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#">Industrial Warehouse</a>
				</td>
				<td>
					<a href="#">Exit/End of Lease</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#">Construction/Buildings</a>
				</td>
				<td>
					<a href="#">Event Cleaning</a>
				</td>
			</tr>
		</tbody>
	</table>
	<table id="additionalServices" class="brush-links">
		<thead>
			<tr>
				<th>Additional Services</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<a href="#">Corporate/Office</a>
				</td>
				<td>
					<a href="#">Medical Offices</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#">Shopping Centres</a>
				</td>
				<td>
					<a href="#">Educational Centres</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#">Industrial Warehouse</a>
				</td>
				<td>
					<a href="#">Exit/End of Lease</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#">Construction/Buildings</a>
				</td>
				<td>
					<a href="#">Event Cleaning</a>
				</td>
			</tr>
		</tbody>
	</table>
</div>

Additionally, this is how you should replace you html!



One negative aspect about tables is the difference in rendering between browsers! I typically use <ul>s but tables are more accurate in this case

[kimmi_baby]

Thank you!!!! That worked amazingly

I've noticed the first column of links still has a bit of a grey background. I should be able to fix this by changing a bit of the css?

[Sammy12]

some quick fixes

add this to the css:

.brush-links td {
   padding: 0;
}

.brush-links td a {
	text-decoration: none;
	color: #FFF !important;
	width: 150px;
	display: block;
	padding: 5px; /* increase this if you want more room around the text */
}

[Sammy12]

hm I never use tables, apparently it doesn't like me setting a width to the <a> tag.

I have to go, but I'll fix it tomorrow.

[kimmi_baby]

Thank you for your help so far!

[Sammy12]

I see you've tried to use 4 tables, though that won't work and is semantically incorrect

Try replacing your code again
then add the "quick fixes" below that

That new code works perfectly without any other css on my server, so there must have been something in your previous css that was altering the results. I remember the problem was that the first column had a slight width problem.

[kimmi_baby]

I've had to use 4 tables because for some reason, it's required that each column be a different width so that it all fits in. It also needs to be the exact spacing that it is right now. Is it possible to do this with just 2 tables?

[Sammy12]

yep, just try and replace the code again!

[kimmi_baby]

does it work perfectly with the second table having different text?