Positioning in Other Browsers

[degenius]

Hello! I made a new userlookup and it displays correctly in Chrome but in IE the image at the bottom has moved to left. A friend told me that it does the same thing in Safari as well. The image is supposed sit in the bottom left corner below my trophies. How do I make it show up correctly in all browsers? I tried changing the type of positioning to relative but that moved everything else as well. I don't know what else to do. The id for the image is #banner and my code is below. Thanks in advance for your help!

 

 

<style>

#header, #footer, #ban, .brand-mamabar, hr, #userneohome, #habitarium, #ncmall {

display: none;

}

.content div b, .content div a img {

display: none;

}

.contentModule div a img, .contentModule div b {

display: inline;

}

body {

background-image: url("http://imageshack.com/a/img839/9199/wtua.jpg");

position: relative;

}

#main {

border: none;

background: #ffffff;

width: 700px;

margin-top: 0px;

margin-left: 250px;

margin-bottom: 300px;

z-index: 100;

}

#content {

width: 700px;

background: none;

z-index: 100;

}

.contentModule, .contentModuleContent {

background: none;

border: none;

}

.contentModuleTable {

border: none;

}

.contentModuleHeaderAlt, .contentModuleHeader {

font: 18pt georgia;

color: #f343e3;

background: none;

}

a:link, a:visited, a:active {

color: #45D724;

font: 7pt tahoma;

}

a:hover {

color: #cd84b7;

font: 7pt tahoma;

}

td, .medText, body {

font-size: 7pt;

font-family: tahoma;

color: #888;

line-height: 9.5pt;

}

h1 {

color: #f343e3;

font: 18pt tahoma;

text-align: center;

}

#usertrophies {

width: 700px;

}

#userinfo .medText table table img {

visibility: visible;

}

#userneopets {

;

width: 700px;

height: 300px;

}

#banner {

position: absolute;

top: 1150px;

left: 0px;

bottom: 0px;

z-index: 200;

}

a.hoverhere {

display: inline-block;

background: #71bac3;

padding: 5px;

color: #fff;

font-size: 12px;

line-height: 18px;

}

a.hoverhere .popup {

background: #b7519a;

width: 300px;

padding: 20px;

font-size: 7pt;

font-family: tahoma;

color: #fff;

line-height: 9.5pt;

display: none;

top: 0px;

right: 0px;

z-index: 1;

}

a.hoverhere:hover .popups {

display: block;

}

a.hoverhere .popups {

background: #b7519a;

width: 300px;

padding: 20px;

font-size: 7pt;

font-family: tahoma;

color: #fff;

line-height: 9.5pt;

display: none;

top: 0px;

left: 0px;

z-index: 1;

}

a.hoverhere:hover .popup {

display: block;

}

a.nav {

display: inline-block;

background: #71bac3;

padding: 5px;

color: #fff;

font-size: 12px;

line-height: 18px;

}

a.nav:hover {

display: inline-block;

background: #b7519a;

padding: 5px;

color: #fff;

font-size: 12px;

line-height: 18px;

}

</style>

<center>

<a class="nav" href="/myaccount.phtml">my account</a>

<a class="nav" href="/customise/">customise</a>

<a class="nav" href="/games/arcade.phtml">games</a>

<a class="nav" href="/explore.phtml">explore</a>

<a class="nav" href="/nf.phtml">news</a>

<a class="nav" href="/community/index.phtml">community</a>

<a class="nav" href="/objects.phtml">shops</a>

<a class="nav" href="/mall/index.phtml">nc mall</a>

</center>

<img src="http://imageshack.com/a/img20/8466/xdf0.png" id="banner"><p><a class="hoverhere" href="#nowhere" style="position: relative;">

Hello!

<span class="popup" style="position: absolute;">

Hi, I'm Deg! Welcome to my userlookup. I spend way to much time on Neo, that's all you really need to know!

While you are here be sure to check out some of my pages! My avatar collection is to the right, and beside that is my blog thing about a dream of mine that finally came true. If your interested in what I've been doing around Neo, check out my goals!

Have a good day!<br>Toodles

</span>

</a>

<a class="nav" href="/~Naldune" style="position: relative;">

Avatars

</a>

<a class="nav" href="/~Meldra" style="position: relative;">

Dream

</a>

<a class="hoverhere" href="#nowhere" style="position: relative;">

Goals

<span class="popups" style="position: absolute;">

Here are some of my goals:

<br>Have more avatars than super_almoner [o]

<br>Obtain 300 avatars [o]

<br>Train Naldune [ ]

<br>Level 50 Hab...again [o]

<br>75 Kads fed (65 more to go!) [ ]

<br>Neopoints! (70% completed) [ ]

<br>25 Game Trophies [ ]

<br>200 hundred stamps in Album [ ]

<br>Desert Xweetok [ ]

</span>

</a>

<br><br><img src="http://cgi.boingdragon.com/count/degcounter/1.gif"></p>

 

Good, in chrome:

 

Bad: in IE

 

This topic has been edited by a member of staff (Anime).
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 Help to Computers & Programming.

[Rebecca~]

I can't help (sorry! D:), but I'm using Chrome and it's not positioned right for me either. It's a very cute lookup though. :)

[yasha]

Watching it on chrome as well and it's not right for me either... not sure how to fix that either, sorry.

[donutdraik]

Unfortunately I'm just beginning to learn about coding so I can't offer any advice, but it's showing up properly for me in Firefox!

[Mouseykins]

try changing position: absolute; to position: relative; and tweak the values.

[Xepha]

My personal advice would be. Never use "position" on Neopets. Instead use margins.

[degenius]

Thank for the replies everyone! It is weird that it only works in chrome for me...

 

So I tried changing the position to relative and removing the position. Both allowed me to get the banner where I want it by changing the margins but it introduced a HUGE gap between my navigation and my own links. It also causes my userinfo, collections, and shop to extend far left of the screen creating a horizontal scroll. By changing the margins of my nav/links, I can't fix the top/bottom/height but left and right is ok. So the gap isn't going away. I also couldn't figure out how to change the user info stuff. Changing the width or margins didn't work for #userinfo,#usercollections, #usershop (I added it to the code later so its not above).

 

Here is what it looks like now:

 

Once again, any advice is greatly appreciated!

[Xepha]

Did you try using negative numbers to push things back up ?

[degenius]

Did you try using negative numbers to push things back up ?

I did! Most of the time changing the numbers didn't work. I realized I could lose the gap by moving #content rather than the other ones. But the userinfo still stretched.

 

I think I figured out the problem....using relative positioning changes the images position relative to its original position. Its original position was between my navigation and my links :P so that is why there was a big gap. If I remove my banner image all together all my problems are solved. No positioning does the same thing but I couldn't overlap it so that's not going to work.

Theoretically I could place my image above my navigation, use relative positioning and then move #content to hide the gap......but it didn't work when I tried it. I'll just keep at it, I guess.

 

For now I made my banner cut off in Chrome and it seems that it displays properly in Safari and IE but not in firefox. Firefox looks the same as Chrome (for me).

If someone using Chrome can check how it looks for them, and let me know if its cut off or not then I'll just make it display properly for majority of browsers. If its a tie I plan to favour chrome and firefox. My chrome is up to date, I don't know why it seems to act like firefox... Thank you for your help!

 

EDIT: I think I got it to work!! *sobs quietly in a corner* It should display properly in all browsers! :happydance:

[Xepha]

This is how it looks in Firefox for me... and it's not unpleasant.

 

[Duma]

Looks good in firefox and the bottom now looks good in IE as well. The top however, looks good in firefox (Yay Firefox) but in IE the top white bar isn't as wide as the window.