Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts

    IE8 bug with class links style

    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.

    Code:
    <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.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I doubt it is because of the <br>

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

    Code:
    .contentlinks {
       color: #333 !important;
    }
    .contentlinks:hover {
       color: #BBB !important;
    }
    Last edited by Sammy12; 11-23-2011 at 05:16 AM.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you so much! That worked!!!

    Just a question, what does !important do?

    I've never actually used it before.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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!
    Code:
    .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!
    Last edited by Sammy12; 11-23-2011 at 05:38 AM.

  • Users who have thanked Sammy12 for this post:

    kimmi_baby (11-23-2011)

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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?

    Code:
    #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;	
    	
    }

    Code:
    <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>

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Regarding the background not being completely red, you have a padding on the td!

    Code:
    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
    Code:
    #services table td:hover {
       background-color: #FF0000;
    }
    Last edited by Sammy12; 11-23-2011 at 05:52 AM.

  • Users who have thanked Sammy12 for this post:

    kimmi_baby (11-23-2011)

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    On second thought, just place this code in place of yours!

    Code:
    <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!

    Code:
    <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
    Last edited by Sammy12; 11-23-2011 at 06:33 AM.

  • Users who have thanked Sammy12 for this post:

    kimmi_baby (11-23-2011)

  • #8
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    some quick fixes

    add this to the css:

    Code:
    .brush-links td {
       padding: 0;
    }
    Code:
    .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 */
    }

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you for your help so far!

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 11-24-2011 at 12:14 AM.

  • #13
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yep, just try and replace the code again!

  • #15
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    does it work perfectly with the second table having different text?


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •