Breaking your WordPress theme- sidebar moves down?
I’ve posted about this before: http://blogosopher.com/?p=66 and mentioned the same source: Lorelle.
There are two common reasons people have their themes “break” or act oddly:
- they’ve copied formatted text from Microsoft Word that starts adding code that “overrides” the CSS of your theme.
- the picture or object that they try to place in their post is too big.
You can easily identify the first problem by noticing that your font has changed in a post and everything following it. The way to fix it is to go to your edit post function- click the “quicktag” HTML button- and search out any thing that says “span” “font” and a font name, “H1″ H2” etc- (it will be in the “< " and ">” carrot figures) these are not tags that the standard WordPress interface uses. Anything you undo here- will be able to be fixed in the standard WYSIWG view of the “Write Post” window- where you can reformat to your heart’s content. Sometimes Microsoft Word adds so much trash- it’s easier to copy the content back into Word- and then save it as text only before pasting into the Write Post window.
The second problem- where the sidebar moves to the bottom- typically is only seen by the 90% of people who still aren’t using Firefox. Microsoft Internet Explorer doesn’t understand some of the fundamental code to CSS (still)- and you must test by looking at your site using IE 6 on a PC. The simple solution- use Thumbnails- and never have images wider than about 400 pixels. However if you want to read all the details of this problem- Lorelle has a ton of good links – look at the excerpt of her post- then continue on to the link:
Lorelle on WordPress
One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.Web Design Sidebar pushes out over the content areaHave you ever tried to shove a square peg into a round hole? Or squeeze into a size 2 dress when you really should be wearing a 22? The results are what happens to web page designs when someone tries to cram something too big into a small space.
All web pages today feature at least two â€œcolumnsâ€, two side-by-side sections to display their content. One is typically called the sidebar and the other is the content or main column or something similar. Each of these columns are known as containers, as they contain content and design elements within their borders. When something goes into these containers that exceeds their inherent width, they tend to stretch and break the design.
Put something wider than the width of the sidebar into the sidebar and it stretches to accommodate it. Since itâ€™s literally pushed beyond its seam, it shoves the content section down to the bottom of the page. Put something wider than the width of the content section into the content section, and it shoves the sidebar around. If what you include in any container on your web page is wider than the designated width, something has got to give and it is usually your web page layout and structure.
The key is to only put things that are the maximum width into these columns (containers) so they wonâ€™t stretch and bork your web page design.