Strange issue with image/link

It is weird...

[hurafloyd]

Hello CSS mates,

I'm having quite a strange issue at the moment, I've checked every related code to the problem but I cannot find any problem with it.

Here is the URL to the website in my server so you can have a look at the issue:

[easymarket.sytes.net ]

Please ignore the aesthetic or graphical issues :3.

The problem starts when you point out the two links inside the rightmost container, a huge area with an image will appear all of a sudden below the pointed link, the area matches the same image or size used at the top of the page "as a link". It is blank because I removed the picture but the situation it is all the same with or without it, and it happens with both links... honestly I dont understand, I feel it is out of this world XD...

Here is the CSS Code that could be related to the problem:

#header a:link, a:visited, a:hover, a:active {
display:block;
width:550px;
height:150px;
background-image:url();
background-repeat:no-repeat;
outline-color:#fff;
}

#registry {
color:#000;
width:80px;
height:20px;
margin-left:10px;
}

#registry a:link, a:visited, a:active {
color:#2E2EFE;
display:block;
text-decoration:none;
background-image:url(img/botonb.jpg);
background-repeat:no-repeat;
}

#registry a:hover {
color:#2E2EFE;
text-decoration:none;
background-image:url(img/botona.jpg);
background-repeat:no-repeat;
}

You can have a look of the HTML code when you open the source code of the site with your browser (better like this, to avoid putting too much code in this entry).

[swa66]

#header a:link, a:visited, a:hover, a:active

That's odd.
You probabaly meant to write:
#header a:link, #header a:visited, #header a:hover, #header a:active
(the comma starts anew).

Next the LoVe-HAte "rule": that's obsolete IMHO: [webmasterworld.com...]

I suggest you just style the link, and no worry about the pseudo states unless you want one different and then just style that one to overrule the default style.

So

#registry a:link, a:visited, a:active {
color:#2E2EFE;
display:block;
text-decoration:none;
background-image:url(img/botonb.jpg);
background-repeat:no-repeat;
}

#registry a:hover {
color:#2E2EFE;
text-decoration:none;
background-image:url(img/botona.jpg);
background-repeat:no-repeat;
}

becomes

#registry a {
color:#2E2EFE;
display:block;
text-decoration:none;
background-image:url(img/botonb.jpg);
background-repeat:no-repeat;
}
#registry a:hover {
background-image:url(img/botona.jpg);
}

[hurafloyd]

Hi swa66,

I tried to reform the code as you mentioned, but sadly that does not solve the issue about the gap appearing below the links :(...

[hurafloyd]

Sorry for the extra post.

I just did what you mentioned about the #registry but with the #header, and the problem was solved! I dont understand honestly what was the issue...

Why was a code and pseudo related to #header affecting #registry?

[swa66]

#header a:link, a:visited, a:hover, a:active {}

- will affect the <a> tags in any tag with attibute id="header" in the "link" state.
- will affect ALL <a> tages (also outside the parent with id="header") in the visited state, in the hover state and in the active state. Since you probably have everything as visited...
Unless there is something with higher specificity overruling the settings, or with equal specificity that comes later in the source code order.

[hurafloyd]

I see, it is true, I forgot about the parent-child relationship. It was careless on my part.

Thank you very much swa66 for your help.