Userlookup adblock help!

[chizLemons]

Hello! I just registered, so I'm sorry if I'm posting anything wrong or in the wrong place.

 

Anyway, I've been trying to learn how to code user lookups and it seemed like everything was going fine...until I decided to turn off adblock. And now it seems everything's out of place.

 

My userlookup is this one: http://www.neopets.com/userlookup.phtml?user=chizlemons

It seems to work fine with adblock on (at least in my computer, using google chrome...)

 

How should I fix this?! Also, I've noticed my shop link isn't working, even though the image is still there...

 

I can post the code here if needed...thank you very much for your help!

 

This topic has been edited by a member of staff (Ruto).

The topic was posted in the wrong area.

Please check your user inbox to see if you have been contacted regarding this topic.

Per the reason above, this topic has been MOVED from Graphics to Computers & Programming.

[Mouseykins]

Your code might be helpful to look at.

With the adblock I'm not sure how to fix those errors. With regards to your shop link not working it might be blocked by your image. I'd try using stacking layers and see if that helps.

Your positioning appears to be out to lunch as well. It could just be me though.

[AllTimeMarr]

I'm using Adblock too, Google Chrome. And your lookup looks fine indeed,

You coding seems a bit weird and I use inspect element but I don't know.

 

Maybe you could check out this handy dandy guide on user lookups, maybe theirs something in their you can work with:

http://www.neopets.com/~Mustanq

[wolfponies]

The inspect element feature in Chrome is sometimes quite handy. Here's what an inspection of the userInfo div looks like:

 

http://imgur.com/XGTDPBl

 

You can see a lot of stuff. To the right you have the style for the div (handy cuz you don't have to search the page source). Here you can inspect things like the height. The css for the userInfo div has its height crossed out. That's because the style of the element has a height of 100%. The page is quite tall and the exact height is shown above the blue square shown when hovering the userInfo div in the HTML code. And that's just one of many examples :) And completely offtopic too :P

[chizLemons]

Thanks for the replies!
Here is the code:

<style>
#footer, .user, #nst, .sidebar, .brand-mamabar, hr, #ban {
	display: none;
}
#habitarium, #ncmall {
	display: none;
}
.content div a img, .content div b {
	display: none;
}
.contentModule div a img, .contentModule div b {
	display: inline;
}
#header {
	background: none;
}
.user, #nst {
	display: none;
}
#main {
	width: 882px;
	background: url("http://i1378.photobucket.com/albums/ah82/lizmoschen/bg_img_zps134402ca.png");
	border-left: 1px solid #009900;
	border-right: 1px solid #009900;
	margin-top: 0px;
	margin-left: 340px;
}
#content {
	width: 880px;
	margin-left: 3px;
	margin-top: -5px;
	border: 0px;
}
body {
	background: #2d4c26 url("http://i1378.photobucket.com/albums/ah82/lizmoschen/bg_tile_zpse7292ec8.png");
}
#header {
	background: url("http://i57.tinypic.com/2q857gp.png") 0px 0px no-repeat;
	width: 882px;
	height: 1060px;
	border: 0px;
}
#navigation {
	width: 800px;
}
#template_nav {
	;
	margin-top: -50px;
}
ul.dropdown {
	border: 1px solid #1c391c;
	background: #eae3b5;
}
.dropdown li a {
	color: #1c391c !important;
}
.dropdown li a:hover {
	color: #88bf51 !important;
}
.contentModuleTable, .contentModuleContent {
	border: 0px;
	background: transparent;
}
.contentModule {
	border: 0px;
	background: transparent;
}
.contentModuleHeader, .contentModuleHeaderAlt {
	display: none;
}
td, .medText, body {
	color: #1c391c;
	font: 11px tahoma;
}
#userinfo {
	width: 356px;
	height: 243px;
	overflow: visible;
	position: absolute;
	left: 844px;
	top: 298px;
}
#userinfo .contentModuleContent {
	background: url("http://i1378.photobucket.com/albums/ah82/lizmoschen/shield_zpsab85002d.png") top right no-repeat;
}
#userinfo .medText img {
	visibility: hidden;
}
#userinfo .medText table table img {
	visibility: visible;
}
#userinfo table table table {
	display: none;
}
table {
	border-top: 0px !important;
}
#usercollections {
	position: absolute;
	left: 429px;
	top: 716px;
}
#userneopets {
	overflow: visible;
	position: absolute;
	top: 490px;
	left: 620px;
}
#usershop {
	position: absolute;
	display: block;
	width: 179px;
	height: 165px;
	top: 721px;
	left: 768px;
}
#usershop img {
	width: 115px;
	height: 115px;
}
#userneohome {
	position: absolute;
	display: block;
	width: 179px;
	height: 165px;
	top: 721px;
	left: 984px;
}
#userneohome img {
	width: 115px;
	height: 115px;
}
#usertrophies {
	width: 854px;
	top: 1054px;
	left: 350px;
}
#chizlemons {
	left: 835px;
	top: 91px;
	width: 377px;
	height: 171px;
	overflow: auto;
	text-align: center;
	position: absolute;
}
</style>

It's probably pretty weird indeed, it's the first one I make, so I'm sorry if I just don't know what I'm talking about. :P

And um...how should I stack layers for the shop link? Adding another div on top of it or is there a better way?
I'll check out that guide right away, thank you AllTImeMarr!

[AllTimeMarr]

I'll check out that guide right away, thank you AllTImeMarr!

 

I think you really should, especially it might be an idea to check out this part:

http://www.neopets.com/~Mustanq#module

 

"Note: it is necessary to put .contentModuleTable after the module names. Why? It will not work properly in some browsers if you do not include it.

(...)

 

The width is how wide the module is.

The height is how long the module is.

It is very important to include the width and height of the module. You might not think it's necessary but module positioning will not work properly in some broswers if you don't include these two very essential parts."

 

Might be where it went wrong, I don't see anything in your code like:

MODULENAME .contentModuleTable { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 300px; 
height: 200px; 
}

Well I see this, but it's not really what's mentioned in the guide. :-P

contentModuleTable, .contentModuleContent {
	border: 0px;
	background: transparent;
}

[wolfponies]

Marr, it's nothing wrong with the syntax.

The MODULENAME .contentModuleTable from the pet page is just to show that it might be necessary to tell a specific module to change the style of its contentModuleTable class. It's perfectly fine to just write .contentModuleTable but one has to know that this changes the style globally.

 

This is such an interesting error. Without the ad block extension, everything but the header is moved 350 pixels to the right. Tempted to build your UL step by step.

[Mouseykins]

I HIGHLY recommend not using position: absolute. If you're going to use a position tag then position: relative is better. If possible avoid using position at all. It can sometimes mess things up across different browsers and screen resolutions.

[chizLemons]

I HIGHLY recommend not using position: absolute. If you're going to use a position tag then position: relative is better. If possible avoid using position at all. It can sometimes mess things up across different browsers and screen resolutions.

 

I tried changing every absolute to relative and they don't seem to change positions when I turn adblock on and off!!! It seems to be the solution!

I didn't test it in other browsers and resolutions though, I hope it stays the same. It's already changed in my lookup (except for the #chizlemons div that I still need to fix. It only works without adblock now)

 

 

 

 

I think you really should, especially it might be an idea to check out this part:

http://www.neopets.com/~Mustanq#module

 

"Note: it is necessary to put .contentModuleTable after the module names. Why? It will not work properly in some browsers if you do not include it.

(...)

 

The width is how wide the module is.

The height is how long the module is.

It is very important to include the width and height of the module. You might not think it's necessary but module positioning will not work properly in some broswers if you don't include these two very essential parts."

 

Might be where it went wrong, I don't see anything in your code like:

MODULENAME .contentModuleTable { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 300px; 
height: 200px; 
}

Well I see this, but it's not really what's mentioned in the guide. :-P

contentModuleTable, .contentModuleContent {
	border: 0px;
	background: transparent;
}

 

I tried changing that also, but for some reason using .contentModuleTable after every module broke everything..I don't understand why though, I thought it shouldn't visibly change at all!