homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Strange issue with image/link
It is weird...
hurafloyd

5+ Year Member



 
Msg#: 4291764 posted 10:11 am on Apr 4, 2011 (gmt 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).

 

swa66

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



 
Msg#: 4291764 posted 3:34 pm on Apr 4, 2011 (gmt 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);
}

hurafloyd

5+ Year Member



 
Msg#: 4291764 posted 7:24 am on Apr 5, 2011 (gmt 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 :(...

hurafloyd

5+ Year Member



 
Msg#: 4291764 posted 7:37 am on Apr 5, 2011 (gmt 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?

swa66

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



 
Msg#: 4291764 posted 9:10 am on Apr 5, 2011 (gmt 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.

hurafloyd

5+ Year Member



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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved