Updates & Information
Welcome to CSS|Guide: Troubleshoot. This guide is a subsection of CSS|Guide devoted to errors and problems related to coding. Filter solutions were initially part of CSS|Guide for about a year, but were moved to a seperate petpage after the most recent filter update. This is for easier reading and organization.
Troubleshoot contains additional bits of information not originally found in CSS|Guide with more detailed explanations and reasons for problems found around the site. If you have something to add, please neomail me ASAP!
As of April 8, 2011, we are officially open.
[4/8]: Welcome to Troubleshoot, everyone! It's an off-shoot of CSS|Guide with a special focus on coding or text related issues involved in the creation or modification of layouts and personal pages. :3 That might've been a bit too wordy...basically, we're here to help you with your layouts. All of CSS|Guide's filter solutions have been moved here so that everything's in one nice, easy to navigate space. Hopefully this page will be of use to some of you and please feel free to mail me if you see something that you think needs to be fixed or added!
To affiliates & listers, I consider Troubleshoot to be part of CSS|Guide (although, yes, on different petpages). So, if you've listed or affiliated with CSS|Guide, you've listed & affiliated with Troubleshoot. I understand some listers may want to list the two seperately. That's perfectly alright. Troubleshoot will not have it's own unique link back button, however.
Newest Filter Update
The most recent filter change occurred on Monday, January 31, 2011.
This was an attempt by TNT to update the site's filters so that they were more up-to-date with W3C's coding standards. In other words, it's not completely TNT's fault. Many elements labelled as "deprecated" or "obsolete" by W3C (international standards organization for the world wide web) have essentially been rendered useless on the site and in most cases, are removed from codes after they've been saved. Some deprecated elements are still of use; however, since they're now deprecated, they can be excised from use at any time:
Deprecated elements are outdated and have the potential to be obsolete in the future, or may already be. This is why tags like 's' and 'u' no longer work on their own.
This filter was originally put in place in shops, along with another filter that blocks elements that could be potentially hazardous when mixed with the ability to spend points (Ie cookie grabbing). Several months after its use in shops, the filter was expanded to other parts of the site. I should note, TNT has never publically stated why the shop filters are the strictest. It's generally assumed that the additional filter is to prevent CGers and scamsters from getting users' account information or from robbing the shop guests. Again, only speculation.
This filter organizes codes once they're saved and tabs elements onto various lines. It's largely unnecessary, but likely the "proper" thing to do. It also automatically closes any tags that are left open at the end of a code. This is largely a problem for users wishing to position their user stats on their lookups or for those who wish to place a table around their shop items. While there is no workaround for the shop problem, there are some alternatives/additional information for userlookup designers.
Music codes are no longer allowed on Neopets:
I myself don't care much for music codes anyway. 99% of what got used on Neopets was bandwidth theft anyway, unless the codes were displayed on an actual website, not a petpage.
What's more, bgsound is a non-standard element that only works in IE. The better thing to use is:
However, Neopets does not allow their users to use this. Bgsound was the only method for posting music and it was a bad one from the get go.Clarrification:
I saw this recently on a board and it made me lul. TNT did not ge rid of music codes because CGers were using them to gain access to your accounts. As stated before, the codes were dated, browser-specific, and nonstandard. It's not an element that any self respecting coder would include in their HTML, so it's been barred from the site.
The marquee is a deprecated attribute.
There is no HTML/CSS workaround for marquee.
The bgcolor attribute is depricated and no longer works:
Only the HTML attribute is deprecated. Instead, CSS can be utlized.
You could also incorporate the style elements right into the HTML:
Also unallowed is the background attribute:
This was used primarily for adding background images to pages. Much like with background color, we can instead rely on CSS to get the job done.
You could also incorporate the style elements right into the HTML:
For additional codes pertaining to background colors and images, see the backgrounds section of CSS|Guide
The following elements have been deprecated and no longer work:
Target was deprecated in HTML4 and, therefore, is currently not allowed on the site.
What's interesting is that it could become "un-deprecated" for some elements in HTML5. W3C's Working Draft says: Also, the target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications.
Align is an attribute that is deprecated only in images:
Depending on exactly what you want to do, there are a couple workarounds for this problem. If you just want a simple right alignment, try this:
Or if you want more of a text wrap effect:
As far as I can tell, overflow-x and overflow-y have not been deprecated, so I don't know why the filters remove them from codes, but they're not allowed any longer.
Instead, just stick to the rather bland "overflow" property:
Opacity, again, is not listed as being deprecated; however it's been noted that opacity is not a CSS standard and is part of the W3C CSS3 recommendation. I take this to mean it could eventually come back. xD
There is no alternative for opacity, but it's suggested that users manually add transparency to their own layout images via an image editing program if that's all that they want to add some transparency to.
Positioning With Inlines
Inlines will get you through the position filters for petpage, gallery, and some userlookup layouts. Inlines are a way of taking what would normally be found in a css portion of code and moving it to the HTML portion. So something like this:
Could be re-written into HTML (inlining) like so:
Or if you're lazy like me and only want to do the bare minimum to appease the lords of the filters, you can keep your css portion in the css and inline the section that the filters are catching (position):
Either will do.
Gray Bar & Upper Alignment Fix
This is a bit of a difficult problem to describe, but basically, if part of the gray background from the upper advertisement (or header background if you're using certain themes) is just barely showing at the top of your layout, this is for you. This solution is also for those people who have removed that gray bar/header background element, but have found that their layout has nudged its way too far up the page.
This solution fixes both problems.
This fix should work for most layouts, except for shops. See the shop specific code sections for ways to remove/modify portions of your shop.
To remove the gray bar & realign your layouts, please use this code:
If your layout was originally centered, remove "margin-left:0px;" from the code. If your layout was originally positioned to the right hand side of your browser, change "margin-left:0px;" to "margin-right:0px;".
Please do not use "margin:0px" with #main. This simplification only works for some browsers.
If you have a guild that is not completely accepting this solution, try looking for things in your code called "#main". If "#main" is attached to anything with padding, margin, or was perhaps used to hide the guild info sidebar, change "#main" to "#content". You may need to do some additional modifying, but this trick tends to get people back on the right track. Please neomail me if you're still having issues!
Some layouts may not immediately accept this solution because they use margin and padding to position items in their layouts. If you can't get things to work, please neomail me.
If your links are being 'disallowed', make sure you're putting quotation marks around your URL, like so:
Don't use two single marks. Use the double quotations or it still won't work. Copy and paste if you must.
This isn't so much a new filter as it is TNT enforcing an HTML rule. It's proper to place quotation marks around URLs.
Positioning Stats Style Fix
I strongly suggest that everyone use inline style tags to position their own images and divs, however, if you need to position a module, this is for you.
First, take everything after your [/style] tag, and throw it up above your css style tags at the start of your code, like so:
You want absolutely /NOTHING/ after that last, closed style tag or your layout will go wonky.
Next, take that closed style tag and place a space between the left arrow and forward slash, like so:
Use the greater/less than symbols instead of brackets. (Filter keeps giving me a hard time, so I can't change it myself it seems.)
The opening style tag does not need to be touched. And your userlookup should then work. If it doesn't, please feel free to neomail me.
I also made a somewhat more in-depth, color-coordinated tutorial that may help more of you out a bit. Click here
for the tutorial.
Positioning Stats Padding Fix
This solution is ideal for those people who want to keep their stats in a nice flowing column as opposed to manually positioning all of the modules individually.
I simplified the padding, but don't freak out. The 600 value denotes the 'top padding' (or position from top). The 30px value denotes the 'left padding' (or padding from the left).
If you have a right aligned layout, change 30px to zero and play with the first 0px value. Also include float:right; with #content.
Also, parts of some layouts, like header images, may block out parts of your stats after your finished positioning them. Z-index the image that's ontop of your stats to z-index:-1; Be sure to let me know if you need help with this.
Forcing scrolling stats is not as simple as it once was, though in time it may become easier. The most ideal thing to use for scrolling stats would be something like:
HOWEVER, this code is incompatible with a major browser, Internet Explorer, which, in my opinion, has typically been the black sheep of the bunch when it comes to coding compatibility. The issue IE has with the above code is that .content is associated with td, a table element. And IE, for some reason, wants absolutely nothing to do with a scrolling table element. Will IE fix this in the future? They've had 9 versions to get it right...so...
The alternative is a less than desireable, signficantly messier code.
This code puts the entire page inside of the scroll box. So, you'll have to remove excess elements like headers and footers. You'l also have to make your entire physical layout (the pictures) one giant background image. Any other additional divs or images that you try to position will be positioned within the scrollbox. Like I said, messy.
Guild Specific Problems
Positioning Guild Bar
First things first. Can you use the style trick from userlookups in guilds? No. In guilds, the solution gets eaten and pooped out in certain browsers. It does work for browsers like IE8 and Mozilla, but others like Chrome throw enormous temper tantrums.
So, take all of the images and divs that you positioned yourself and inline them. If you need help with this, see my section on inlining
If you still need help positioning your guild info bar, use this:
And just fiddle with the padding values until your stats are positioned appropriately.
I think most major layout makers use this anyway, so it shouldn't be much of a problem for most of you.
Petpage Specific Problems
A disallowed word will appear as -disallowed_word- when you save your page. It will also remove all content and coding after the word, unless an open parenthesis ( is reached. Known disallowed words include:
An invalid word will appear as -invalid_words- The only one presently known for petpages is 'base' and it is only problematic when used in image URLs:
To avoid this problem, simply change the name of your image (assuming you're hosting it).
A blocked word will appear as -blocked- and no additional portions of your petpage will be affected when a word is blocked. Known blocked words include:
If instead you are receiving the -blocked- notice as part of a "new rule" notification, see the blocked error
section under 'blocked images' for additional tips.
Save Changes Button
With the newest filter change, it's become harder to save changes on petpages. For those familiar with z-indexing, I suggest z-indexing the header image of the layout (if there is one). The button tends to hide about an inch from the top of the window, in the middle of the window of your browser. z-index whatever you see in that area:
For additional help, adjusting the size of your window may allow the button to shift around so you can see it.
Other less intricate methods include adding a couple hundred 'br' tags to the end of your code or 'tabbing' through the page until you believe you've found the hidden button.
The cause of this error is presently unknown, but it's known that " marks disappear at the end of sentences. Instead, you can use the single 'tick marks' or, as some prefer, you can italicize any text that's supposed to be in quotes.
Shop Specific Problems
Invalid words or disallowed property names found in your style tags.
^ If you see this error, you've included at least one of these elements in your CSS:
These, and any other variations, are not allowed in shops. It is unknown why these elements are unallowed since TNT has never formally said anything about the strict shop filters. However, the general consensus is that these elements, when mixed in various ways, have the potential to allow thieves, scammers, and possible CGers to steal accounts or neopoints from users when used in a setting like a shop. But again, nothing official has been stated.
Much more intricate, character hoarding workarounds are available for removing aspects of your shop layout on CSS|Guide
Hang On! There's a new rule!
You can only embed src files that end in:
^ If you see this error and it's blocked parts of your URL, there are a few possible causes.
First, check the code for unnecessary spaces or additional punctuation (Ie ending the URL with a period). Spaces may also appear as %20 within the URL. Rename the image if you see these in your URL.
If you have some sort of tutorial involving image codes, make sure you aren't using any of these as placeholders in the code:
These will directly trigger the error. Use actual image URLs as placeholders.
You should also be sure that you are using the direct url. For example:
These are some of the most common causes and solutions. Others may also exist.
Invalid words, disallowed words or words that should have quotes but do not were found inside your html tags.
^ If you see this error and it's blocked parts of your URL, place quotes around your URL:
Do not use two single apostrophes to make one quote. It doesn't work like that.
In some portions of the site, the filters will automatically surround your URL with quotes if you have forgotten to do so. Also note that this is not some sort of "filter workaround." It's proper HTML.