...

View Full Version : Link colors not working in IE?



JonisJon
04-06-2009, 07:51 AM
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:


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

F-b0mb
04-06-2009, 08:15 AM
All you should really need is:

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.

JonisJon
04-06-2009, 09:35 AM
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?

F-b0mb
04-06-2009, 01:40 PM
In holder.css you have:

#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 (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fellowcitizensmusic.com%2FMedia.html&charset=(detect+automatically)&doctype=Inline&group=0) in your html.

JonisJon
04-06-2009, 06:18 PM
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.

JonisJon
04-07-2009, 06:42 AM
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!

F-b0mb
04-07-2009, 07:43 AM
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.

JonisJon
04-07-2009, 08:12 AM
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.

Excavator
04-07-2009, 09:49 AM
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 -
<!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>

JonisJon
04-07-2009, 10:01 AM
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!

Excavator
04-07-2009, 10:17 AM
I will try to identify the key things I need to change from your code and incorporate it, thanks!

#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).

JonisJon
04-07-2009, 10:30 AM
#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.

Excavator
04-07-2009, 10:46 AM
(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.

JonisJon
04-07-2009, 10:56 AM
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!

JonisJon
04-07-2009, 07:45 PM
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

djm0219
04-07-2009, 07:56 PM
In your HTML page itself remove the following 2 lines from the #photos a ID.



height: 65px;
width: 68px;

Excavator
04-07-2009, 11:51 PM
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

You're specifying a width and height on the ul. The images fit in that but when you add 4px worth of border they overlap. See how the box model includes border with width (http://www.w3.org/TR/CSS2/box.html).

Try this with your CSS. I moved some embedded stuff (the a and a:hover styling) over to holder.css so all the styling for that ul is in one group (that's just good housekeeping). I also adding a bit at the top so I'll quote the entire holder.css and highlight the changes. I didn't test this yet in IE6...

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFF;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.oneColElsCtrHdr #container {
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #FFF;
margin: auto;
}
.oneColElsCtrHdr #header h1 {

}
.oneColElsCtrHdr #mainContent {
background-color: #CCC;
}

#mainContent {
font-family: "Rockwell Extra Bold";
font-size: 100%;
font-style: normal;
color: #FFF;
text-align: center;
top: 210px;
position: absolute;
left: 0px;
width: 100%;
}
#header {
background-color: #FFF;
top: 0px;
background-repeat: repeat-x;
left: 0px;
width: 100%;
height: 60px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-image: url(../images/Header_Bg2.jpg);
overflow: hidden;
position: absolute;
}
#footer {
background-color: #CCC;
width: 100%;
height: 200px;
}
#footer P {
color: #FFF;
text-align: center;
}


#header ul {
list-style-type: none;
font-size: 17px;
color: #FFF;
font-weight: bold;
position: absolute;
top: 0;
clear: right;
padding-left: 2.5em;
left: 40px;
float: left;
}
#header li {
display: inline;
margin-right: 1em;
overflow: hidden;
}
.boxcontent ul li {
margin-bottom: 10px;
}

#header a {
font-size: 100%;
color: #000;
text-decoration: none;
padding-top: 2px;
padding-right: 15px;
padding-bottom: 2px;
padding-left: 15px;
}


#masthead {
background-position: center;
position: absolute;
width: 100%;
left: 0px;
top: 60px;
}
.box {
background-color: #000;
clear: left;
height: 100%;
position: relative;
width: 95%;
margin: 0 auto;
;
}
.boxtop {
background-image: url(../images/ne.gif);
background-repeat: no-repeat;
background-position: right top;
text-align: left;
}
.boxtop div {
background-image: url(../images/nw.gif);
background-repeat: no-repeat;
background-position: left top;
font-size: 0px;
height: 50px;
}
.boxbottom {
background-image: url(../images/se.gif);
background-repeat: no-repeat;
background-position: right bottom;
text-align: center;
}
.boxbottom div {
font-size: 0px;
height: 50px;
background-image: url(../images/sw.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
.boxcontent {
padding: 0px 50px 0px 50px;
}
.boxcontent ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}
.boxcontentalt {
padding: 0px 50px 0px 50px;
}
.boxcontentalt ul {
list-style-type: none;
}


#photos {
width: 100%;
position: relative;
margin: 50px 0;
}

#photos ul {
/*float: none; no such thing*/
width: 304px;
margin-left: 30%;
margin-right: 35%;
list-style-type: none;
}
#photos li {
float: left;

}
#photos a {
text-decoration: none;
display: block;
border: 2px solid #000;
}
#photos a:hover {
border: 2px solid #fff;
}

JonisJon
04-08-2009, 12:10 AM
That seems to have done the trick! Working in both Firefox and IE now, thank you so much excavator and thank you everyone else who has contributed on this!

Excavator
04-08-2009, 12:37 AM
Gotta love IE6 making such a simple thing so difficult, huh?
I'm glad you got it working.


http://nopeople.com/homepage/bd.png (http://www.bringdownie6.com/)

JonisJon
04-08-2009, 01:50 AM
Gotta love IE6 making such a simple thing so difficult, huh?
I'm glad you got it working.


http://nopeople.com/homepage/bd.png (http://www.bringdownie6.com/)

Yea no kidding! There are brief periods of time when I am working on problems like this where I feel that IE is the bane of my existence.

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum