Userlookup browser compatibility

[chizLemons]

I'm almost finished with my userlookup! There's one little problem with it now though: it's not compatible with all browsers. It works perfectly on Chrome, but not so much on IE. I don't have any others installed so I don't know about them...what makes it not work with all of them?

 

Here is the code:

<style>
.footerNifty, .user, .copyright img, .sf, #nst, .sidebar, .brand-mamabar, hr, #ban {
	display: none;
}
#habitarium, #ncmall {
	display: none;
}
.content div b {
	display: none;
}
.contentModule div a img, .contentModule div b {
	display: inline;
}
#header {
	background: none;
}
.user, #nst {
	display: none;
}
.medText {
	font-size: 8pt;
	color: #1c391c;
	font-family: tahoma;
}
#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: -30px;
}
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;
}
#userinfo {
	width: 356px;
	height: 243px;
	overflow: visible;
	position: relative;
	left: 495px;
	top: -1200px;
}
#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 img {
	visibility: hidden !important;
}
#usercollections {
	position: relative;
	left: -320px;
	top: -755px;
	width: 318px;
	height: 295px;
}
#usercollections .contentModuleContent {
	background: url("http://i1378.photobucket.com/albums/ah82/lizmoschen/collections_zps6a963501.png");
}
#userneopets {
	overflow: visible;
	position: relative;
	top: -1300px;
	left: 160px;
}
#userneopets img {
	border: 2px solid #1c391c;
	border-radius: 100px;
}
#usershop {
	position: relative;
	display: block;
	width: 179px;
	height: 165px;
	top: -750px;
	left: -265px;
}
#usershop img {
	width: 115px;
	height: 115px;
	border: 1px solid #1c391c;
}
#userneohome {
	position: relative;
	display: block;
	width: 179px;
	height: 165px;
	top: -1060px;
	left: 30px;
}
#userneohome img {
	width: 115px;
	height: 115px;
	border: 1px solid #1c391c;
}
#usertrophies {
	width: 854px;
	position: relative;
	top: -980px;
	left: 5px;
}
#usertrophies img {
	border: 1px solid #1c391c;
}
#chizlemons {
	left: 240px;
	top: -995px;
	width: 377px;
	height: 171px;
	overflow: auto;
	text-align: center;
	position: relative;
	font-size: 8pt;
	color: #1c391c;
	font-family: tahoma;
}
#footer {
	background: url("http://i1378.photobucket.com/albums/ah82/lizmoschen/footer_zpsdfc1016f.png");
	width: 882px;
	height: 164px;
}
#icons {
	width: 500px;
	height: 200px;
	overflow: auto;
	position: relative;
	left: 175px;
	top: -830px;
}
#icons img {
	width: 40px;
	height: 40px;
}
</style>

<div id="chizlemons">
<br>Hello!<br>
I'm still working on my Userlookup, so if there's anything wrong with it either I'm already working on it, or I'd be happy if you point it out!<br><br>
I'm a 22 years old animation student that loves to procrastinate here. I'm currently saving to buy a Draik egg, and I'm always trying to get trophies. :)<br><br>
</div>
<div id="icons">
<a href="http://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=owner&search_string=chizlemons" id="Trades">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/trades_zps3afb549e.png"></a>
<a href="http://www.neopets.com/genie.phtml?type=find_user&auction_username=chizlemons" id="Auctions">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/auctions_zpsc67cb227.png"></a>
<a href="http://www.neopets.com/shopping/newcatalogue.phtml?list_type=wishlist&user=chizlemons" id="Wishlist">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/wishlist_zps07e938b5.png"></a>
<a href="http://www.neopets.com/neomessages.phtml?type=send&recipient=chizlemons">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/neomail_zps59561979.png"></a>
<a href="http://www.neopets.com/process_neofriend_requests.phtml?_ref_ck=28f8172d5076b634f93e6dd98bd33ce1&dowhat=add_single_neofriend&neofriend_add=chizlemons">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/neofriend_zpse9f7e4a6.png"></a>

</div>

Oh, one more thing. It seems in all browsers there's a huge blank space below the trophies and I can't figure out what causes it. Any guesses?

[Batgirl]

I'm still fairly new to css, so hopefully you will get constructive answers from people with far more expertise but if that doesnt happen, I'll do what i can as an amatuer to help

[Mouseykins]

Ok first off I think you have your images and modules in the header. I would try setting the header to display: none; and then repositioning your modules. The reason I'm suspecting this is at the very top of your trophies module there is a little circle with a question mark in it. That is your username that has been pushed down and partially covered. There is a code you can remove that later as well. With the header completely removed you should still be able to use your current navigation. That should clear up your glitches.

 

However, if your trophies module still has all that blank space underneath it then you'll need to set the height for it.

 

Afterwards if you still need help let me know. :)

[AllTimeMarr]

I guess that should be fixed if you specify a height for your trophies module. And if I were you I'd put it in a scroller.if you user overflow:auto the scroll won't appear until the trophies-content exceed the height.

 

Make it something like this;

#usertrophies {
	position: relative;
	height: 500px !important;
	width: 854px;
	top: -980px;
	left: 5px;
	overflow: auto;
}

By the way, I'd try positioning your modules absolute instead of relative.

[Mouseykins]

I guess that should be fixed if you specify a height for your trophies module. And if I were you I'd put it in a scroller.if you user overflow:auto the scroll won't appear until the trophies-content exceed the height.

 

Make it something like this;

#usertrophies {
	position: relative;
	height: 500px !important;
	width: 854px;
	top: -980px;
	left: 5px;
	overflow: auto;
}

By the way, I'd try positioning your modules absolute instead of relative.

Relative positioning is BETTER then absolute positioning. I already mentioned to use relative positioning on a previous thread by ChizLemons.

She has changed her positioning from absolute to relative and it helped with her initial issues.

 

If the code posted by AllTimeMar doesn't work try this for your height:

max-height:500px !important;

You can change the 500 to any value you want, bigger or smaller, depending on how you want your lookup to be. :)

[chizLemons]

Thank you very much for all the replies!!! I really appreciate it.

I tested all the trophy module suggestions, and none of them removed the blank space! It seems to be something else other than the trophy module... ):

As for trying to remove the header and reposition the modules...I don't know exactly how to do it. When I try removing the header with display: none, the navigation bar disappears with it! Also, I'm trying to include the lookup image again like this:

#brightvale {
 	background: url("http://i57.tinypic.com/2q857gp.png") -10px -0px no-repeat;
	width: 882px;
	height: 1060px;
	border: 0px; }

and it seems to work, except for a 20px space above it that won't go away no matter the top value of the image...

[maikrowsoft]

That lovely space at the bottom of your page is due to all the "top: -xxxxpx" code.

 

Where you have one of those, add "margin-bottom: xxxxpx". For example:

#usertrophies {
	/* other code */
	top: -980px;
	margin-bottom: -980px;
}

Then adjust accordingly.

 

How can you remove #header when you're using it for your background and other page elements? I also can't find #brightvale.

[Mouseykins]

Hmm that's odd. I'll probably have to test it myself to see what the problem is. I'll post back here when I've had a chance to take a look. :)

 

This is my sugesstion. I've taken a look at your code and tweaked a few things for you. I condensed your removal codes and fixed your <br><br>, those should be replaced by paragrapgh tags <p> and </p>.

 

I highly recommend hiding your header with the nav links visible. After that change your main background image to be the one that your using in the header. after doing that you'll need to add another image for your trophies module or add onto your existing image so it fits. The problem with your lookup is that your header is taking up all the room and whatever is specified to be in the content section has been brought up leaving all that blank space.

 

This is the code to use for your header:

#header {visibility:hidden;}
#template_nav {visibility:visible;}

Your cleaned up code is here:

<style>
.footerNifty, .user, .copyright img, .sf, #nst, .sidebar, .brand-mamabar, hr, #ban, #habitarium, #ncmall, .content div b {
	display: none;
}
.contentModule div a img, .contentModule div b {
	display: inline;
}
.medText {
	font-size: 8pt;
	color: #1c391c;
	font-family: tahoma;
}
#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: -30px;
}
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;
}
#userinfo {
	width: 356px;
	height: 243px;
	overflow: visible;
	position: relative;
	left: 495px;
	top: -1200px;
}
#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 img {
	visibility: hidden !important;
}
#usercollections {
	position: relative;
	left: -320px;
	top: -755px;
	width: 318px;
	height: 295px;
}
#usercollections .contentModuleContent {
	background: url("http://i1378.photobucket.com/albums/ah82/lizmoschen/collections_zps6a963501.png");
}
#userneopets {
	overflow: visible;
	position: relative;
	top: -1300px;
	left: 160px;
}
#userneopets img {
	border: 2px solid #1c391c;
	border-radius: 100px;
}
#usershop {
	position: relative;
	display: block;
	width: 179px;
	height: 165px;
	top: -750px;
	left: -265px;
}
#usershop img {
	width: 115px;
	height: 115px;
	border: 1px solid #1c391c;
}
#userneohome {
	position: relative;
	display: block;
	width: 179px;
	height: 165px;
	top: -1060px;
	left: 30px;
}
#userneohome img {
	width: 115px;
	height: 115px;
	border: 1px solid #1c391c;
}
#usertrophies {
	width: 854px;
	position: relative;
	top: -980px;
	left: 5px;
}
#usertrophies img {
	border: 1px solid #1c391c;
}
#chizlemons {
	left: 240px;
	top: -995px;
	width: 377px;
	height: 171px;
	overflow: auto;
	text-align: center;
	position: relative;
	font-size: 8pt;
	color: #1c391c;
	font-family: tahoma;
}
#footer {
	background: url("http://i1378.photobucket.com/albums/ah82/lizmoschen/footer_zpsdfc1016f.png");
	width: 882px;
	height: 164px;
}
#icons {
	width: 500px;
	height: 200px;
	overflow: auto;
	position: relative;
	left: 175px;
	top: -830px;
}
#icons img {
	width: 40px;
	height: 40px;
}
</style>

