...

View Full Version : IE8 bug with class links style



kimmi_baby
11-23-2011, 03:59 AM
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
11-23-2011, 04:12 AM
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
11-23-2011, 04:27 AM
Thank you so much! That worked!!!

Just a question, what does !important do?

I've never actually used it before.

Sammy12
11-23-2011, 04:32 AM
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
11-23-2011, 04:38 AM
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
11-23-2011, 04:44 AM
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.

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-130.png

try setting the hover to the td


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

Sammy12
11-23-2011, 05:12 AM
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)


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-131.png

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!

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-132.png

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
11-23-2011, 05:49 AM
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
11-23-2011, 05:55 AM
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
11-23-2011, 05:59 AM
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
11-23-2011, 06:09 AM
Thank you for your help so far!

Sammy12
11-23-2011, 11:11 PM
I see you've tried to use 4 tables, though that won't work and is semantically incorrect :)

Try replacing your code again :thumbsup:
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
11-24-2011, 12:40 AM
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
11-24-2011, 12:48 AM
yep, just try and replace the code again!

kimmi_baby
11-24-2011, 01:15 AM
does it work perfectly with the second table having different text?

Sammy12
11-24-2011, 02:20 AM
lol yes! But the direction you are going in with 4 tables is the wrong one!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum