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.

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

Further I have some problems in the layout in IE, mainly in IE6 (sorry, just hate it ) 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

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

[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

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

Now the IE-issues are left...

[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

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

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

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!