Firefox layout help

[xine]

While making my new guild layout, I had a little problem, It works perfectly in IE, but in firefox, one of the images doesn't stand on the right place, even though, In IE it works perfectly. Somebody knows why this is? Also, in Firefox the background image doesn't chow.

The layout can be found here: http://www.neopets.com/guilds/guild.phtml?id=3402634

 

Here's the code:

<style /> 

SELECTOR {
ATTRIBUTE: PROPERTY;
}
#footer, .sidebar, .user, #nst {
display: none;
}
table, td {
background: transparent;
}
#main { 
position: absolute;
left: 0px; 
top: 222px; 
width: 650px; 
height: auto; 
background: transparent;
border: 0px;  
}

body {
background: #FFFFFF url('http://img360.imageshack.us/img360/7761/backgroundwh1fw2.png') top left repeat-y;
}
#header {
position: absolute;
left: 0px; 
top: -222px;  
	width: 1000px;
height: 780px; 
background: transparent url('http://img171.imageshack.us/img171/4585/topup9.png') top left no-repeat; 
border: 0px;
       z-index: -1;
}
#navigation {
width: 800px;
}
#navigation a {
margin-right: 6px;
}

#template_nav {
margin-left: -135px;
margin-top: -14px;
       }
ul.dropdown {
border: 1px solid #000000; 
background: #EFEFEF;
       } 
#desc {
position: absolute;
left: 200px; 
top: 215px;
width: 605px;
}
a:link, a:visited {
color: #0A2406;
}

a:hover {
color: #0A2406;
}
.content h1 { 
font: 14px; 
color: #6F986C; 
font-variant: small-caps;
}



</style />



<div id="desc">

<h1>	TITLE HERE	</h1>

This is where you write your guild content :)  
Links, welcome message, news/updates, council chat - whatever you want!

</div>

<img src='http://img135.imageshack.us/img135/3345/hideimgwhguildwthemeyw4.png' width="1000px" height="199px" style="position:absolute; top:5; left:0;"> 

 

PS: While making this layout, I used the the daily neopets Guild layout tutorial, but Because my image was bigger, I had to change many things.

[elcid42]

Having a look at the page in both IE7 and FF3, I assume the big issue is the repeat of your main image halfway down the page. This is easily fixed as you have an additional entry for the image in your code - the very last line of the code source you put in your post.

<img src='http://img135.imageshack.us/img135/3345/hideimgwhguildwthemeyw4.png' width="1000px" height="199px" style="position:absolute; top:5; left:0;"> </font>

Take this out and all should be OK. FF (plus Opera and Chrome) reads stray entries differently to IE and will display everything it finds somewhere.

 

Also, one thing pther thing that looks wrong to me is a mixing of html standards which will confuse some browsers. The start and end of your style sections are in XML standard but the document type for Neopets is HTML standard. The opening

<style />

at the top of the code should be repleaced with

<style>

and the closing

</style />

should be

</style>

. Again some browsers will get slightly confused by what is technically illegal code.

 

Your background image is an issue because when I try to access it directly it is forbidden. Maybe best to create a new one and upload to a same area on imagshack as your main image.

 

Hopefully this will work, but shout if not.

[Izzy ♥]

Elcid, the code filters on Neopets don't let you use code unless you add the extra space and / at the end... its a glitch at the moment. That doesn't stop any of the codes working ;) The style tags must be left like that, or it won't work at all.

 

Anyways, Xine - very nice job on the layout! One of the best I've seen made with our tutorial :) You've actually got it mostly right, just that last line:

<img src='http://img135.imageshack.us/img135/3345/hideimgwhguildwthemeyw4.png' width="1000px" height="199px" style="position:absolute; top:5; left:0;">

You need to add "px" after yout top and left values. IE will automatically add it, which is why it looks okay on that - for non-IE browsers, just add the "px" in and it'll all work fine!

 

On a side note, you don't need the SELECTOR {ATTRIBUTE: PROPERTY;} bit in your code lol That was just me explaning how CSS codes are set out - it doesn't actually do anything xD

[xine]

Thank you both really much! ^_^

Normally it should work now.

And Isabel, The tutorial was very helpful, expect that if you have a bigger image (just like me) the image covers the guild council and most of the links. That's why I had troubles.

Maybe it would be useful if there is a note on the tutorial with how to solve that problem? (it took me an hour...)

This is what I've done:

 

first you have to put "z-index: -1;" at the "header" section. It looks like this:

#header {
position: absolute;
left: 0px; 
top: -222px;  
	width: 1000px;
height: 780px; 
background: transparent url('http://img171.imageshack.us/img171/4585/topup9.png') top left no-repeat; 
border: 0px;
       z-index: -1;
}

 

Then the problem is mostly solved, expect that you can see the guild icon, the neighbourhood and the guild navigation links(Guild Home | Guild Help | My Guild )

It can be you don't care if it shows, but I found it really annoying.

So you have to take a piece out of your header image (width:1000px height:199px) exactly 227 pixels from the top. and at the bottom of the code you should add:

<img src='http://img135.imageshack.us/img135/3345/hideimgwhguildwthemeyw4.png' width="1000px" height="199px" style="position:absolute; top:5; left:0;">

 

just an advice though, because it was really unmotivating having to spend hours on something that doesn't work.

[Izzy ♥]

Actually, there is a simple way to deal with images that are larger written into the tutorial already lol See where you've used "top: -222px"? The final paragraph of the step two tells you to subtract 208 from your image's height. The answer is only 222px if your image is the same height as my template ^_^

 

The problem with yours is, the image is designed to go under the text. If I'd been trying to do that, I probably would have put the image as the background of the #main div and then just had the part of it that wasn't under text as another layer in the #header div. I make most of my pet lookups that way :) That kind of detail is sort of beyond the scope of the tutorial though, and the way you've done it works fine for your needs.

 

I'm not a big fan of using z-indexes on Neo, since they're mildly unpredictable with Neo's code - one that works for IE often won't be the correct one for FF and vice versa. Also, they can be quite confusing for people who don't know any CSS or HTML, and they were my target for the tutorial.

[elcid42]

Elcid, the code filters on Neopets don't let you use code unless you add the extra space and / at the end... its a glitch at the moment. That doesn't stop any of the codes working ;) The style tags must be left like that, or it won't work at all.

 

Thats interesting. As a web optimisation man myself getting the code right is a bit of a thing of mine and I am always finding issues with Neopets page code. One day I will get some time to sort out my own lookup and then maybe I will see better all the "strangenesses". If only I was artistic :sad01_anim: