Welcome to WebmasterWorld Guest from 50.19.57.50

Forum Moderators: not2easy

Message Too Old, No Replies

Strange issue with image/link

It is weird...

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

New User

10+ Year Member

joined:Mar 17, 2006
posts: 15
votes: 0


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).
3:34 pm on Apr 4, 2011 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


#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);
}
7:24 am on Apr 5, 2011 (gmt 0)

New User

10+ Year Member

joined:Mar 17, 2006
posts: 15
votes: 0


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 :(...
7:37 am on Apr 5, 2011 (gmt 0)

New User

10+ Year Member

joined:Mar 17, 2006
posts: 15
votes: 0


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?
9:10 am on Apr 5, 2011 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


#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.
10:27 am on Apr 5, 2011 (gmt 0)

New User

10+ Year Member

joined:Mar 17, 2006
posts: 15
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members