↑ to the top | index
2xS = doubleSTANDARD
newest additions: does it collapse? good petpage news browser poll results

Welcome to your new best friend.

Double Standard is your coding resource. Not only will you find helpful tips and informative articles, you'll have access to quality templates to get you started on a project. If you're looking for something in particular, try the index. No matter your skill level, Double Standard aims to be your go-to site.

Looking for something specific? Try the index!

A note on information accuracy

Double Standard is no longer being updated. Please keep in mind that some of this information will eventually go out of date! Check the date of each post to get an idea of its relevance. If you're afraid it's old, do some searching!

Welcome to Double Standard's new home! After some trouble after my last "update", the original /~doubleSTANDARD pet was deleted, and I've given up and decided to close 2xS indefinitely. This petpage will remain intact, as it was, in case you still want to use it as reference. If you continue to link to 2xS, please change your links! I won't be around Neopets much anymore either, so I won't be able to answer many code questions anymore. It's been a slice, guys. Thank you for all your support!

Learn about Double Standard and the girl behind it.

I aim to make Double Standard a fairly authoritative coding resource site, with a little design advice thrown in for good measure. I try to adapt "real world" techniques for Neopets and suggest better coding strategies that you may not have otherwise thought of. None of this is "new" information, but hopefully the collection will help you on your adventures! Oh, and I'm Arie.

All of the content on Double Standard is written by me unless otherwise stated. All premade templates are for your use, so long as you credit Double Standard where you are using the code.

These are buttons you can use to support me.

Buttons that I did not make myself are linked back to their creators.

to the top ↑ | index

Margins Collapse, Padding Doesn't

added Feb 1, 2013

This little-known fact trips me up a lot when I'm digging through other people's work. I'll wonder why nothing obeys the set margins, or why there's so much space where there shouldn't be. To expand on the title, when working with CSS, margins collapse against other margins; padding does not collapse against other margins or other padding.

Let me lay it out for you with an example. You have two divs one on top of another. Assume you've used a reset to make sure that to start, all margins and padding are set to 0. You give the top div a margin of 20px and the bottom div a margin of 30px. The larger one wins. Always. So between your two divs, you will have only 30px of space, not 50px like you'd imagine. However, if you had 20px of padding on the top and 30px of padding on the bottom, it behaves like you'd think and gives you 50px of space between the divs.

Try experimenting on your own to see it in action. Also keep in mind that floats and positioning plays havoc with margins and padding (in certain scenarios), so to get a good, controlled test going, you'll need to use a reset and avoid floating or positioning your test elements.

Come across anything strange? Am I totally out to lunch? Give me a shout!

to the top ↑ | index

Good News For Petpage Coders

added Feb 7, 2013

I'm brain dead, so I'm going to let these messages speak for themselves.

(Hover for full size. Displayed with permission from Zixi.)

LIEK OMG GUYS, WE MIGHT GET 21ST CENTURY CODING ON PETPAGES SOON!

I'm not getting my hopes too high on it being in the very near future, but it's nice to know that it's "on the radar", as Zixi put it.

Oh, and here's that doctype article mentioned above.

What do you think? Is this as exciting as I think it is, or are doctypes overrated? Let me hear it!

to the top ↑ | index

Poll: What browser do you use most often on Neopets?

added Jan 13, 2013

And the results are in! I took significantly less time to collect this poll since I got a whopping 180 responses in the first two days. (Yay!) Here are the stats:

Browser Use: Firefox - 25%, Chrome - 21%, Safari - 3%, Internet Explorer - 6%, Opera - 2%, Other - 2%

The coder in me is pleased with these results. I was surprised that Chrome has such a lead over Firefox (I expected them to be a little more even), but I'm not at all shocked that IE use is greater than Safari or Opera.

There's more

Of those that gave me their browser version, 91% were using the latest version of their browser. That's good news. It means we can code for modern browsers without leaving too many people behind. I wouldn't do it at the expense of your users who use older browsers, though. If the new features on your page don't work, you should at least provide them with an alternative.

Keep in mind...

Interesting

Some Chrome users specifically stated that they don't use Firefox because it lags for them and Chrome runs smoother. Maybe this is the reason why Chrome's stats are so much higher than Firefox's?

Collection

In case you're wondering about how I got these results, I'll share with you. I created boards on the AC, PC, GC and HC from Jan 7-8 asking what browser people use, along with their browser version. If people supplied more than one response, I asked them to choose which they use more often or if they were equal, which was their favourite. I also had the question at the top of this site with links to neomail me. Browser version was an optional part of the poll, and not everyone gave it.

And that's it! Got any bursts of inspiration regarding these results? Think I can improve my methods? Contact me.

to the top ↑ | index

Controlling The Petpage Copyright Fluff

added Jan 1, 2013

These days, petpage coders have either accepted the fact that the copyright fluff is going to be part of their page or they try to pretend it doesn't exist. Ultimately, you have two choices: you can work with it, or you can hide it.

default petpage copyright fluff

Before we get into how you can control or hide the fluff, there are a few things about it that you should know:

1. TNT's filters will automatically close any opened divs for you, so you can't control the div that TNT's copyright fluff goes in anymore.

2. If you're hiding the fluff, you may get a warning from TNT about hiding their copyright notice (though I've yet to meet anyone who's had this happen).

3. The copyright fluff is centered. (With a center tag!) If your layout is positioned to the right or left (even if it's not absolutely positioned!), your layout may not cover the copyright text at all screen sizes.
partly hidden petpage copyright fluff

4. There are several br tags that come before the copyright text. These will act like a margin that you can't control (effectively).

Hiding The Fluff

To hide the copyright, you need to set it to display: none; This usually won't be a problem, but if you use the center tag in your code (please don't), you need to make sure you set those to display: block; Here's how:

center { display: none; }

If your center tag is contained in another div select it using that divs id or class:

#wrapper center { display: block; }

Easy peasy, yeah? But I don't advocate hiding the fluff, so here's another solution:

Controlling The Fluff

To control the copyright – that is, to position it in a place that it's not naturally inclined to go, like 600px down and 200px to the left – you simply have to decide where you want your fluff to go and then add CSS that reflects that:

Here's an example of a situation where I wanted the fluff to line up with my content instead of always being centered on the page:

aligned petpage copyright fluff

Again, with this method, you have to be careful not to use tag in your code (or at least to overwrite these styles by adding a class or ID).

Another Option

You have one more option — and this is my favourite, because I'm a lazy coder:

Leave it where it is.

Since the fluff is grey, centered and padded with all those ugly tags, it's not all that obtrusive. Unless your entire layout is floated or positioned, it'll naturally sit at the end of your page, like it does here on 2xS.

Do you have other suggestions? Questions? A specific scenario that's not covered in this article? Contact me!

to the top ↑ | index

When The "Save Changes" Button On Your Petpage Preview Disappears

added Dec 21, 2012

A lot of people have a problem finding the "Save Changes" button on petpage previews because of the way they code their page. You have to remember that when you code your petpages, wherever the "Save Changes" button appears is where the copyright fluff will appear. If you're hiding the copyright fluff, you're also hiding your button.

Honestly, I don't advocate hiding the copyright message. It's easier to leave it in place than to hide it. If you're having problems taming the fluff, check out this article, which outlines how you can position it where you want or how to make sure it's hidden effectively.

If you are going to hide the fluff (and therefore the "Save Changes" button) on your page, though, here's my one and only tip:

Use Firefox or Chrome to update your petpage. On the preview, go to View » Page Style » No Style. (Firefox has this functionality built in. If you use Chrome, you may have to install an addon.) Then you'll be able to scroll all the way to the bottom of your content to see the button. Afterwards, you can turn styles back on by going to View » Page Style » Basic Styles (or the equivalent).

Suggestions? Comments? Send them to me!

to the top ↑ | index
to the top ↑ | index

We Need To Help The Newbies Again

added Dec 19, 2012

I'm not suggesting that we all need to rush the Newbies board and explain how Neopets works. The newbies I'm referring to are people who are new to design and coding. I believe that if we want to see the graphic community on Neo grow, we need to go back to helping each other instead of waving our skills in their faces, laughing maniacally and dancing just out of reach.

Maybe I'm too idealistic for this crowd, but the way I see it, the only way we're going to improve our own skills is through healthy competition and sharing ideas. None of us think exactly the same as another. We all approach problems differently. Someone might have a slightly better solution to an issue than I do. And when I learn the slightly better method, I can improve upon it using my own experience, and then others can improve upon my improvement, and we keep building each other up until we have something... well, amazing. That's how awesomeness is created: not by yourself, but as a vibrant community.

But how are we supposed to improve upon ideas if there's no one to share with? And how are we supposed to motivate ourselves to find something new and exciting if there's no one around to best us? Competing with yourself is a drag, let's face it. And the amount of designers and coders on Neopets right now is sad. We may not all have outstanding raw talent, but anyone can bring perspective and skill to the community if they learn about the topic.

