Please do not post, and be warned that some information may be added or changed in the near future.
This will be moved to the Profile Discussion forum when it is done.
Rules & Troubleshooting
Try to read thoroughly.
There is a chance I have already addressed your problem within the guide.
Give me as much information as possible when asking for help.
If it's a profile/code problem, paste in the exact code you used, set your profile to public, and/or give screenshots.
If you simply don't understand something, try to point out a specific part in the guide that you need help with.
Do not PM me questions about this guide, post them in the thread.
The solution to your problem may help others with the same problem.
When the content of an element is too big to fit within the element's set width or height, overflow occurs. The content wants to be outside of its containing element because there is no room for it to fit. It would be inconvenient if the only option would be to have the text falling out of its containing element into the surrounding page. All that extra content has to go somewhere, but where? This is where the overflow property comes in: It specifies what should happen if overflow does occur.
In more formal terms, the W3C page for overflow states that, "Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content."
Overflow is supported in all major browsers, with the only discrepancy being the inherit value, which I will explain shortly. The related properties of overflow-x and overflow-y, which I will introduce next, are supported in all current major browsers, but with some bugs in Internet Explorer 8 and earlier.
Overflow-x and overflow-y
The overflow property is actually a shorthand property that encompasses two more specific properties, overflow-x and overflow-y. Overflow on its own specifies the behavior for both axes at once, while these two specify how overflowing content will behave on the x- and y-axes, respectively. Overflow-x and overflow-y use the same values as overflow, but you may use them to specify different behavior on each axis.
If you use overflow in a declaration block, you should not use overflow-x or overflow-y as well in that same declaration block because that would be redundant. Use either overflow on its own, or one or both of the axis-specific properties.
What can overflow do?
Including the default value, the overflow property has five possible values:
visible: If content exceeds the dimensions of its containing element, it will not be clipped and a scrollbar will not be created. Extra content will simply stay visible and continue on beyond the constraints of its containing element as if no dimensions had been set. This value is default.
hidden: If content exceeds the dimensions of its containing element, it will be clipped but a scrollbar will not be created. Extra content will be hidden and will not continue beyond the edges of its containing element.
scroll: A scrollbar is always created, whether content exceeds the dimensions of its containing element or not.
auto: If and only if content exceeds the dimensions of its containing element, it will be clipped and a scrollbar will be created.
inherit: Inherits the value of its parent element. Not supported at all in Internet Explorer 7 and earlier. Some problems in IE8 because it requires a !DOCTYPE, however this does not make a difference on Gaia profiles since Gaia has already declared a !DOCTYPE. Fully supported in IE9 and later. Most Gaia users tend not to ever use this, or may not even know it exists. You will be perfectly fine not ever using this either.
Overflow and the float property
Besides scrollbars, overflow has another use: To repair collapsed panels caused by floated elements. Overflow isn't specifically for this purpose, but it works and does come in handy when you need it. If you don't ever use the float property, you will not need to know this.
What happens: If a parent element contains only child elements within it that have a float property set, the parent element will collapse. If the parent element doesn't have a background or a border, this problem may not even be apparent, but to protect against unexpected problems it may cause, it's a good idea to fix it. The overflow property can do this easily.
If you give the collapsed parent element an overflow of auto or hidden, that will cause it to expand to properly fit the child elements. An overflow of scroll also technically works for this, but it also gives awkward unnecessary scrollbars, so auto or hidden are your best choices. Both overflow values give the same result as long as nothing actually ends up overflowing, in which case auto would create a scrollbar and hidden would hide the overflow– just as usual.
Demonstration: The following images were originally created entirely with CSS on Google Chrome.
float:none | overflow:visible
Unfloated child elements, default overflow on parent.
float:left | overflow:visible
Left-floated child elements, default overflow on parent. Parent element collapses.
float:left | overflow:hidden/auto
Left-floated child elements, overflow on parent set to hidden or auto. Parent element wraps to fit child elements.
Ah, hidden scrollbars; So popular, yet so annoyingly difficult to make work (and such bad user interface!). I understand the appeal –who wants big bulky scrollbars in the way, anyway?– but the existing code that most people use to create them has left profile makers with more problems than solutions, and not to mention a fair deal of confusion along the way.
As much as you may love the idea of hiding your big ugly scrollbar to get it out of the way of your profile, in reality, hiding your scrollbars isn't really as great an idea as it seems. It looks nice, sure, but it can also cause problems for some of the viewers of your profile. Maybe you take it for granted, but not everyone has a mouse or trackpad that can scroll without clicking on a scrollbar and moving it. Removing the option of an accessible scrollbar may leave them unable to scroll your content without just resorting to using the arrow keys– which is quite annoying, especially if your profile has a lot of content on it; Try it out, you'll probably see what I mean.
If you want to have some sympathy for the people who are stuck clicking and dragging scrollbars, I suggest you skip the rest of this section and just stick to a regular scrollbar. Give the panel a height and set a value for overflow (auto is usually best for this):
Of course change selector to the selector for the panel of your choice, and change ##px to an actual pixel value– if you don't, the code won't work at all.
However, if you decide to disregard those people and hide your scrollbar anyway, you may continue reading.
How do hidden scrollbars work?
Creating hidden scrollbars is a technique that is fairly basic conceptually, but can be quite confusing and difficult for people unfamiliar with the way CSS and HTML work. To help explain them in a way that may make it less confusing for the inexperienced, I have created a handy gif of the key part of making hidden scrollbars work:
To explain in writing what that image means, a hidden scrollbar is made up of an inner element and an outer element, and uses padding and the overflow property to create and hide the scrollbar. The scrollbar isn't actually invisible, it is still there on the inner element, but the padding that you add actually just pushes the scrollbar outside of the outer element so you can't see it anymore. The outer element has its overflow set to hidden, so everything beyond the outside of the outer element will be invisible– including the scrollbar after it's been pushed out.
Not all panels come with a built-in inner and outer element or the functionality to create one yourself. Only the panels that have both an inner and outer element work with hidden scrollbars— without both elements present, the hidden scrollbar simply cannot be made. The following are the selectors for the panels that allow hidden scrollbars:
Outer element selector: #id_friends
Inner element selector: #id_friends .style1
Outer element selector: #id_comments
Inner element selector: #id_comments dl
Outer element selector: #id_about
Inner element selector: #id_about ul
Outer element selector:#id_signature
Inner element selector: #id_signature p
Outer element selector: #id_badges
Inner element selector: #badges
Outer element selector: #id_journal
Inner element selector: #entries
Outer element selector: #id_gifts
Inner element selector: #id_gifts ul
Outer element selector: #id_store
Inner element selector: #id_store div
Outer element selector: #id_guilds
Inner element selector: #id_guilds ul
Outer element selector: #id_custom_####
Inner element selector: #id_custom_####_content
Outer element selector: #friends
Inner element selector: #friendGroup
Outer element selector: #comments
Inner element selector: #comments dl
Outer element selector:
Inner element selector:
Outer element selector: #journal
Inner element selector: #entries
Outer element selector: #profile
Inner element selector: #equipped_id
Outer element selector: #about
Inner element selector: #about ul
How to create a hidden scrollbar
The existing code options for creating a hidden scrollbar have all been fairly lengthy and confusing, and have required the user to input multiple values and ended up requiring much trial-and-error testing just to get everything working correctly. I have simplified the code so that the only thing you need to specify is the height of the inner element of the panel.
Everything in this code reflects the image demonstration above of how hidden scrollbars work. Outer element selector means the selector for the element on the outside that hides the scrollbar. Inner element selector means the selector for the element on the inside with the actual scrollbar on it.
In order for the scrollbar to work, all you have to do is substitute in the correct selectors for the inner an outer element, and you have to give the panel a height in order for the scrollbar to show up. The selector for the inner element replaces inner element selector, the selector for the outer element replaces outer element selector, and the height of the panel replaces ##px. Edit in the proper values and put the result into your custom CSS, and it should work.