<div id="chizlemons">
<p>Hello!<br>
I'm still working on my Userlookup, so if there's anything wrong with it either I'm already working on it, or I'd be happy if you point it out!</p>
<p>I'm a 22 years old animation student that loves to procrastinate here. I'm currently saving to buy a Draik egg, and I'm always trying to get trophies. :)</p>
</div>
<div id="icons">
<a href="http://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=owner&search_string=chizlemons" id="Trades">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/trades_zps3afb549e.png"></a>
<a href="http://www.neopets.com/genie.phtml?type=find_user&auction_username=chizlemons" id="Auctions">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/auctions_zpsc67cb227.png"></a>
<a href="http://www.neopets.com/shopping/newcatalogue.phtml?list_type=wishlist&user=chizlemons" id="Wishlist">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/wishlist_zps07e938b5.png"></a>
<a href="http://www.neopets.com/neomessages.phtml?type=send&recipient=chizlemons">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/neomail_zps59561979.png"></a>
<a href="http://www.neopets.com/process_neofriend_requests.phtml?_ref_ck=28f8172d5076b634f93e6dd98bd33ce1&dowhat=add_single_neofriend&neofriend_add=chizlemons">
<img src="//images.weserv.nl/?url=http://i1378.photobucket.com/albums/ah82/lizmoschen/neofriend_zpse9f7e4a6.png"></a>

</div>

Additionally (though I don't recommend this) you could just resize your content module and that might work.

[chizLemons]

Thank you so much!!! This is harder than it looks...

I'm using your condensed code now, changed the image to the background and the header is gone, and it almost works! It looks better on IE now although only the neohome and neopet modules are a little off. There's 2 new issues now...you can see it here.

Instead of a blank space, there's a small space between the footer and the trophies that I can't cover with the trophy module background. Setting a height doesn't seem to work to solve this. I can set a top value on the footer, but then the space shows under it...

Also, the links in the #icons div aren't clickable anymore. If it's too much trouble to solve them then I might just remove them and just link these things in my description box...

[maikrowsoft]

For your icons, add: "z-index: 999;" to #icons.

 

Blank space looks to be caused by "top: xxxpx;" codes, though I'm not sure. Haven't had time to take a good look.

Edit: I suppose you can fix the blank space by altering #usertrophies from "top: 30px;" to "top: 10px;" and add "top: -45px;" to #footer.

[chizLemons]

Thank you maikrowsoft! It works perfectly. There's still a space under the footer, but it looks nicer than before. I'll leave it like that. :)

...now there's still some compatibility problems between browsers that makes absolutely no sense to me!

It looks exactly the way I want it to on Chrome. As for Firefox and IE, it looks like this:

 

The userneopets and userneohome modules are off! And they look different in each browser...

Here's the code for these modules:

#userneopets {
    width: 557px; 
	height: 222px; 
	overflow: visible;
	position: relative;
	top: -314px;
	left: 160px;
}

#userneohome { 
	width: 202px;
	height: 142px;
	position: relative;
	top: -80px;
	left: -62px;
}

[maikrowsoft]

Nothing you can do about Internet Explorer (if you're referring to the border-radius issue). Before anyone says this is because Internet Explorer is bad - it's actually Neopets' fault. They've set the entire site to display in IE8 compatibility mode (WHY!?) through the meta tag, from what I can see. This means that newer CSS properties such as border-radius won't work. Running IE in IE9/10/11 emulation works perfectly.

 

 

Will look at dear old Firefox when I can.

Edit: I'm afraid I'm not sure why Firefox doesn't display the same way as the others. Here's a screenshot of the borders though, hopefully @Mouseykins will figure it out.

 

[chizLemons]

Sorry took so long to answer! Thank you for your reply!
Well, it's still looks ok without the round border, so it's ok. :P

 

I don't know how that works exactly, but I've been tweaking with the code and after adding display: inline; to the neohome module it's a little less off! It's still not in the exact same position, but at least it's inside the layout box. I don't know how that code works though, so I don't know the reason. I will be changing the code little by little and try to figure out how to make it look exactly the same in all browsers, but it's good enough for now!

 

Thank you very much for all your help!