So here's my call to action: Take the egos down a notch. (You don't know everything. I don't know everything!) Encourage new coders and designers to learn by allowing them to ask questions without being ridiculed or criticized. Speaking of criticism, constructive criticism only, please! Many people who face the obnoxious wrath of defensive elitists won't have the courage to try again, and then how are they supposed to get any better?

If my begging hasn't convinced you yet, consider this: Neopets would be prettier if more people could design better.

to the top ↑ | index

Guild Reset CSS

added Dec 15, 2012

I have this tip about reseting browser defaults on petpages and it occured to me that the same can be done on guilds. Except on a guild, you're not reseting browser defaults so much as you're reseting TNT's existing styles. At any rate, I used to use this in every guild layout I made, because it was generic and I didn't want to think about it more than once. Now you're free to use and edit it if you wish!

In case you're wondering what it all does:

The first line resets the most irritating styles on #main: the 1000px width and the centering.

The second line removes backgrounds from the guild stats and "guild content" area, basically making the wide content area invisible.

Line three removes a whole bunch of things, namely your guild logo (you'll have to replace that with your guild's name as per this tip), the guild's name, neighbourhood and description, the header, footer, a random line across the top of the page (lovely), the sidebar and the "Guild Home | Guild Help | My Guild" nav.

The last line is a template for moving the guild stats around. Add your prefered margin values to move the stats to the right, left, up or down.

to the top ↑ | index

Move Guild Stats

added Dec 13, 2012

Back when I used to make guild layouts on a regular basis, I had this bit of "reset code" I used every time (I've posted it here in case you want to use it). It included code to remove the background, header, footer, sidebar, guild logo, guild neighbourhood and that irritating "Guild Home | Guild Help | My Guild" nav; move the guild stats off to the side; and some guild links that were always present on my guild homepage.

So when someone came to me and said their stats-moving code wasn't working in IE, I was confounded. Mine had always worked, but I couldn't remember what I did to make it that way since I always copied and pasted. Now that I've done some testing and I'm certain this works in IE, here's how to move your guild sidebar anywhere on the page without bugs in IE:

1. Don't change the width of #main or #content. It's common to do so, but that's the reason the bug happens in IE. You can get the result you want (most likely) without adjusting this property. Instead, use display: none; to hide the elements you'd ordinarily cut out with the adjusted width and set background: none; on all elements showing unwanted backgrounds.

2. Reset #main with the following code: #main { width: 100%; border: 0; margin: 0; padding: 0; }. This will allow you to position your guild stats from the very top left corner of your browser instead of a random place in the middle of the page.

3. Set the margins on #content to whatever values you'd use if you were positioning this. (Say, margin-top: 20px; margin-left: 800px;)

If anyone knows what causes this bug or a better way of doing this, please contact me!

to the top ↑ | index

Hex Code Shorthand

added Dec 12, 2012

I set out to write about this the other day, and ended up with this instead, but it's an important issue and I feel the need to come back to it.

Did you know you can shorten CSS/HTML hex colour codes to 3 digits instead of 6? The only catch is that the first and second digits are the same, the third and fourth digits are the same, and the fifth and sixth digits are the same. Basically, it has to follow a pattern:

#xxyyzz

You can then shorten that to

#xyz

Some examples:
#FFFFFF#FFF
#000066#006
#DD5511#D51

(These are similar to the web safe colours I talked about in my infographic, but you can use any number or letter from A-F, not just the 5 cases I mentioned there.)

This is great if you need to hammer out some code really quick, but don't use this for your final product; always expand them to 6 digits whenever possible. The reason is that IE doesn't recognize 3-digit hex codes (not even IE9), and will simply display white or whatever default is set. This also applies to every other instance you can use hex codes, like in Neoboard fonts or guild preset colour schemes.

So if you just learned about these 3-digit beasts, don't get too excited. If you've been using them regularly, curb that habit fast!

to the top ↑ | index

Loosely

added Dec 10, 2012

Read my note about templates before continuing. (It's for your own good.)

This template is meant for sites with lots of content that want the typical banner + sidebar + content formula with a few extras. It includes a horizontal navigation, footer, two feature boxes and an optional feature area in the banner. The code is easily customizable: Flip the sidebar to the left or right, take out or put in the banner feature, make the top nav and footer full-width or included in the wrapper. Essentially, there's just one version of this code, but I've modified it slightly into a second variation (I may have changed two lines of CSS) just to give you an idea of what's possible.

If you have any questions, find any problems with the template or have suggestions to make the code more efficient/less confusing, please contact me!

BETA TESTING Loosely is brand new code available for your use. Because of this, I'd really appreciate it if you test them out for me: Try to use them. If you break it somehow, let me know. If something was really confusing, let me know. If none of it makes sense to you at all, let me know. That way I can improve the code (if necessary), and more importantly, improve the instructions that come with the code. Once I'm confident that these templates are going to be useable for intermediate coders, this message will come down, but I'd still love to hear any suggestions or (try to) fix any issues.

version 1

Loosely v1 - a standard wide layout with full-width fixed nav and footer.

This is a standard wide layout with a banner, top (fixed) horizontal navigation, a footer, and featured content in the banner area.

version 2

Loosely v2 - a skinny, contained, generic layout.

This version shows the banner and footer inside the wrapper and eliminates the featured content in the banner area. It's also narrower, which is super easy to change!

to the top ↑ | index

Hex Color Codes

added Dec 6, 2012

This tip was inspired by an IE bug (which I never got around to addressing in this tip, ironically, but is covered here), then turned into a Photoshop experiment, and grew into this... masterpiece. At any rate, enjoy. (Give it a second to load.)

Time to learn something about hex codes!
to the top ↑ | index

Poll: Do you visit Neopets on your phone/iPod/other mobile device?

results compiled Dec 6, 2012

Mobile poll results: Always - 0%; Half - 18%; Sometimes - 60%; Never: 22%

Random Observations

Results were collected from November 28, 2012 to December 6, 2012 through neomail and Neoboards on the HC, GC and PC. Got suggestions for improving my methods?

to the top ↑ | index

Pop-Ups On Hover

added Nov 27, 2012

The title is slightly misleading, but I couldn't think of a better way to separate this concept from general hover effects you'd see on links. Here's what I'm talking about:

hover here » Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ante in tellus semper fermentum. Mauris commodo massa vel justo porttitor scelerisque. Donec quis facilisis ligula. Integer ligula dui, cursus non ullamcorper ut, aliquam ut magna. Sed et diam odio. Pellentesque fringilla, urna sit amet blandit ultricies, sapien orci placerat est, vel ultricies tortor augue non nulla.

Keep in mind as you're reading this, though, that once you've got the basic concept down, there is so much that you can do with this idea. Here's my word of caution, front and center, though: Don't use this for the sake of using it. Rein yourself in and only use hover pop-ups (or whatever you come up with) when it actually fits your content and purpose of your page. So unless the purpose of your page is to wow people with your coding prowess, don't use this just because you know how. (And that's the end of my mini-rant.)

First a little theory/disclaimer/more talk before the tutorial gets started. Remember the IE hover issue? :hover only works (in IE) on a elements (ie. links). We can get around this by wrapping our code in a link, but that causes another issue: it's impossible to put links within the content of your pop-up (because you're never ever ever allowed to have a link within a link). Therefore, this tutorial assumes that:

  1. you want this effect to work in IE as well as every useful, modern, hip browser.
  2. you don't have any other links in the pop-up content.

Actually moving on now!

HTML

To begin, we'll get our HTML in place. (I'm sensing a pattern in my tutorials, are you?) We need two things: something to appear on hover, and something to hover over. In theory, these things could be almost anything, but for this tutorial, we're going to use a link and a span:

What you need to take from this section is that the pop-up needs to be inside the thing we're hovering over. The link goes nowhere; it's just a vehicle for our pop-up. I've filled the pop-up with Latin fluff, but you could put images, text, or whatever you want except links.

Styles

Let's put some basic styling on there so that it's not default. None of the following has any bearing on the pop-up functionality, so if you feel like leaving this out, please do!

Here's the real styling, the stuff that makes it work:

This tells the page to hide the popup until you need it. Now you add the following to tell the page to display the popup span when the user hovers over it:

This works because you're specifying .popup only when the link is being hovered over (a.hoverhere:hover).

If you leave it this way, your popup is going to move the rest of your content when it appears, and that's usually not what you want. So we'll add positioning to take it out of the flow of content:

In your HTML, you need to add the position declarations:

The position: relative; on the link is there so that the span is positioned relative to the link instead of the entire page. In this case, it'll be flush left with the link and 15 pixels down. You can change those numbers to whatever works for your content.

And that's it!

