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.

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.

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:

Again, with this method, you have to be careful not to use <center></center> 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 <br> 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!

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.

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!

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!

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:

• Copy and paste ONLY what you're putting into Neo, not any native Neopets code. (You can't fix TNT's coding errors for them, so don't bother.)
• Your Neopets code will never fully validate. First off, you'll be missing a doctype, and it'll scold you for that. (If you select one from the dropdown, remember that all pages except petpages use XHTML Transitional. Petpages do not declare a doctype, so the point on that front is moot.)

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!

Drop-Down Navigation

added Oct 26, 2012

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.)

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.)

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?)

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.

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!)

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!

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 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:

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:

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!

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.

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 <div id="container">.) <textarea class="code" style="height: 160px;"><div id="container"> <div class="section"> </div> <div class="section"> </div> <div class="section"> </div> </div>

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: <h2>Chapter 1</h2> <p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p>My dear Mr. Bennet," said his lady to him one day, "have you heard that Netherfield Park is let at last?</p> <p>Mr. Bennet replied that he had not.</p> <p>But it is," returned she; "for Mrs. Long has just been here, and she told me all about it.</p> <p>Mr. Bennet made no answer.</p> <p>Do you not want to know who has taken it?" cried his wife impatiently.</p> <p>You want to tell me, and I have no objection to hearing it.</p> <p>This was invitation enough.</p> <p>Why, my dear, you must know, Mrs. Long says that Netherfield is taken by a young man of large fortune from the north of England; that he came down on Monday in a chaise and four to see the place, and was so much delighted with it, that he agreed with Mr. Morris immediately; that he is to take possession before Michaelmas, and some of his servants are to be in the house by the end of next week.</p> <p>What is his name?</p> <p>Bingley.</p> <p>Is he married or single?</p> <p>Oh! Single, my dear, to be sure! A single man of large fortune; four or five thousand a year. What a fine thing for our girls!</p> <p>How so? How can it affect them?</p> <p>My dear Mr. Bennet," replied his wife, "how can you be so tiresome! You must know that I am thinking of his marrying one of them.</p> <p>Is that his design in settling here?</p> <p>Design! Nonsense, how can you talk so! But it is very likely that he may fall in love with one of them, and therefore you must visit him as soon as he comes.</p> <p>I see no occasion for that. You and the girls may go, or you may send them by themselves, which perhaps will be still better, for as you are as handsome as any of them, Mr. Bingley may like you the best of the party.</p> <p>My dear, you flatter me. I certainly have had my share of beauty, but I do not pretend to be anything extraordinary now. When a woman has five grown-up daughters, she ought to give over thinking of her own beauty.</p> <p>In such cases, a woman has not often much beauty to think of.</p> <p>But, my dear, you must indeed go and see Mr. Bingley when he comes into the neighbourhood.</p> <p>It is more than I engage for, I assure you.</p> <p>But consider your daughters. Only think what an establishment it would be for one of them. Sir William and Lady Lucas are determined to go, merely on that account, for in general, you know, they visit no newcomers. Indeed you must go, for it will be impossible for us to visit him if you do not.</p> <p>You are over-scrupulous, surely. I dare say Mr. Bingley will be very glad to see you; and I will send a few lines by you to assure him of my hearty consent to his marrying whichever he chooses of the girls; though I must throw in a good word for my little Lizzy.</p> <p>I desire you will do no such thing. Lizzy is not a bit better than the others; and I am sure she is not half so handsome as Jane, nor half so good-humoured as Lydia. But you are always giving her the preference.</p> <p>They have none of them much to recommend them," replied he; "they are all silly and ignorant like other girls; but Lizzy has something more of quickness than her sisters.</p> <p>Mr. Bennet, how can you abuse your own children in such a way? You take delight in vexing me. You have no compassion for my poor nerves.</p> <p>You mistake me, my dear. I have a high respect for your nerves. They are my old friends. I have heard you mention them with consideration these last twenty years at least.</p> <p>Ah, you do not know what I suffer.</p> <p>But I hope you will get over it, and live to see many young men of four thousand a year come into the neighbourhood.</p> <p>It will be no use to us, if twenty such should come, since you will not visit them.</p> <p>Depend upon it, my dear, that when there are twenty, I will visit them all.</p> <p>Mr. Bennet was so odd a mixture of quick parts, sarcastic humour, reserve, and caprice, that the experience of three-and-twenty years had been insufficient to make his wife understand his character. Her mind was less difficult to develop. She was a woman of mean understanding, little information, and uncertain temper. When she was discontented, she fancied herself nervous. The business of her life was to get her daughters married; its solace was visiting and news.</p> <h2>Chapter 2</h2> <p>Mr. Bennet was among the earliest of those who waited on Mr. Bingley. He had always intended to visit him, though to the last always assuring his wife that he should not go; and till the evening after the visit was paid she had no knowledge of it. It was then disclosed in the following manner. Observing his second daughter employed in trimming a hat, he suddenly addressed her with:</p> <p>I hope Mr. Bingley will like it, Lizzy.</p> <p>We are not in a way to know what Mr. Bingley likes," said her mother resentfully, "since we are not to visit.</p> <p>But you forget, mamma," said Elizabeth, "that we shall meet him at the assemblies, and that Mrs. Long promised to introduce him.</p> <p>I do not believe Mrs. Long will do any such thing. She has two nieces of her own. She is a selfish, hypocritical woman, and I have no opinion of her.</p> <p>No more have I," said Mr. Bennet; "and I am glad to find that you do not depend on her serving you.</p> <p>Mrs. Bennet deigned not to make any reply, but, unable to contain herself, began scolding one of her daughters.</p> <p>Don't keep coughing so, Kitty, for Heaven's sake! Have a little compassion on my nerves. You tear them to pieces.</p> <p>Kitty has no discretion in her coughs," said her father; "she times them ill.</p> <p>I do not cough for my own amusement," replied Kitty fretfully. "When is your next ball to be, Lizzy?</p> <p>To-morrow fortnight.</p> <p>Aye, so it is," cried her mother, "and Mrs. Long does not come back till the day before; so it will be impossible for her to introduce him, for she will not know him herself.</p> <p>Then, my dear, you may have the advantage of your friend, and introduce Mr. Bingley to her.</p> <p>Impossible, Mr. Bennet, impossible, when I am not acquainted with him myself; how can you be so teasing?</p> <p>I honour your circumspection. A fortnight's acquaintance is certainly very little. One cannot know what a man really is by the end of a fortnight. But if we do not venture somebody else will; and after all, Mrs. Long and her daughters must stand their chance; and, therefore, as she will think it an act of kindness, if you decline the office, I will take it on myself.</p> <p>The girls stared at their father. Mrs. Bennet said only, "Nonsense, nonsense!</p> <p>What can be the meaning of that emphatic exclamation?" cried he. "Do you consider the forms of introduction, and the stress that is laid on them, as nonsense? I cannot quite agree with you there. What say you, Mary? For you are a young lady of deep reflection, I know, and read great books and make extracts.</p> <p>Mary wished to say something sensible, but knew not how.</p> <p>While Mary is adjusting her ideas," he continued, "let us return to Mr. Bingley.</p> <p>I am sick of Mr. Bingley," cried his wife.</p> <p>I am sorry to hear that; but why did not you tell me that before? If I had known as much this morning I certainly would not have called on him. It is very unlucky; but as I have actually paid the visit, we cannot escape the acquaintance now.</p> <p>The astonishment of the ladies was just what he wished; that of Mrs. Bennet perhaps surpassing the rest; though, when the first tumult of joy was over, she began to declare that it was what she had expected all the while.</p> <p>How good it was in you, my dear Mr. Bennet! But I knew I should persuade you at last. I was sure you loved your girls too well to neglect such an acquaintance. Well, how pleased I am! and it is such a good joke, too, that you should have gone this morning and never said a word about it till now.</p> <p>Now, Kitty, you may cough as much as you choose," said Mr. Bennet; and, as he spoke, he left the room, fatigued with the raptures of his wife.</p> <p>What an excellent father you have, girls!" said she, when the door was shut. "I do not know how you will ever make him amends for his kindness; or me, either, for that matter. At our time of life it is not so pleasant, I can tell you, to be making new acquaintances every day; but for your sakes, we would do anything. Lydia, my love, though you are the youngest, I dare say Mr. Bingley will dance with you at the next ball.</p> <p>Oh!" said Lydia stoutly, "I am not afraid; for though I am the youngest, I'm the tallest.</p> <p>The rest of the evening was spent in conjecturing how soon he would return Mr. Bennet's visit, and determining when they should ask him to dinner. </p> <h2>Chapter 3</h2> <p>Not all that Mrs. Bennet, however, with the assistance of her five daughters, could ask on the subject, was sufficient to draw from her husband any satisfactory description of Mr. Bingley. They attacked him in various ways—with barefaced questions, ingenious suppositions, and distant surmises; but he eluded the skill of them all, and they were at last obliged to accept the second-hand intelligence of their neighbour, Lady Lucas. Her report was highly favourable. Sir William had been delighted with him. He was quite young, wonderfully handsome, extremely agreeable, and, to crown the whole, he meant to be at the next assembly with a large party. Nothing could be more delightful! To be fond of dancing was a certain step towards falling in love; and very lively hopes of Mr. Bingley's heart were entertained.</p> <p>If I can but see one of my daughters happily settled at Netherfield," said Mrs. Bennet to her husband, "and all the others equally well married, I shall have nothing to wish for.</p> <p>In a few days Mr. Bingley returned Mr. Bennet's visit, and sat about ten minutes with him in his library. He had entertained hopes of being admitted to a sight of the young ladies, of whose beauty he had heard much; but he saw only the father. The ladies were somewhat more fortunate, for they had the advantage of ascertaining from an upper window that he wore a blue coat, and rode a black horse.</p> <p>An invitation to dinner was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in town the following day, and, consequently, unable to accept the honour of their invitation, etc. Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his arrival in Hertfordshire; and she began to fear that he might be always flying about from one place to another, and never settled at Netherfield as he ought to be. Lady Lucas quieted her fears a little by starting the idea of his being gone to London only to get a large party for the ball; and a report soon followed that Mr. Bingley was to bring twelve ladies and seven gentlemen with him to the assembly. The girls grieved over such a number of ladies, but were comforted the day before the ball by hearing, that instead of twelve he brought only six with him from London—his five sisters and a cousin. And when the party entered the assembly room it consisted of only five altogether—Mr. Bingley, his two sisters, the husband of the eldest, and another young man.</p> <p>Mr. Bingley was good-looking and gentlemanlike; he had a pleasant countenance, and easy, unaffected manners. His sisters were fine women, with an air of decided fashion. His brother-in-law, Mr. Hurst, merely looked the gentleman; but his friend Mr. Darcy soon drew the attention of the room by his fine, tall person, handsome features, noble mien, and the report which was in general circulation within five minutes after his entrance, of his having ten thousand a year. The gentlemen pronounced him to be a fine figure of a man, the ladies declared he was much handsomer than Mr. Bingley, and he was looked at with great admiration for about half the evening, till his manners gave a disgust which turned the tide of his popularity; for he was discovered to be proud; to be above his company, and above being pleased; and not all his large estate in Derbyshire could then save him from having a most forbidding, disagreeable countenance, and being unworthy to be compared with his friend.</p> <p>Mr. Bingley had soon made himself acquainted with all the principal people in the room; he was lively and unreserved, danced every dance, was angry that the ball closed so early, and talked of giving one himself at Netherfield. Such amiable qualities must speak for themselves. What a contrast between him and his friend! Mr. Darcy danced only once with Mrs. Hurst and once with Miss Bingley, declined being introduced to any other lady, and spent the rest of the evening in walking about the room, speaking occasionally to one of his own party. His character was decided. He was the proudest, most disagreeable man in the world, and everybody hoped that he would never come there again. Amongst the most violent against him was Mrs. Bennet, whose dislike of his general behaviour was sharpened into particular resentment by his having slighted one of her daughters.</p> <p>Elizabeth Bennet had been obliged, by the scarcity of gentlemen, to sit down for two dances; and during part of that time, Mr. Darcy had been standing near enough for her to hear a conversation between him and Mr. Bingley, who came from the dance for a few minutes, to press his friend to join it.</p> <p>Come, Darcy," said he, "I must have you dance. I hate to see you standing about by yourself in this stupid manner. You had much better dance.</p> <p>I certainly shall not. You know how I detest it, unless I am particularly acquainted with my partner. At such an assembly as this it would be insupportable. Your sisters are engaged, and there is not another woman in the room whom it would not be a punishment to me to stand up with.</p> <p>I would not be so fastidious as you are," cried Mr. Bingley, "for a kingdom! Upon my honour, I never met with so many pleasant girls in my life as I have this evening; and there are several of them you see uncommonly pretty.</p> <p>You are dancing with the only handsome girl in the room," said Mr. Darcy, looking at the eldest Miss Bennet.</p> <p>Oh! She is the most beautiful creature I ever beheld! But there is one of her sisters sitting down just behind you, who is very pretty, and I dare say very agreeable. Do let me ask my partner to introduce you.</p> <p>Which do you mean?" and turning round he looked for a moment at Elizabeth, till catching her eye, he withdrew his own and coldly said: "She is tolerable, but not handsome enough to tempt me; I am in no humour at present to give consequence to young ladies who are slighted by other men. You had better return to your partner and enjoy her smiles, for you are wasting your time with me.</p> <p>Mr. Bingley followed his advice. Mr. Darcy walked off; and Elizabeth remained with no very cordial feelings toward him. She told the story, however, with great spirit among her friends; for she had a lively, playful disposition, which delighted in anything ridiculous.</p> <p>The evening altogether passed off pleasantly to the whole family. Mrs. Bennet had seen her eldest daughter much admired by the Netherfield party. Mr. Bingley had danced with her twice, and she had been distinguished by his sisters. Jane was as much gratified by this as her mother could be, though in a quieter way. Elizabeth felt Jane's pleasure. Mary had heard herself mentioned to Miss Bingley as the most accomplished girl in the neighbourhood; and Catherine and Lydia had been fortunate enough never to be without partners, which was all that they had yet learnt to care for at a ball. They returned, therefore, in good spirits to Longbourn, the village where they lived, and of which they were the principal inhabitants. They found Mr. Bennet still up. With a book he was regardless of time; and on the present occasion he had a good deal of curiosity as to the event of an evening which had raised such splendid expectations. He had rather hoped that his wife's views on the stranger would be disappointed; but he soon found out that he had a different story to hear.</p> <p>Oh! my dear Mr. Bennet," as she entered the room, "we have had a most delightful evening, a most excellent ball. I wish you had been there. Jane was so admired, nothing could be like it. Everybody said how well she looked; and Mr. Bingley thought her quite beautiful, and danced with her twice! Only think of that, my dear; he actually danced with her twice! and she was the only creature in the room that he asked a second time. First of all, he asked Miss Lucas. I was so vexed to see him stand up with her! But, however, he did not admire her at all; indeed, nobody can, you know; and he seemed quite struck with Jane as she was going down the dance. So he inquired who she was, and got introduced, and asked her for the two next. Then the two third he danced with Miss King, and the two fourth with Maria Lucas, and the two fifth with Jane again, and the two sixth with Lizzy, and the Boulanger—</p> <p>If he had had any compassion for me," cried her husband impatiently, "he would not have danced half so much! For God's sake, say no more of his partners. Oh that he had sprained his ankle in the first dance!</p> <p>Oh! my dear, I am quite delighted with him. He is so excessively handsome! And his sisters are charming women. I never in my life saw anything more elegant than their dresses. I dare say the lace upon Mrs. Hurst's gown—</p> <p>Here she was interrupted again. Mr. Bennet protested against any description of finery. She was therefore obliged to seek another branch of the subject, and related, with much bitterness of spirit and some exaggeration, the shocking rudeness of Mr. Darcy.</p> <p>But I can assure you," she added, "that Lizzy does not lose much by not suiting his fancy; for he is a most disagreeable, horrid man, not at all worth pleasing. So high and so conceited that there was no enduring him! He walked here, and he walked there, fancying himself so very great! Not handsome enough to dance with! I wish you had been there, my dear, to have given him one of your set-downs. I quite detest the man.</p>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:

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:

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.

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):

(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:

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

(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!

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:

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:

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.)

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

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

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.)

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

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.)

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!

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):

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.

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.)

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.

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.)

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;)

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 <center></center> 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:

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!