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 20
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool 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
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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.

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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; 04-06-2009 at 01:48 PM.

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    28
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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.

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote 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; 04-07-2009 at 10:36 AM.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote 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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote 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!

  • #15
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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