Easy as pie, right? As always, if you have suggestions or comments or questions, please send them to me! If I get a lot of suggestions for how to do this differently, I might start another post with a list! On top of that, if you have ideas for how you can use this, I'll make a list of those too!

to the top ↑ | index

IE And Hover Effects

added Nov 27, 2012

After mentioning this in so many articles and tutorials and conversations, I decided to actually lay this out in case someone wasn't aware.

IE only acknowledges hover effects on a elements.* That means that if you have

li:hover { background: green; }

somewhere in your code, IE will completely ignore this. If an IE user hovers over that li, they simply won't see the background change to green.

You can wrap almost anything you want inside an a tag and put the hover effects on the a:hover so that they work in IE, such as this:

a:hover li { background: green; }

There are two points to be aware of when you do this:

If this won't work for you, you can simply leave IE users out. I don't object to this so long as it's not necessary to the experience of your page. If no hover effects means no content, that's probably a bad thing for your users.

*Exception: IE9 finally respects the :hover pseudo-class on non-link elements in strict mode. This means IE9+ will show all your fancy hover effects on everything except petpages, which always display in quirks mode. (An explanation of quirks mode and what triggers it can be found in this article.)

to the top ↑ | index

CSS3 Properties

added Nov 11, 2012 | updated Nov 27, 2012

There are a few "new" CSS3 properties that are actually really interesting to use and play with, especially on Neo. (The trick is not to use them for the sake of using them.) That said, a lot of them don't work in certain situations, so I figured I'd go over a few of them here.

A few notes: So far all of these properties only work on guilds and petlookups, but not petpages or userlookups, and then, only in inline styles (with one exception). (That means I can't demonstrate any live effects for you. Sorry!) Some browser versions don't support these properties at all. Other browsers may require vendor-specific prefixes (such as -moz- or -webkit-) to work, and I've included that in the notes for each property.


transition

transition is meant to be used when working with hover effects. With it, you can smoothly transition from one state to the next. (Imagine a background colour gradually fading from grey to purple.) Here's how you use it:

You'll notice that I've got multiple values in there. That's because transition is actually short-form for transition-property, transition-duration, transition-timing-function and transition-delay. I won't go over the last two because you'd probably only need them for very specific cases.

transition-property is the property (or properties) that you want to be animated. In my example, I've used background, but you can also use the keyword all to have all changeable properties animate on hover. (This is the default.) If you want to list more than one property, separate them with commas, like this: transition-property: background, opacity;

transition-duration is how long the animation should last. (The s stands for seconds. Remember to include it!)

Here's the tricky part. Because this property is still sort of new, most browsers require a specific "vendor prefix" to make it work. Currently, Chrome, Firefox 16+, IE10 and Opera 12.1+ accept transition as it is. (IE9 and below do not support this property at all.) To make it work in Safari, Firefox 15 and under, and Opera 12.0 and under, you need to add the following properties as well: -webkit-transition, -moz-transition, -o-transition. That means your code will look like this:

(If you don't have any Opera viewers, feel free to leave that last one out for the sake of saving precious characters!)

** Actually, transition is the one exception to the inline-styles rule. On guild layouts you can use this in your regular stylesheets, but on userlookups, you still have to put the CSS within the tags like above.


border-radius

border-radius will give a box rounded corners. That's pretty nifty! It's also a short-form, and it follows a similar pattern to margin and padding short-form. (That means you can put all four corners into one declaration and use the order top-left top-right bottom-right bottom-left.) You can use it like this:

In the past, you needed to use "vendor prefixes" to make it work in all browsers, but newer versions of Chrome (5.0+), Firefox (4.0+), Safari (5.0+), Opera (10.5+) and even IE (9+) all accept border-radius just as it is.

(You can also do some funky elliptical borders too by adding in extra properties, but I'll let you do your own research for the sake of brevity.)


box-shadow

box-shadow will create a drop-shadow on any non-text element that you want. It's a pretty awesome alternative to fixed-size image backgrounds, but it's unfortunate that it's so poorly supported on Neo. At any rate, in the hope that it will eventually be allowed on all pages, here's how it works:

You can use up to five values in this one declaration: right offset, bottom offset, blur, spread and colour. Separate them all with spaces. The spread value is optional, but I wouldn't recommend skipping any of the others.

Here's an example:

box-shadow: 10px 5px 0 0 #333;

That'll give my element a harsh, border-like shadow 10 pixels to the right and 5 pixels to the bottom with a dark grey colour. If you give either of the offsets negative values, they'll move in the opposite direction. For example:

box-shadow: -10px -5px 0 #333;

That'll make the shadow appear to 10 pixels to the left and 5 pixels to the top of the element.

Remember to put your box-shadow declarations in inline styles, like so:

Browser support is fairly similar to that of border-radius; the latest versions of all browsers (even IE9+) accept box-shadow as is. To support a few unfortunate Safari users, you'll have to stick a -webkit- prefix on the front, which makes your final code something similar to this:

If you don't feel like catering to those users, however, save yourself the character space!


And that's it! Do you have any other exciting CSS3 properties you'd like me to test and add to this list? Have you tested any of the ones I've written about and found that they don't behave as you expected? Let me know!

A big thank you to zfernbaugh for pointing out that newer versions of Firefox accept the transition property without prefixes!

to the top ↑ | index

Top Troubleshooting Tips

added Nov 4, 2012

Sometimes it's hard to figure out why your page suddenly broke. All you see is a mess, and you're not sure where it came from. Here are some things I do to find solutions to my coding problems (in this order):

1. Validate your code. (Search "CSS/HTML validator".) This can catch missing end tags, incorrectly spelled attributes/tags, etc. If it comes up with errors (besides doctype issues), fix them and try again. Important things to note:

2. If validation doesn't reveal problems in your code, try to go back to a working version. This is where saving copies of pages is handy; before you start tinkering, save a copy of your working page in case something goes wrong.

3. If you didn't save a copy (I'm always guilty), comment out code until it starts working again. Don't go randomly adding comments, though. I always comment out everything and uncomment lines one-by-one until it breaks. (Remember that you can't comment out code on Neo, so you'll have to do this on your local copy.)

4. Once you find the troublesome code, search for a solution.

That's all I have for you so far! Do you have a handy troubleshooting tip that others could benefit from reading? Send it in!

to the top ↑ | index

Tooltips On Images

added Oct 30, 2012

You know what a tooltip is, right? It's one of those things that pop up occasionally when you hover over an image, giving you a description of what it is. Something like this:

You can put these on your images by adding a title attribute. (If no title is present, IE will display the alt attribute as a tooltip, so be careful what you put in there!) Your image tag will look like this:

So far I haven't found a limit on the characters you can put in in your title attribute. (Keep it brief as a rule of thumb, though.) Be careful, however, of which characters you put in there, as using quote marks (" or ') may cause some issues.

to the top ↑ | index

Drop-Down Navigation

added Oct 26, 2012

If you get lost at any point in the code or if you just want to use this without learning what it does, I've got the complete menu CSS & HTML at the bottom. Feel free to copy and paste it and use it in your layouts, but if you use it as premade code, please give credit back to 2xS.

Ever seen a menu that expands when you hover over it? It's a fantastic way to organize your navigation, especially when you have a lot of links to throw at people. The effect is quite possible to manage on Neo with a bit of CSS, but it comes with a few side effects that you should at least be aware of (the biggest of which is that this doesn't work in Internet Explorer; more details later).

First, let's get you into that code!

This technique relies on nested lists (preferably ul tags). We'll wrap it all in a div with an id and give each "submenu" a class. (Realistically, these can be anything you want; these are just the ones I always use.)

The important thing to note about the HTML is that your .submenu uls have to be inside an li and you can only have one submenu per main link. (Why would you want more, anyway?) In theory, you could get really fancy and have submenus inside your submenus, but let's focus on one drop-down menu at a time.

If you haven't added any styles, you'll notice that your submenu links are indented from your main menu links. (This is a good way to tell that your HTML is in order before you begin styling.)

Unstyled nested lists

Let's add some basic stuff to make it look like a real menu. The following styles are pretty much identical to the technique I outlined in my Pretty Nav article. (Take a moment to catch up if you don't understand everything that's going on here.)

Basic nav bar styles

If you check your page now, you'll notice that the submenus are floated to the left, but are below the main links. Obviously, you'd like these hidden until someone hovers over them, but what also concerns me is that they shouldn't be in one horizontal line; they should be stacked on top of each other. Let's fix that first:

(I've chosen a random value for the width, but you should choose a number that will work with your layout.)

The drop-downs should also not be taking up space where you'd like your content to go. (Put some text below your nav bar. See how it goes around the drop-downs instead of behind them?)

Drop-down menus before positioning

To get around this, we use positioning, both on the parent lis and on the .submenu uls. First, each .submenu ul needs to be positioned absolutely. We'll use the declaration position: relative; on the parent lis so that the submenus are positioned relative to their parent, and not to the body of your page. Here's what the HTML looks like after I've added those:

And to our .submenu CSS, we add a top and left property:

The value of top should be the height of your navigation bar, so that it appears at the bottom of the bar. Now if you refresh your page again, you'll see that the text appears behind the menus, which is exactly what you want.

Drop-down menus absolutely positioned

This creates the drop-down menus we'd like to see (it's okay that they're overlapping), except that the submenus should be hidden right now! We only want them to appear when people hover over them, so let's hide them:

To make them appear when the parent link is moused over, we'll use the :hover pseudo-class. (Ew, tech speak!)

Finished drop-down menu

And there you have it! A working drop-down menu of your very own. Don't you feel accomplished? Play with the colours, fonts, widths and heights to see what kind of effects you can achieve. If you're feeling ambitious, see if you can figure out how to do this vertically with the menus popping out of the left or right!

Now that you feel all warm and fuzzy inside, allow me to burst your bubble with a warning. I mentioned that this doesn't work in IE. (It's because IE ignores the :hover pseudo-class on anything except links.) This isn't the end of the world, especially if the majority of your readers aren't IE-users, but you still shouldn't alienate the few who will miss your drop-down menus. Get around this by giving users access to the same content in another way. If your page scrolls, IE users will have to be content with using the main links to jump to the closest section and scrolling from there. If you're using a paged-style layout, consider giving them "back" and "forward" links at the end of each section.

As promised, here's the final code in case you got lost. (ctrl+a, ctrl+c, ctrl+v) Remember that I don't require credit if you followed this tutorial, but if you just use this as premade code, please link back to 2xS.

How'd you find this tutorial? Have any questions or suggestions? Share your experiences by contacting me!

to the top ↑ | index

The Difference Between visibility And display

added Oct 23, 2012 | updated Nov 11, 2012

display and visibility are two entirely different properties, though the declarations display: none; and visibility: hidden; sometimes get treated as interchangeable. They're not the same thing, though. Here's the deal:

display determines how the browser should handle the space that the element takes up, so display: none; tells the browser to pretend that the element doesn't exist. It doesn't take up any space, it's not even there.

On the other hand, visibility tells the browser how to treat the opacity of an element, so visibility: hidden; tells the browser to pretend that the element is invisible. It still takes up space in your layout. You can definitely use this to your advantage!

On Neopets, these are most often seen in removal codes. Next time you use one, just be aware of the differences between them!

to the top ↑ | index

PNGs vs. JPEGs

added Oct 23, 2012

Optimizing images for the web is a big deal, but making them look pretty is just as important. Do you know whether to use .png for an image and when to use .jpg? Here's what most designers will tell you:

Use .jpg for photos, or images with photo-like qualities. Lots of detail, usually not vector images.

Use .png for things like backgrounds, logos, screenshots and other images, providing they aren't photos.

Personally, I use whatever will give me the smallest filesize without sacrificing image quality. (If you're a Photoshop user, using the "Save for Web & Devices" tool will give you all sorts of options and previews!)

Got some advice on images? Share it with us!

to the top ↑ | index

Pretty Navigation Bars

added Oct 22, 2012

I'm pretty sure the following is simple enough to do without bending over backwards. In fact, I use this so often that I can usually code it without testing it (though I always test it anyway). As you read, however, keep in mind that this is just one way to achieve this effect, and that other methods might work better for you. This is just my preferred method, and I thought I'd share.

First, here's what we'll be building:

Pretty navigation bar screenshot

Pretty standard, right? What you'll learn here is easy to customize, and that's the best part. You can use the skeleton code on just about anything and make it look like it matches.

First, the HTML. I'm actually following a pattern this time.

You'll need a div with an id. I creatively named mine nav. Inside that, you need an unordered list with several items:

If you're really having a problem with the lists, you can also opt for regular links inside a div with the display: inline-block; declaration. Thanks to zfernbaugh for the suggestion!

Oh, I'm sorry, were you whining about that ul? Don't freak out: this is an easy and effective way to achieve this result. Just try it, and you'll find it's not as hard as it looks. The reason we're using a list is because those list items are block level elements, which is something that will come in handy later on.

Add your links into the list items, like so:

(Don't add in extra li tags, though!)

That was painless to code, but now your page is ugly. (Go on, check.) Let's add some basic styles first:

That's a super short reset, but it's all we'll need for this tutorial. If you use this in an actual layout later on, feel free to replace it with a larger reset. The rest of the above is superficial; that is, you can replace the values with anything that suits your fancy. The following code, however, does make an impact on the outcome of this tutorial, so you might want to copy and paste these declarations word-for-word.

The overflow: hidden; declaration hides any links that don't fit into our navigation div, which will prevent them from overlapping content sections and going where we don't want them to go. But now that we've done that, most of our navigation has disappeared! To get the items to align in a horizontal line, we'll float them to the left:

Heads up! If you want your navigation to align to the right side of the div instead of the left, float the ul right and the lis left, otherwise your links will appear in reverse order. Quirky, eh?

Now that works pretty well, except that your links are all squished together. We can fix that with a bit of padding and the line-height property.

Notice that the line-height value is exactly the same as the height value. So long as you've got one line of text, this will center your text vertically without adjusting font sizes and calculating margins or padding. (Check out this tip for more details!)

But the best part of this navigation technique is that you can add some background magic so easily, and it works in every browser.

And you're done! Customize to your heart's content. In case you got lost, or just skipped to the end, here's the complete code:

(Ctrl+a, ctrl+c, ctrl+v!)

This technique works because of the floated block-level elements. (You could do it without the ul and li, but this is more reliable and it's become a web standard. Plus, it makes it super easy to add drop-down menus later if you so choose!) When you float a block-level element, it expands to the width of its content instead of the width of it's container, but still behaves like a block-level element in every other way.

Got questions? Issues? Do you have a way better, completely awesomesauce way of doing horizontal navigation? Share it!

to the top ↑ | index

Removing The "Neopets Bar" From Petpages

added Oct 18, 2012 | updated Oct 22, 2012

I've always just assumed every Neopets coder knows how to get rid of that puke-coloured bar from the top of their petpages, but I've come across a bunch of people recently who've never used a reliable removal code, despite the fact that it's so easy!

EDIT: Another super easy method (brought to my attention by Moose, thank you!), is to simply add

body { margin-top: -14px; }

to your styles. This works best for layouts that rely on positioning, but be careful with layouts that don't. For those, you might have to account for the extra 14 pixels somewhere in your code. If this definitely won't work for you, try the following removal codes.

The "bar" doesn't have a class or ID we can style, but it is contained in a table, which makes it a little more unique. You can remove it simply by using a code similar to this:

table { display: none; }

Here's the thing, though: If you want to use tables somewhere in your content, you've just hidden all of those, too. You can show them again, though, by using this right after the line above:

#wrapper table { display: inline; }

Remember to change #wrapper to whatever your containing div is. If you don't have an umbrella div containing all of your content, you might have to give every table a class and do this:

table.showme { display: inline; }

Note that I used display: inline; instead of display: block; Tables technically aren't block-level elements, and telling them to be will give you some weird results. Even so, your tables may behave unpredictably in Firefox. (Because FF expects tables to have a display value of table but other browsers don't recognize this value.) If you're relying on the valign attribute (which won't work in FF with the display: inline; declaration), you may want to use code similar to this:

table { visibility: hidden; }
#wrapper table { visibility: visible; }

Because of the way visibility works, this will leave a 14px space at the top of your page. If there's nothing there, you (and your viewers) won't notice it. Otherwise, account for it with negative margins or absolute positioning.

Having issues with this? Got something to add? Contact me!

to the top ↑ | index
to the top ↑ | index

Building A Rock-Solid Paged Layout

added Oct 12, 2012

Also known as an anchored layout, a paged layout is simply an illusion of multiple pages within one page. This is super handy for situations where you'd like to break up your content but would prefer not to spread it out over multiple petpages. (And for the record, this concept can also be applied to userlookups and guild layouts, with a little more effort and slightly different application.)

Here's how it works: Your page has a container element (let's go with a div with the id "container") which holds several "section" elements (hmm... how about divs each with a class of "section"?!). The container div acts like a window to the section divs behind it. Imagine that the section divs are on their own layer that scrolls behind the container div opening.

Paged layout diagram.

Normally the section divs would scroll freely, but you're going to restrict that by giving the container div (and the section divs) a fixed width and height and adjusting the overflow CSS property. This way, when people first view your page, they only see one section, and you have to give them links to view the rest of the sections. Viewers see one section at a time, which creates the illusion we're going for.

I'll take you through a tutorial now that will help you create a rock-solid, cross-browser compatible, easy-to-modify layout. If you're smart, you'll save this template somewhere so that you can reuse it later!

First, our HTML structure.

