Web Analytics Made Easy -
StatCounter Link colors not working in IE? - CodingForum

Announcement

Collapse
No announcement yet.

Link colors not working in IE?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Link colors not working in IE?

    I set the link color states for the following page:
    http://www.fellowcitizensmusic.com/Media.html

    with all states set to black except for the hover state so that when scrolling over the photos at the bottom it would hover white. This works in firefox, but for some reason it is not working in IE and the links are showing up in a blue state, anyone maybe know why this is happening and how can I fix it?

    This is my html code for the states:

    Code:
    a:link {
    	color: #000;
    	text-decoration: none;
    }
    a:visited {
    	color: #000;
    	text-decoration: none;
    }
    a:hover {
    	color: #FFF;
    	text-decoration: none;
    }
    a:active {
    	color: #000;
    	text-decoration: none;
    }
    Any help is much appreciated! Thank You

  • #2
    All you should really need is:
    Code:
    a {color: #000; text-decoration: none;}
    a:hover{color: #fff;}
    Not sure that will solve your problem but you don't need to restate those rulew, they will be inherited.

    Comment


    • #3
      I believe you are right, that code will work just the same as what I have. Yet this will not solve the problem from happening as far as I can tell, any other ideas as to what is causing this?

      Comment


      • #4
        In holder.css you have:
        Code:
        #header a {
        	font-size: 100%;
        	color: #000;
        	text-decoration: none;
        	padding-top: 2px;
        	padding-right: 15px;
        	padding-bottom: 2px;
        	padding-left: 15px;
        }
        This is over riding the embedded styles because it is more specific. Just add #header a:hover {color:#fff;} and get rid of all the other rules you had.

        You should also fix all these errors in your html.
        Last edited by F-b0mb; Apr 6, 2009, 07:48 AM.

        Comment


        • #5
          Hmmm... I tried this and it did not seem to work? Maybe I implemented it wrong? I deleted the other link rules and tried that rule both in style and in holder.css, neither one worked and when I deleted the other rules it simply stopped working in firefox as well.

          Comment


          • #6
            the #header code works to give a cool white hover effect on the top menu (which I plan on keeping because it looks cool, thank you!) but my original problem is still there. In IE the photos at the bottom of the page still appear as having a blue link background and do not change when hovered over (instead of the black background they are supposed to have with a white hover effect).

            Any ideas on this?

            Thanks!

            Comment


            • #7
              I see, I misunderstood what you were trying to do. Glad it worked out anyway. I can't see what the problem is til I get home(on my iPhone now). So, you are saying you want the images to have a black border until hovered then a white border? If so, you need to make rules for border-color, not color.

              Comment


              • #8
                Originally posted by F-b0mb View Post
                I see, I misunderstood what you were trying to do. Glad it worked out anyway. I can't see what the problem is til I get home(on my iPhone now). So, you are saying you want the images to have a black border until hovered then a white border? If so, you need to make rules for border-color, not color.
                If you look at the page in Firefox, and scroll your mouse over the thumbnails you will see the effect I am looking for. I want what is happening in Firefox currently to also occur in IE, but for some reason currently it is not.

                Comment


                • #9
                  Hello JonisJon,
                  There is some odd CSS there that you might have thought was directed toward your thumbs? Like #photos a.gallery ... I didn't look on all your pages but there is no .gallery on http://www.fellowcitizensmusic.com/Media.html

                  Try this instead... just copy/paste the whole thing into a new .html -
                  Code:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <script type="text/javascript" src="http://www.fellowcitizensmusic.com/js/lightbox.js"></script>
                  <title>Untitled Document</title>
                  <style type="text/css">
                  html, body {
                  	font: 14px "Comic Sans MS";
                  	background: #FC6;
                  	text-align: center;
                  }
                  * {
                  	margin: 0;
                  	padding: 0;
                  	outline: none;
                  	border: none;
                  }
                  #container {
                  	width: 800px;
                  	margin: 30px auto;
                  	background: #999;
                  	overflow: auto;
                  }
                  #photos {
                  	/*height: 300px;*/
                  	width: 100%;
                  	margin: 50px 0;
                  	background: #f00;
                  	position: relative;
                  }
                  #photos ul {
                  	width: 300px;
                  	height: 300px;
                  	margin-left: 30%;
                  	margin-right: 35%;
                  	list-style-type: none;
                  }
                  #photos li {
                  	float: left;
                  }
                  #photos a {
                  	width: 68px;
                  	height: 65px;
                  	display: block;
                  	border: 2px solid #000;
                  	text-decoration: none;
                  }	
                  #photos a:hover {border: 2px solid #fff;}
                  </style>
                  </head>
                  <body>
                      <div id="container">
                          <div id="photos">
                              <h2> Photos</h2>
                                  <ul>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/bench.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/bench_thumb.jpg" width="68" height="65" alt="Bench Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/dog.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/dog_thumb.jpg" width="68" height="65" alt="Dog Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/everyone.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/everyone_thumb.jpg" width="68" height="65" alt="Everyone Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/gas.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/gas_thumb.jpg" width="68" height="65" alt="Gas Thumb" /></a></li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/live.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/live_thumb.jpg" width="68" height="65" alt="Live Thumb" /></a></li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/porch.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/porch_thumb.jpg" width="68" height="65" alt="Porch Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/sitting.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/sitting_thumb.jpg" width="68" height="65" alt="Sitting Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/standing.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/standing_thumb.jpg" width="68" height="65" alt="Standing Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/cover.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/cover_thumb.jpg" width="68" height="65" alt="Cover Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/crazy.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/crazy_thumb.jpg" width="68" height="65" alt="Crazy Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/tree.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/tree_thumb.jpg" width="68" height="65" alt="Tree Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/wall.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/wall_thumb.jpg" width="68" height="65" alt="Wall Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/bus.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/bus_thumb.jpg" width="68" height="65" alt="Bus Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/line.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/line_thumb.jpg" width="68" height="65" alt="Line Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/live2.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/live2_thumb.jpg" width="68" height="65" alt="Live2 Thumb" /></a>
                                      </li>
                                      <li>
                                          <a href="http://www.fellowcitizensmusic.com/images/forest.jpg" rel="lightbox[fc]">
                                          <img src="http://www.fellowcitizensmusic.com/images/forest_thumb.jpg" width="68" height="65" alt="Forest Thumb" /></a>
                                      </li>
                                  </ul>
                          <!--end photos--></div>
                      <!--end container--></div>
                  </body>
                  </html>
                  Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                  Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                  Comment


                  • #10
                    The odd CSS came from an earlier rendition of that page, when I was setting up the photos in a different way. I have deleted all of that CSS that is not necessary. I am going to try to incorporate the new code you gave me here and see if it works. I am not exactly sure how to go about it however as I want to keep the rest of that page intact, and if I just go with a new page I will lose the other info on that page. I will try to identify the key things I need to change from your code and incorporate it, thanks!

                    Comment


                    • #11
                      I will try to identify the key things I need to change from your code and incorporate it, thanks!
                      Code:
                      #photos a {
                      	width: 68px;
                      	height: 65px;
                      	display: block;
                      	border: 2px solid #000;
                      	text-decoration: none;
                      }	
                      #photos a:hover {border: 2px solid #fff;}
                      Those two things should do it.
                      There is also the matter of #photos being set at height:300px; when it should not be (that's why I commented it out).
                      Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                      Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                      Comment


                      • #12
                        Originally posted by Excavator View Post
                        Code:
                        #photos a {
                        	width: 68px;
                        	height: 65px;
                        	display: block;
                        	border: 2px solid #000;
                        	text-decoration: none;
                        }	
                        #photos a:hover {border: 2px solid #fff;}
                        Those two things should do it.
                        There is also the matter of #photos being set at height:300px; when it should not be (that's why I commented it out).
                        I think you are on the right track with this, however this does not seem to quite work. It takes away a little bit from the nice effect I had with link hover (it doesn't completely surround most of the thumbs now for some reason) and although it does appear in IE to some degree now, the link states still surround the thumbs and make the page look bad. I have not uploaded this change for this reason, going to keep working on it, thanks!

                        Essentially I want it to have the exact same functionality it has now in Firefox.... in IE as well. Putting in these changes would change both, I want the effects to be the same, but for it to also work in IE.
                        Last edited by JonisJon; Apr 7, 2009, 04:36 AM.

                        Comment


                        • #13
                          Originally posted by JonisJon View Post
                          (it doesn't completely surround most of the thumbs now for some reason) and although it does appear in IE to some degree now, the link states still surround the thumbs and make the page look bad. I have not uploaded this change for this reason, going to keep working on it, thanks!
                          Here's a demo I'll leave up for a bit - http://nopeople.com/test/jonisjon.html
                          It's valid and works in FF3, IE8, IE7 and IE6, although I'm not sure what you're seeing with link states....

                          If it doesn't work when you incorporate it into your website, you still have some conflicting CSS.
                          Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                          Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                          Comment


                          • #14
                            Originally posted by Excavator View Post
                            Here's a demo I'll leave up for a bit - http://nopeople.com/test/jonisjon.html
                            It's valid and works in FF3, IE8, IE7 and IE6, although I'm not sure what you're seeing with link states....

                            If it doesn't work when you incorporate it into your website, you still have some conflicting CSS.
                            I am going to bed at the moment, but I will work on this and let you know tomorrow, thanks for all of your help Excavator!

                            Comment


                            • #15
                              I must still have some conflicting CSS of some sort, but I am not sure where. Take a look at the page now, I uploaded your changes and it just does not seem to be working right? Any idea where I might be going wrong?

                              In Firefox (for me at least) now the borders only encompass some of the thumbnails, they don't appear around the entire thing anymore. The same occurs in IE, except those ugly looking link states still appear for me to?

                              www.fellowcitizensmusic.com/Media.html

                              Comment

                              Working...
                              X