CSS problem with links

[monique]

Hi all,

I am building a website on which I have problems with styling the links in CSS. For testsite see: http://www.arti-sign.nl/mmc/.

I have given the links different (background) colours for hover and visited. Once you have visited a link it looks as if the link suddenly needs a whole line. Besides it gives the wrong (background) color.

I have done this before without any problem... somehow I can't find the cause for the problem. :confused:

Does anyone know what I have done wrong and how I can solve this "challenging issue"? :D

Further I have some problems in the layout in IE, mainly in IE6 (sorry, just hate it :rolleyes:) but also little ones in IE7. If someone knows what to do there I would be very gratefull too.

Thanks a lot :)

Monique

[Snookerman]

I'm not sure that I see the problems. Could you be more specific about which links are problematic, maybe include a screenshot?

Regarding the design problems in IE, you could use conditional comments and use a different stylesheet for IE, here's a thread that explains how:
http://www.dynamicdrive.com/forums/showthread.php?p=179005#post179005 (http://www.dynamicdrive.com/forums/showthread.php?p=179005#post179005)

Good luck!

[monique]

Ok, I'll attach the following screenshots (hope this works):

Screenshot page hovering a link:

This link is shown correctly: white font on purple background - only as far as the link/word goes.

Screenshot page hovering an already visited link:

This link is shown incorrectly: black font on purple background which also stretches the whole line in the text column from left to right

Does this ring a bell for you?

The IE-issue I will look into... thanks :o

[Snookerman]

For some reason it doesn't do that for me. I'm using Fx3.0.5 on Windows XP. Have you tried clearing your cache?

[Snookerman]

Ok, I just noticed it does that when using the IE tab in Fx. Try removing the highlighted from your css code:


#subnav a:link, a:visited {
color:#43125f;
display:block;
}
#news a:link, a:visited {
color:#43125f;
display:block;
}
If you needed that for other links/menus, make sure it doesn't apply to the ones in your body that you are having problems with.

Good luck!

[monique]

That solves indeed part of the problem, but creates new problems elsewhere.

Anyway this means that we are getting closer ;)

I will check everything again following your advice.

[monique]

I think I have solved the problem :D

In both subnav and news I had a:link and a:visited in one line:


#subnav a:link, a:visited {
color:#43125f;
display:block;
}

#news a:link, a:visited {
color:#43125f;
display:block;
}

I devided both into seperate lines as follows:


#subnav a:link {
color:#43125f;
display:block;
}

#subnav a:visited {
color:#43125f;
display:block;
}

#news a:link {
color:#43125f;
display:block;
}

#news a:visited {
color:#43125f;
display:block;
}


...and the problem does no longer occur!

Strange... but this seems allright now... and it also solved another issue I had :p

Now the IE-issues are left... :cool:

[Snookerman]

It's not that strange, this code:

#subnav a:link, a:visited {
color:#43125f;
display:block;
}

#news a:link, a:visited {
color:#43125f;
display:block;
}
was targeting all anchor tags on you page, I believe what you meant was:

#subnav a:link, #subnav a:visited {
color:#43125f;
display:block;
}

#news a:link, #news a:visited {
color:#43125f;
display:block;
}
or even simpler:

#subnav a:link, #subnav a:visited, #news a:link, #news a:visited {
color:#43125f;
display:block;
}


So what are the IE problems?

[monique]

Yes, I know I have to practice a lot more and spend a lot more time on this before I know it all :o

IE? Here we go:

This is IE7:

The bottom of "LAST UPDATED" doesn't look as it should. There is an 'empty part' under the last item.
Footer with legal stuff should be purple


http://www.arti-sign.nl/mmc/img/IE7-seminars-bottom.jpg

This is IE6 (even much worse :():

On the right there is a 'white part' which should not be there.
The selected item in the mainnav (SEMINARS) should 'touch' the header image.
"You are here" should be aligned left.
Bottoms of both menu's "SEMINARS" and "LAST UPDATED" are not how they should be (nice boxes).
"Footer and legal stuff" should be purple; but I can see it seems to be part of the right white part...? And I am totally confused where those two "ff" come from...


http://www.arti-sign.nl/mmc/img/IE6-seminars-top.jpg
http://www.arti-sign.nl/mmc/img/IE6-seminars-bottom.jpg

I know I am asking much, but ehhh well, you asked yourself...

Do you have any clue?

[monique]

Ok, the issues on IE should be another thread I think. I'll consider this thread als resolved and if necessary start a new thread in the IE stuff.

Thanks Snookerman!

[Snookerman]

You're welcome, glad to help!

Good luck with your site!