Easy so far, right? Next, we put in sections for our content inside the container div. (In the following bits of code, I'm going to leave out parts of the HTML. I've included enough to give you some context, though, so hopefully that helps! Just don't add in another

We need something to put in those sections, though, just so we can see what we're doing. I took a trip to the Gutenberg Project Online and copied and pasted the first three chapters into my section divs. (If you want the code so that you don't have to format it yourself, copy and paste from here: Ctrl+a, ctrl+c!) Anything will do just fine, though.

I'm going to add a heading to the top, too, just for a complete effect:

I'm going to bounce back and forth between HTML and CSS now, so hang on to your hat!

Stylin'.

Right now, this page is ugly. So I've added some basic styles that won't affect the functionality of the page much, if at all. First, a tiny reset:

And some minimal prettification:

Feel free to use mine verbatim or modify it a bit to fit your taste. Keep in mind that playing with widths, heights, margins, and padding may throw this project off a bit, so for now, I recommend only changing colours and fonts. (Notice, also, that I'm using the margin: auto; method of centering. If you're not familiar with this, you can learn about it here!)

Right now, your content extends all the way down the page. The text is smushed up against the sides of the wrapper. This isn't what you wanted! Don't worry, I'm not done with you yet.

Making it work.

This is the magical part. If you've followed my example, you have three separate section divs inside one container div, each filled with content. (If you have more or less than that, you'll be fine, but you need at least two to demonstrate this concept properly!) Now we'll add some styles that actually make this work.

First, we need to set the height and overflow properties on the container div to create our "window":

Unfortunately, this just means we've hidden most of our content with no way for users to read it; you can't even finish the chapter! We fix that by adjusting the height of each section div to match, and changing it's overflow property to auto:

The excessive, arbitrary bottom margin simply gives me some peace of mind. It means that other sections shouldn't be showing up inside my window by accident.

Now it's looking better! But where are the other chapters? They're hidden, just like we want them to be. We need to provide the users with links in order for them to see the rest of the content:

These are internal anchors that link to another area inside this page. Right now, though, they don't go anywhere. To fix that, we'll add IDs to each of our section divs:

This concept works on every ID you ever put in your HTML. We could even link to the nav div if we wanted... (But why?) This doesn't work for classes, however.

There are other ways to add anchors to your pages; you don't always need to use IDs. For example, you could also do this:

Keep in mind that id, name and class attributes should always begin with a letter. CSS is picky.

Do whatever you're more comfortable with. Just be aware that different methods may behave a little differently in certain browsers. (Usually nothing to worry about.)

Spit 'n shine.

As of right now, you have a functioning paged layout, but your text is still squished against the sides, and the padding doesn't match up. Just a little more polish is required to make this page... well, not so irritating to my aesthetic sense. All I did to get some nice padding around my text was add this to my #container CSS:

and the following to my #nav CSS:

