Rp Tutorials

Live Example

I know right?

It took me a few days and several hours to figure this out so I'd appreciate it if you credited rp_tutorials. Or you can pay me in cookies. Whichever is easier for you. Mkay?

( THE CODE )

Leave any questions or feedback in the comments, thanks!

If you're having issues with Internet Explorer not honoring your widths, heights, paddings, and margins on elements in your layout, add this bit of code to your style/override: * { zoom: 1; }

The zoom property only works in IE and * { zoom: 1; } is telling the browser to render every element at 100%. You can play around with giving zoom other values and it's pretty cool because it will enlarge (values greater than 1) or shrink (values between 0 and 1) the element, BUT it will only render that way in IE. No other browser supports the property. So, basically, it's a hack, but it will save you a lot of headaches if you don't want to sit there figuring out where to add min-width on each element.

ETA: I've also found that mass setting the position to relative resolves a lot of issues in IE as well. So, putting them together: * { position: relative; zoom: 1; }

Make sure you put this one at the TOP of your style/override because if the positioning is already set for some elements, you'll want to keep that in-tact. The only problem with doing this, though, is that it can make certain elements render a little wonky, like they're just floating off to the side. To fix this, go find the rule for the element's type in the style/override (or add a rule for the type if there isn't one) and switch it to position: static; which is the default for most elements.

( character profile layout )