Welcome to WebmasterWorld Guest from 54.227.83.19

Forum Moderators: not2easy

Message Too Old, No Replies

Strange issue with image/link

It is weird...

     

hurafloyd

10:11 am on Apr 4, 2011 (gmt 0)

5+ Year Member



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

3:34 pm on Apr 4, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



#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

7:24 am on Apr 5, 2011 (gmt 0)

5+ Year Member



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

7:37 am on Apr 5, 2011 (gmt 0)

5+ Year Member



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

9:10 am on Apr 5, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



#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

10:27 am on Apr 5, 2011 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month