Each of these ensure that the padding around my text stays consistent (because it's not using the padding property, but rather imitating it with whitespace).

Here's the complete code, in case you got lost somewhere and want to compare yours to mine (ctrl+a, ctrl+c, ctrl+v):

(You're free to use that as a template for your own endeavours if you wish.)

The trouble with tribbles.

That was fairly painless, assuming you followed this tutorial to the letter. The trouble arises when you want to play with padding, margins, widths, heights... almost anything that involves a number in pixels. How unfortunate.

I can't give you much direction in these cases. I can point you in the right direction, however:

1. Padding, margins and borders all work differently in IE than in Firefox, Chrome and the rest (on petpages). Learn why here. This creates spacing issues. Experiment until you find a combination of them that works for your page.

2. If possible, avoid using padding on your .section divs. This can sometimes cause unexpected results. Check out some alternatives.

3. Adding a margin-top or padding-top to your #container div will only work without the # in the URL. This means that if a user clicks one of your links, that space will suddenly disappear. (I have no idea why it does this. If someone's clued in, share your wisdom with me?) A solution is to put a margin on something else that will push your #container div down. In this example, I have a bottom margin on my #nav div that does the trick.

Each situation is subtly different, and if you have a layout that's giving you grief, please feel free to mail me, and I'll see what I can do for you!
to the top ↑ | index

ID Or Class? Which Do You Use?

added Oct 8, 2012

HTML IDs and classes can be a little confusing to new coders, and few beginner tutorials outline the difference between them. This is probably because the general consensus (on Neo) is that they're completely interchangeable and they aren't any different from each other.

But they are different and it will affect you if you ever code for anything outside of Neopets, so it might be a good idea to get into the habit of using them properly now, especially if you're an aspiring web designer. Don't worry, though, it's super easy.

IDs are one-time uses. If you have , you can't have or any other tag that uses the same ID.

Classes are for multiple uses. You can have as many times as you want. You could even have on the same page.

The reason for this (besides having pages that validate) is a little complicated, so I won't bore you with details. If you're interested in reading more, look up "CSS specificity".

to the top ↑ | index

When line-height Cuts Off Your Text In IE

added Oct 5, 2012

Typically, I use the line-height property to make the text on my page more readable: getting the space between the lines just right can really help when people are trying to read your page fast. (If you're curious, I usually start with a line-height that's 1.5 times the font-size and tweak from there.)

Not only that, it can also do some funky things for layout as well (usually with headings or other short text):

line-height demo in Firefox

(I've taken irrelevant styles like font-family, color, text-transform, text-align, the body background, and the div centering code out.)

Notice how the extender on the p and the very tip-tops of the letters are outside the background on Firefox? The subheading is just to give you ideas. (All of my tests have shown that Chrome and Safari behave the same as FF on this issue.)

Unfortunately, making the line-height smaller than your font size (or even the same as your font size) can cut cut off the text in IE. Here's the same code:

line-height demo in IE

Now look what happens if I float or position these headings (the effect is the same):

line-height demo in IE

(Again, I've taken irrelevant styles out.)

It gets worse! The bottom of the text gets cut off as well!

Don't ignore your IE readers; your headings are important to them too. At the moment, I have two solutions for you:

1. Set position: relative; on all elements that cause an issue. Of course, you can't use position: relative; and position: absolute; at the same time, so if you're depending on absolute positioning, you may have to do some fancy negotiating to use this fix. (Put the h2 in a div and position the div instead of the h2?) Or...

2. For floated and positioned headings (this won't work unless you're doing one of the two), you can add padding-bottom and a negative margin-bottom (of the same absolute value), like so:

Watch out, though: this doesn't fix the top of the text being cut off, and trying to add padding/margin to the top will have unexpected results.

If you have any other possible fixes for this problem, please let me know! Otherwise, enjoy!

to the top ↑ | index

Which Editor Are You Using?

added Oct 3, 2012

Using the right tools to code can make your life so much easier. If you code a lot, look into a real-deal code editor (instead of just typing directly in your browser or using Notepad) — the best part about these is the intelligent colour-coding. There are plenty of free ones floating around for both Windows and Mac. Do some research (search "free code editor for ____") and figure out what's best for you. (And Windows users may even have Notepad++ already installed on your computer. Try it and see how much better it is!)

to the top ↑ | index

So Your Spacing Is Off

added Sep 29, 2012

First off, it's the box model's fault. It's (almost) always the box model's fault. Just so you know, box model refers to the structure of padding, margins and borders surrounding any given element on a webpage. It looks a little like this:

Standard box model diagram.

Easy enough, right? Wrong! If every browser used the same box model, then you're correct, it would be easy enough to understand and deal with. Unfortunately, that's not the case. You see, the W3 Consortium (the people responsible for laying down standards on the web), decided to implement this wacky, counter-intuitive one I've shown above. I've learned it, and made sense of it, so now it's not so bad. But the good folks at Microsoft decided that they had a better way of doing things, and used the "traditional" box model for IE:

Traditional box model diagram.

This means that while your margins, padding and border are included in the width of a div in IE, they are not in every other browser. This has probably frustrated you on more than one occasion, whether you know it or not. If you've ever said Why does my petpage look different in Explorer than it does in Firefox?! there's a good chance this had something to do with it. To complicate matters further, IE does occasionally conform to the W3C's box model... namely when you use a (semi-)strict doctype. This means that your spacing is going to be messed up on petpages, but probably not so bad on userlookups, guild layouts, etc. (At least we have that.)

So how do you deal with this problem? Unfortunately, each scenario is different and will require a different solution. Here are a few possible solutions*:

(I've removed irrelevant styles, like list styles and font size, and the complete content text for the sake of brevity. Note that in the following screenshots, IE9 accurately represents IE6 through 8 because it's petpage coding and the browser is in quirks mode. Recent versions of Firefox, Safari and Chrome will all behave the same with respect to the margin/padding issue.)

1. Acknowledge that your divs are always going to be smaller in IE, so code in Firefox, Safari or Chrome, and ignore the extra space in IE. (ie. Do nothing.)

Solution 1

1b. Alternatively, you could balance these out so they both look equally hideous.

Solution 1b

2. Wrap each div in another div and pad the inside one. (This solution requires that your divs be floated or absolutely positioned.)

Solution 2

3. Avoid padding altogether with positioning and more bloated div-within-a-div coding (despite how judgemental I sound, this solution works well for paged layouts). (This solution requires a fixed height, as shown in the screenshot.)

Solution 3

4. Use tables. (Pad the table cells and fix a width. For space between the cells, create empty, blank cells.)

Solution 4

5. Don't use backgrounds/colours that would show off spacing issues. (Below is just one example of endless possibilities. It doesn't use any padding or margins at all, so the screenshots appear nearly identical.)

Solution 5

As a rule of thumb, in case you can't follow solutions 1 or 5, fix your padding/margin issues by separating width/height and margin/padding in one way or another.

* I am not suggesting that any of the above "solutions" are valid HTML/CSS, and I strongly recommend you avoid using most of them out in the "real world" since this isn't really a problem out there. Like I've said many times, however, when coding for Neopets, your page should just work.

If you're not sure which would work best for your page, or you don't think any of these would work, or if you have another solution you'd like to share, feel free to contact me!

to the top ↑ | index

Block Level vs. Inline

added Sep 25, 2012

What on earth does that mean, anyway? Block? Inline?

Block-level elements get their own line. They have nothing next to them on the horizontal plane. (Usually. You often see this changed with floats.) Block-level elements break the flow of content. Examples include div, all of the heading tags (h1, etc.), and p.

Inline elements flow with the content. They'll sit right next to other inline elements on the page. Examples include span, b, and a.

You can change the display of an element by using the display CSS property. It's easy enough: to change something to block-level, use display: block; and to change something to inline, use display: inline;

If you're feeling adventurous, look into the inline-block and table values for the display property. They're pretty handy, but not supported in all browsers.

to the top ↑ | index

Centering Text Vertically With Padding

added Sep 20, 2012

Generally speaking, I hate messing with padding and margins to position things where I want them. I even hate messing with positioning. Too many numbers for such a small effect. That's why, when I have one line of text to center, I use this trick. But sometimes (most times...) I'm too wordy, and I can't fit everything I want to say into one line. I find this is the worst when it comes to column-style navigation (some of those links get long!). So instead of setting a height and line-height, I let the content do whatever it wants (as far as height and line-height go), and add an even padding to both the top and bottom of the container:

Check out the CSS Shorthand tip if you're having problems with this code.

The catch with this one is that you have to be able to let the divs, links, etc. expand and contract with the content — if you're relying on a fixed height, try the line-height trick instead!

to the top ↑ | index

Centering One Line of Text Vertically

added Sep 20, 2012

I often find cases where I want to center one line of text vertically within a div (footers, nav bars...), and I don't want to bother with a table for such a small feat. Fortunately for me (and you), the fix is pretty simple and works in all browsers — so long as you only have one line of text.

This method works better than the padding trick when it comes to divs with fixed heights. (Plus, the CSS looks much cleaner.) If you can't set a fixed height, try it instead.

Just a warning: If you have more than one line, things get messy. Text starts creeping out of the div if overflow isn't set to hidden. If it is, the text gets cut off. So be sure that your babble is short enough that it'll never stretch longer than one line, no matter what font the browser ends up displaying.

Now that I'm finished telling you off, here's the solution: Your div needs a height and line-height set. Set these to the exact same value and that's it!

Too much talk for too little code, eh?

to the top ↑ | index

Transparency Without The Opacity Property

added Sep 20, 2012

Occasionally, it's nice to add some layers to your work by making certain elements partially transparent. Since TNT disallowed the opacity CSS property in some places (petpages and lookups), you'll have to use a workaround: transparent images. For a solid-colour, semi-transparent background on a div (or any other image), save a small PNG as semi-transparent and set it as a repeating background in your CSS. Woo!

to the top ↑ | index

Easy Proportional Images With CSS

added Sep 18, 2012

Occasionally you want to change the width or height of your image with CSS to fit a div or other container. The only problem arises when your image suddenly becomes disproportionate — squished one way or the other, and so ugly. There's an easy fix, though! (And it works in all browsers!)

Of your width and height, set the one you're not manually setting to auto.

For example, in my Square Series templates, I wanted the images to fit inside the boxes no matter the size of the image or the box, so I set the width to 100%:

But some of the images were different heights than others, so I couldn't just set one height that would work for all of them. I used "auto" instead to make sure the image adjusted proportionally to the box:

In case you were wondering, width and height HTML attributes will be overridden by your CSS properties, so it's still safe to use them with this trick!

You can also do the opposite! If you need your images to be a specific height, set width: auto;

As always, if you have any issues with this, feel free to contact me!

to the top ↑ | index

0 Is Your Friend

added Sep 14, 2012

I'm sure you've noticed some odd spacing behaviour around your layouts occasionally. divs (and other elements) seem to ignore your CSS or margins and padding that you never set appear on some elements — and are different in each browser! Sometimes you have to use negative margins or positioning to get what you want. But guess what? You probably don't have to do that.

Some padding and margin issues on petpages are caused by the lack of doctype. Check out my explanation here.

Every browser adds default margins and padding to certain elements. You can get consistent results (well, more consistent, at any rate), by simply zero-ing these out at the beginning of your stylesheet. Here's a simple sample code to get you started:

body, div, p, span, a, img, ul, ol, li, table, tr, td, hr, textarea, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: none; }

As you find yourself adding different tags than the ones listed here, add them to your reset list. (Separate all tags with a comma or you'll get strange results!) Continue on with the rest of your CSS as you normally would, adding margins and padding to things as you see fit.

WARNING: I would use this "reset" with extreme caution on anything besides petpages. If you use this for lookups or guild layouts, be aware that this could change some default Neopets styling that you may be counting on. I would not suggest adding any other styling (such as font or width) to all of these elements at once.

Also, out in the "real world" there are boilerplates and resets galore. Unfortunately, those won't all work on Neo, but you could use them for ideas!

to the top ↑ | index

Linking Within A Page

added Sep 11, 2012

You see this all the time on Neo: a link that directs you to the same page, but at a different point in the content. Perhaps so you don't have to scroll to find what you're looking for, or maybe for the paged layout effect. The good news is that they're really easy to code for your own pages!

First, you need an anchor point. This is where the link will jump to in any given page. You have two options:

1. Use an a tag with the name attribute:

Yes, this tag should be empty. No, it should not have an href attribute. Don't forget to close it! (And do not put a # in there!)

2. Give any HTML element an id:

Remember that IDs can be combined with classes, too.

Next, you need to create an actual link:

The all-important href attribute should simply be the name/id from step one, preceded by a hash symbol (#).

In case you were wondering, you can link to a specific section of a page from outside that page in a similar fashion:

Easy as pie, right?

to the top ↑ | index

Doctypes On Neopets And What It Means To You

added Sep 11, 2012 | updated Nov 27, 2012

Over the years, web standards have evolved by leaps and bounds. A doctype is a bit of code ranging from the ultra simple to the obscenely complicated that simply tells the browser what set of standards you want the page to work with. These standards dictate how specific HTML tags and CSS declarations are handled.

... That's not abstract at all, is it? I'll get to some more concrete examples in two seconds, but I need to pound the theory into your head first. A doctype changes the way your page is displayed.

Let's take a step outside of the Neopets world for a moment and discuss two different doctypes (out of many):

Deprecated means that this tag/attribute/whatever is on its way out. You should stop using it now and try to take it out of your older stuff, too. Eventually, it will be removed entirely, and you don't want to get caught with it then!

Strict - You're adhering to strict HTML standards by not using deprecated tags or attributes (did you know the target attribute on anchors is unsupported?), by giving every attribute a value (for example, readonly="readonly looks redundant, but is required to stick with the standards) and by closing all your tags (single tags like img and br need a closing slash, and two-part tags like li and p need to be closed). The best reason to use this one is to make sure your site looks consistent across all (or at least most) modern browsers. (Even IE!)

Transitional - This one is for those pages where you'd like to conform to the strict standards, but you need functionality that's no longer supported, like those anchor targets!

Now, what happens if you just ignore this doctype doohickey and let your page do its own thing? Browsers activate "quirks mode" which means that each makes its own decisions about how to display your HTML and CSS instead of sticking to well-established standards. What you get is a mess of inconsistent, and sometimes unusable, interpretations. IE 6, 7 and 8 revert back to IE 5.5 specifications, which is prehistoric by the internet's standards. Firefox, Chrome, and Safari behave differently depending on which version you use, but even older versions of these browsers do a better job of sticking to Strict Standards than IE does. And Opera? Let's just not go there.

You need to know all that because Neopets petpages don't declare a doctype. But guess what? Guild front pages, userlookups, and pretty much all other pages do. (Transitional, in case you were wondering.) That's why your petpage code behaves so differently than the others. Unfortunately, you can't declare one to save yourself the headache; the doctype needs to be the very first thing in your code, and since Neo puts a whole bunch of fluff before and after your petpage code, you're hooped. You're just going to have to code for quirks mode!

Now that you're aware of the awful situation, though, you can start adjusting your tactics. Do some searching; you can find some fairly comprehensive compatibility charts and testing pages. The biggest issue you should be aware of, though, is the difference between box models, which affects margin, padding and border. That's what's going to frustrate you the most, and it's an article all to itself.

to the top ↑ | index

Disallowed Styles

added Sep 9, 2012

There are the occasional properties that aren't allowed inside an internal stylesheet, such as position and min-width. At one point, display was also disallowed. Unfortunately, it's nearly impossible to keep a complete and accurate list of which properties you shouldn't use. Just know that you can get some of them past the filters by moving them inline, like so:

Others will be removed entirely. It's all trial and error from here!

to the top ↑ | index
to the top ↑ | index

Filters & Positioning

added Sep 9, 2012

Neopets filters don't like the position property. Any position declarations need to be inline styles instead of internal styles. (Definitions here.) So where you'd put this:

You'd instead have to do this:

and this:

You'll notice that all other declarations (even ones relating to positioning), can be kept in the stylesheet.

to the top ↑ | index

Filters & Ultra Basic Page Structure Tags

added Sep 9, 2012

Ordinarily, an HTML page has a DOCTYPE, html, head and body tags, just like this*: Page structure code

Neopets' filters remove or reject all of these tags; just leave these out.

*Like I said above, the filters remove these tags, even from textareas. So I'm using an awful image in place of actual code. Forgive me?

to the top ↑ | index

Filters

added Sep 9, 2012

If you're brand-new to coding for Neopets, you're probably just getting acquainted with TNT's filters. The "filters" check your code (whatever you're typing into the petpage/userlookup/guild layout/shop description) and either allow it through, or stop it long enough to give you an error message. There are some things they don't allow through at all (like scripts). Other bits of code you have to adjust to get them past the filters. The index has a complete list of all my filter-related tips to get you started.

to the top ↑ | index

Styling HR Tags

added Sep 9, 2012

HR (horizontal rule) tags like the one below can be extremely useful when you're separating content.


But if you don't know how to style them, they're pretty ugly. Instead of resorting to border images where some HTML would do, use the following CSS to make it pretty!

To "reset" it to something useable, remove the border:

To change the colour of the line, change the background colour (for non-IE browsers) and the color property (normally reserved for text, but IE doesn't understand that):

To change the thickness of it, edit the height:

To change the width, edit the width (duh!):

Next time you're too lazy to open Photoshop for a simple line, use this trick.

to the top ↑ | index

CSS Shorthand: Margins & Padding

added Sep 6, 2012 | updated Sep 9, 2012

Values for margin and padding properties can be condensed to save lines and make your CSS easier to read, providing you know how the shorthand works.

For example, let's say you have four different margins you want to impose on a div.

Instead of typing margin-left: 5px; margin-right: 20px; margin-top: 0; margin-bottom: 10px; you can stash them all in the margin property like so: margin: 0 20px 10px 5px; (For the record, when using multiple values in the same property, they are always separated by a space.) The order for four values is top right bottom left. Confused? It's in clockwise order, starting from the top. (And I have to recite it to myself every time I type out my CSS too, don't worry.)

If you're feeling particularly stingy with characters, there are some cases when you can shorten that further to three values or two values.

If your left and right margins are the same, you can use only 3 values. In this case, the order is top right/left bottom. Example: margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 0; can be shortened to margin: 100px auto 0;

If your left and right margins are the same AND your top and bottom margins are the same, you can shorten that to two values, where the order is top/bottom left/right: margin: 0 auto;

Of course, if all four of your margins are the same (let's say 20px), you can simply use margin: 20px. Clever, eh?

I know all of my examples used margin, but this works exactly the same for padding as well. If you want to save even more lines of code, do some research on your own and find other properties that can be condensed. (A few off the top of my head: background, border (and all its cousins like border-top and border-left), and font, even though I always mess that last one up.)

to the top ↑ | index

Should I Use Tables Or Not?!

added Sep 6, 2012

Oh tables. They are just one very big example of how coding for Neopets is not the same as coding for... well, anything but Neopets. Tables are in fact the reason I named this site Double Standard: Ordinarily, I would never give in to using tables for laying out content, but on Neopets, I cave all the time. If you view the source code of this page, you'll find tables everywhere.

Standards tell us that using tables for our layouts is bad. Tables can be sluggish to load and don't always play nice with CSS. Tables are for tabular data only, like a store's hours of operation or the results from your latest survey on prefered ice cream flavours. Not only that, but they make your code ugly too!

Unfortunately, when you're working with IE's quirks mode (and possibly other browsers' quirks modes), there are times when tables are the only option to get your page to display the way you want in every browser.

Consider this example: Recently I built a layout for a reviewing group (shameless plug!) and I wanted the menu to display top-aligned and to adjust to the width of my submenus.

How would you do this in the real world? I'd probably try some display: inline-block; magic first. If that didn't work, I'd do some research. Knowing how few resources there are out there for Neo's coders, however, I opted to take the easy way out and simply shove all my links into a table. Because it does exactly what I want it to.

So, to answer the title question, don't use tables if you can help it. Try floating, positioning, margins and padding... try everything you can think of before you get down and dirty with the evil table monster. But once you've exhausted your bag of tricks, surrender to the epic folly of 90's HTML fads and just use a table.

to the top ↑ | index

Square Series

added Sep 6, 2012

Read my note about templates before continuing. (It's for your own good.)

BETA TESTING Square Series is a brand new trio of templates available for your use and is 2xS's first. Because of this, I'd really appreciate it if you test them out for me: Try to use them. If you break it somehow, let me know. If something was really confusing, let me know. If none of it makes sense to you at all, let me know. That way I can improve the code (if necessary), and more importantly, improve the instructions that come with the code. Once I'm confident that these templates are going to be useable for intermediate coders, this message will come down, but I'd still love to hear any suggestions or (try to) fix any issues.

Rollout

Rollout - a fluid layout with feature squares

Rollout is a fluid layout template (that means it maximizes screen space to show off your beautiful content) with feature squares, perfect for galleries, portfolios or showcases. Best with minimal text. Requires a bit of work and testing to make sure it all fits inside the lines.

Filmstrip

Filmstrip - a fixed-height layout with feature squares

Filmstrip is Rollout's hip younger brother: fixed-height, 1-row of squares; the page scrolls horizontally when it's too wide for the browser. Fantastic for sequential work, or just if you want something different.

Confinement

Confinement - a fixed-width layout with feature squares

Confinement is Rollout's control-freak twin. The fixed-width, 3-column layout means you have control over what square appears "near" another. You can easily widen this, or make it skinnier, if that's what your deal is.

to the top ↑ | index

A Note About 2xS Templates

added Sep 6, 2012

You have my permission to use and edit any templates provided by Double Standard. This means colours, proportions, structure or anything else you can think of.
You may not remove the link back to Double Standard, even if you have modified the layout beyond recognition. A good rule of thumb: if you started with my code, you leave the credit on.

I know these templates aren't for everyone. But there are lots of good premades sites around! Check out my affiliates or the directories who list me for some of the popular ones.

These templates are not for the faint of heart, easily frustrated, or people new to coding. If you're just learning, I would not advise learning on my templates. The reason I call them templates is that they are not your run-of-the-mill premades. I'm not bragging; they're just built differently. Where most premades can be put up on a petpage and filled in with your content, most of my templates will require you to do some extra styling, learning and organizing. Certain content will have to go within certain tags, and so on.

Any special instructions I think you may need are in the code itself, so I recommend copying and pasting into an HTML file on your hard drive, viewing it as a webpage, and reading it all. Then, replace the content with your content and away you go!

I recognize that this process might be strange to you, and that not all of my instructions are clear. If you're having any issues with my templates, please feel free to ask! Be sure to include your name, the template you're using, the problem you've encountered, what browser it appears in and any other details you think might be useful. It would also speed things up if you had a petpage to show me.

If the template has a "beta test" notice on it, this means that the template is probably quite new. I've tested it myself, in as many browsers as I can (including Firefox, Chrome, Safari and IE), but I need people to tell me if they find any bugs or errors/omissions in my instructions. I usually ask kind strangers to test the pages for me, and once I'm confident that it's the best I can make it (within reason), I take the notice down.

to the top ↑ | index

Save It (To Your Hard Drive)

added Sep 3, 2012 | updated Sep 4, 2012

I can't count how many times I've read "I transfered my pet and lost all my hard work!" That seems so ridiculous to me. But you know what? There's a solution, and one that will make your life that much easier in the long run anyway: Build your pages locally on your computer instead of on Neopets. Save them as HTML files, test them locally (before people can see it!) and then upload them. Not only does this mean you have a backup copy on your harddrive in case anything ever happens to the petpage, but if you're using a code editor to build them, it's easier to edit, fix and test pages. I won't school you on how to organize your files, but it might be a good idea to keep them all in one place, too. ;)

To do this, you can use any plain text editor to write your code. I emphasize "plain" because programs like MS Word add extra formatting characters into their documents which will seriously mess with your work. Just don't use those. If you're on Windows, use Notepad++ (or Notepad if you really have to); if you're a Mac user, search for a "free text editor for Mac" because TextEdit just won't cut it, even in plain text mode. (Try opening up a .html file in TextEdit. I dare you. To open .html files in TextEdit, find the "Open and Save" tab in Preferences, then check the "Ignore rich text commands in HTML files" box. Thanks to Mad for the tip!)

Code just the way you would in your petpage. Remove any html, body, head, or DOCTYPE tags — they will affect the way your browser displays the page. If you have exactly what your petpage would accept, you're more likely to see exactly what the petpage will look like when you upload it to Neopets.

When it comes time to save your work (save early and save often!), make sure it has a .html extension. This way, your browsers can open the file (usually right-click » Open With » Firefox/Safari/Internet Explorer/Google Chrome) and you can still edit it as html code.

When you're finished, copy and paste the code into your petpage. All done!

(When I need to edit a petpage, I always edit the HTML file on my harddrive, test it, and then copy the code into the petpage. That way my backup is always up-to-date.)

to the top ↑ | index

Developer Tools

added Sep 3, 2012

Having to save a file and then refresh it in the browser over and over again is a pain, especially when you're trying to tweak one little bit of CSS. Thankfully, there are tools like Firebug (for Firefox). Edit the CSS and HTML right in the widget to test and tweak, then make the final changes in your file. It'll save you some time! (IE9 and Chrome users have Developer Tools built right into your browser. Check the menus.)

to the top ↑ | index
to the top ↑ | index

Horizontally-Centered Layouts In All Browsers

added Aug 30, 2012 | updated Sep 9, 2012

Getting a layout to center on Neo can be a bit tricky. The easiest and most reliable way to do so requires that you DON'T use absolute positioning on any of your elements. (It's absolute positioning, after all.) Here's the quick version:

Wrap your content in a div. Set its left and right margins to auto. (Top and bottom margins can still be anything you like.) Whatever is containing your wrapper div should have the text-align: center; declaration to appease IE. (Reset that in your wrapper div by setting text-align: left;)

WHY?! IE completely ignores the margin: auto; method of centering. Also, IE defies a lot of web standards. Standards say that inline elements should obey the text-align property, and block elements (like divs) shouldn't. But in IE's quirks mode, almost everything obeys the text-align property. In the end, you have to use two methods to achieve the same result in multiple browsers. Sound familiar?

Let's build a quick, simple page as an example. Say I have a header div, main content and footer — one column, nothing fancy — so I'll put them in a wrapper div like so:

ALL of your centering is going to happen in the styles. No tag, no wand-waving.

First, let's work on non-IE browsers and implement our margin: auto; method. Your margin: auto; declaration is going to go on the element you want to center. That means your wrapper div, in this case:

Advanced: If you're comfortable with CSS shorthand, skip the margin-lefts and margin-rights and just use the margin property with multiple values. Check out this article for an explanation.

Your wrapper MUST have a width set. It doesn't matter what width, but the div will only center if it is smaller than your browser width. I usually use something between 600px and 1000px for my layouts:

Now let's deal with pesky IE. Earlier I said that you have to put a text-align: center; declaration on the parent element. Assuming the wrapper div isn't contained by another div (or anything else), the parent element is the body, which is where your text-align: center; declaration will go:

Reset your text-align in #wrapper (unless you want all of your text to be centered):

The rest of your styles (for fonts, backgrounds, etc.) can go right in there too; no need to keep them separate. Now go try it out!

Thanks to Mad for being my beta tester!

to the top ↑ | index

Opacity In All Browsers

added Aug 30, 2012 | updated Sep 6, 2012

NOTE: Currently, the opacity property is disallowed on petpages and userlookups, but not on guild home pages.

Occasionally, it's nice to make things a little transparent, but I've found that getting opacity levels to work in IE is a pain. Here's how: (my examples are using 80% opacity)

Firefox, Safari, Chrome, etc:

opacity: 0.8; where 0.8 is a decimal between 0 and 1 where 0 is completely transparent (invisible) and 1 is completely opaque (nothing showing through)

IE:

filter: alpha(opacity=80); where 80 is an integer between 0 and 100 where 0 is completely transparent (just like above) and 100 is completely opaque

(So essentially, multiply your FF value by 100 to get the same effect in IE, with the different syntax.)

Hot tip: IE supports loads of other filters too, but a lot of them are going to make your browser load a little slowly, and not all of them are easy to understand. On top of that, other browsers don't recognize the filter property, so your effects will be IE-only. Do some research to find out more!

Example of working code:

to the top ↑ | index

CSS Jargon

added Aug 30, 2012 | updated Nov 27, 2012

If you don't know what the following words mean, you won't understand most of the CSS-related posts on this site. And that would just be tragic.

declaration a CSS property and value (eg. color: blue;)

property what you're telling the browser to change (in color: blue;, color is the property)

value what the browser should change the selector's property to (in color: blue;, blue is the value)

selector the element, id or class that the browser is modifying (eg. body, #wrapper, .aside)

internal stylesheet the CSS that goes inside tags

inline styles styles inside HTML tags such as

pseudo-class a built in CSS selector that specifies the state of an element, such as :hover or :focus. Always preceded by a colon (:). IE doesn't always respect these.

to the top ↑ | index

And here's the complete list, in case you got lost.

Articles

Building A Rock-Solid Paged Layout

Controlling The Petpage Copyright Fluff

CSS Shorthand: Margins & Padding

CSS3 Properties

Doctypes On Neopets And What It Means To You

Drop-Down Navigation

Horizontally Centered Layouts In All Browsers

Pop-Ups On Hover

Pretty Navigation Bars

Save It (To Your Hard Drive)

Should I Use Tables Or Not?!

So Your Spacing Is Off

Top Troubleshooting Tips

We Need To Help The Newbies Again

When line-height Cuts Off Your Text In IE

Quick Tips & Code Bits

0 Is Your Friend

Block-Level vs. Inline

Centering One Line Of Text Vertically

Centering Text Vertically With Padding

CSS Jargon

Developer Tools

Easy Proportional Images with CSS

Filters

Guild Reset CSS

Hex Code Shorthand

Hex Color Codes

Hide Your Guild Logo

ID Or Class? Which Do You Use?

IE And Hover Effects

Linking Within A Page

Learn To Search

Margins Collapse, Padding Doesn't

Move Guild Stats

Neomail Links

Opacity In All Browsers

PNGs vs. JPEGs

Removing The "Neopets Bar" From Petpages

Styling HR Tags

The Difference Between visibility And display

Tooltips On Images

Transparency Without The Opacity Property

When The "Save Changes" Button On Your Petpage Preview Disappears

Which Editor Are You Using?

Templates

* A Note About 2xS Templates

Loosely

Square Series

Polls

Browser Use On Neopets

Using Neopets On Phones

These are my affiliates and directories where 2xS is listed.

NeoBoard Fonts from Escalade

If you'd like to become an affiliate, please contact me!

If you're listing me and would like a link back, please contact me!

The above are sites that have featured or reviewed me! Thank you! (Hover for details.)

Contact me any of these ways for any of these reasons.

I really appreciate any constructive feedback you can give me; it's a big help when I decide what to work on and how to move forward.

If you have general comments or questions about the site, simply neomail me, preferably with a subject line like "2xS" or "Double Standard." (Keep in mind that I check fadeshear more than asparearie.) Alternatively, if I have an advertising board up, feel free to post it there.

More importantly, requests: If you'd like me to discuss a particular topic, neomail me with as many details as you can muster. It helps to know where you're coming from. If you have an idea for a template, tell me your thoughts, but know that I prefer to do templates that serve a specific purpose (like displaying your avatar wishlist), rather than generic premades. You could also post on my board, if I have one running, but I'll probably also ask you to neomail me anyway so I don't forget.

And this is the best offer I have: If you're having coding problems with something on Neo, neomail me and I can try to help you! I can't guarantee that I'll have the time or energy to answer you, but I will do my best to answer as many questions as possible. This works out for everyone because if I learn something new, I can share it with everyone else!

Hopefully this way, Double Standard will become more of a conversation — a community — rather than a wall of text on a petpage.

Layout, content, and code by Arie. Do not use without credit.
contact me | back to Neo

(Counter started September 8, 2013)



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2017.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions