Userlookup Coding Help - Userinfo Icons

[sme100]

Hi there,

 

I'm usually pretty good at figuring my way around html/css coding on Neopets. However, I have a problem that I can't seem to figure out or find an answer to.

 

I've been helping a friend create her userlookup and she created her own images for the userinfo and usercollections modules. I've found so many codes on this, so I thought this would be no problem. But it's driving me nuts!

 

 

If need be, here is the full CSS code:

<style>
#ban, hr, .sidebar, #nst, .user, .bb, .brand-mamabar, #superfooter, #userneohome, #userneopets .contentModuleHeaderAlt, #footer, #habitarium, #ncmall, .contentModuleHeader, .contentModuleHeaderAlt {
 display: none;
}
.content div a img, .content div b {
 visibility: hidden;
}
#userinfo .medText table table img, .contentModule div a img, .contentModule div b, #abouts b, #abouts a img {
 visibility: visible;
}
.contentModule div a img, .contentModule div b {
 visibility: visible !important;
}
#template_nav {
 margin-top: 620px;
 margin-left: 0px;
 width: 850px !important;
 position: absolute;
}
#header img {
 width: 0px;
}
#template_nav img {
 padding-right: 7px;
 padding-left: 7px;
 width: 80px;
 visibility: hidden;
 display: block;
}
P, body, td, table {
 font: 11px verdana !important;
 font-weight: normal;
 color: #FFFFFF;
}
table, table td {
 border: 0px !important;
}
body {
 background: #6FE3C0 url("http://img690.imageshack.us/img690/8834/4v8a.jpg") top left;
 background-attachment: fixed;
}
A:link, A:visited, A:active {
 font-weight: bold;
 color: #ffffff;
}
A:hover {
 font-weight: bold;
 color: #6FE3C0;
}
#header {
 width: 844px;
 height: 734px;
 margin-top: -740px;
 position: absolute;
 background: url("http://img571.imageshack.us/img571/3954/py7i.png") top center no-repeat;
 border: 0px;
}
#main {
 background: transparent url("http://img838.imageshack.us/img838/5412/5gev.png") 5px 0px no-repeat;
 border: none;
 width: 834px;
 height: 1935px;
 padding: 0px;
 margin-top: 734px;
}
#content {
 width: 100%;
 padding: 0px;
 position: absolute;
}
#userneopets {
 top: -20px;
 position: relative;
 width: 810px !important;
 height: 280px !important;
 display: block;
 left: 10px;
}
#userneopets .medText b {
 color: #FFFFFF !important;
}
#usertrophies {
 position: absolute;
 display: block;
 top: 1455px;
 left: 24px;
 width: 790px;
 height: 400px !important;
 overflow: auto;
}
#userinfo {
 position: absolute;
 top: 1070px;
 left: 400px;
 width: 420px;
 height: 270px !important;
}



#userinfo .contentModuleContent {
 background: url("http://s1.postimg.org/abizgf6jz/All_2.png");
 background-repeat: no-repeat;
 background-position: center;
}
#userinfo .medText table table img, #userinfo .medText img {
    visibility: hidden;
    display: table-cell;
    height: 50px;
}



#usershop {
 position: absolute;
 top: 690px;
 left: 597px;
 width: 203px;
}
#usershop img {
 visibility: hidden;
 display: table-cell;
 height: 180px;
}
#usershop .contentModuleContent {
 background: url("http://img823.imageshack.us/img823/891/i5x5.gif");
 background-repeat: no-repeat;
}
#usercollections {
 position: absolute;
 top: 690px;
 left: 290px;
}
#usercollections td.medText {
 line-height: 10px !important;
}
#usercollections td {
 padding: 0px !important;
}
#abouts {
 position: absolute;
 top: 345px;
 left: 30px;
 width: 510px;
 height: 250px;
 overflow: auto;
 font: normal 13px century gothic;
 text-align: center;
 padding-right: 5px;
}
#abouts b {
 color: #5DFBD6;
}
.contentModuleContent {
 background: transparent;
}
ul.dropdown {
 border: 1px dotted #099A95;
 background: #ffffff;
}
.dropdown li a {
 color: #000000 !important;
 font-weight: bold;
 font: bold 14px comic sans ms;
}
.dropdown li a:hover {
 color: #31C2B6 !important;
}
</style>

#userinfo is where I currently am

#userinfo .contentModuleContent {
 background: url("http://s1.postimg.org/abizgf6jz/All_2.png");
 background-repeat: no-repeat;
 background-position: center;
}
#userinfo .medText table table img, #userinfo .medText img {
    visibility: hidden;
    display: table-cell;
    height: 50px;
}

Now...I know to remove the icon pictures, I need to have the visibility hidden, display table-cell, and height 50 px. That is what every single guide I could find has told me. And I believe it because I had no problem with this coding for the shop image. However, when I put this coding in, the original userinfo icons WILL NOT go away. The shield is gone, but the icons remain.

 

The only way I can get the icons to go away is if instead of putting visibility: hidden, I put display: none. However, then I can't click the links for the icons.

 

 

Not only this, but when I tried to move onto the #usercollections section and tried doing the same thing as everything else, my entire userlookup goes haywire. My shop and userinfo won't show up, the pets get knocked down into another section, the Stamp and KeyQuest icons remain and are off quilter while all of the other images disappear and the links remain in the same place. And all I touched was the #usercollections section with the same coding as every guide has told me to use.

 

 

All and all, I need help. I desperately need help because I am downright confused. Absolutely befuddled.

 

 

If anyone would be willing to help me out, I would be eternally grateful. Even if you can just offer me some tips and suggestions on what I could be doing wrong.

 

To recap, I want to replace the icons for the userinfo and usercollections sections. I had no problem replacing the usershop image, but these two sections are giving me nothing but problems.

 

 

Please help. Even if you just take the time to read this, thank you.

 

 

If there is any additional information needed, please let me know.

I really need help.

 

 

[maikrowsoft]

I can't debug like this. Can you link me to the live page?

[sme100]

Re: maikrowsoft

 

Thank you!

 

Like I said, I'm making this userlookup for a friend, so here's the link for my page where you can see it.

 

 

http://www.neopets.com/userlookup.phtml?user=wonderlands_secret

 

 

I got the problem fixed where the #usercollections was making everything else go haywire, but I'm running into the same problem with the images and the table-cell.

 

I really hope you can help. Please let me know if there's anything else you need me to do. Again, thank you!

[maikrowsoft]

#usercollections img {
visibility: hidden !important;
}

#userinfo .medText table table img, #userinfo .medText img {
visibility: hidden !important;
}

Can't debug the background images now because they're too small to work with and because I'm half dead (1:42 AM, /sleep). Good luck!

[sme100]

Thank you!

You got rid of the image problem I was having. I got the background image fixed, so it's where it's supposed to be now.


Now the only thing left is that I still can't click on the userinfo links and the usercollections columns are a little off.


I'm going to keep working and looking for more information. But thank you so so much for taking the time to help me out! ^-^

It's done!

I got everything fixed. My friend just needs to fix an image and she's all ready to go.


Thank you, again, for your help. I wouldn't have been able to get past this without you. ^-^

This post has been edited by a member of staff (Spritzie) because of a violation of the forum rules.
Please don't double post. If you would like to add something, use the 'Edit' button.
Please check your user inbox to see if you have been contacted regarding this incident, then review our rules.


This topic has been edited by a member of staff (Spritzie).
The original topic is now answered and will be closed.
Please check your user inbox to see if you have been contacted regarding this topic.
Per the reason above, this topic has been LOCKED. Please contact Spritzie if you have any questions regarding this action.