homepage Welcome to WebmasterWorld Guest from 54.198.33.96
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




msg:4291766
 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




msg:4291865
 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




msg:4292254
 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




msg:4292260
 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




msg:4292297
 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




msg:4292338
 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