Interesting theme problem

I’ve been modifying my theme and in Flock and Firefox the blog background is was entirely black, yet in Internet Explorer, the background of the post area is was white and the area surrounding the blog content area is was black. Not quite sure what the issue is was but it’s an interesting problem to say the least.

UPDATE: Ok, so Matt rocks! He gave me some hints on how to improve my code.

The problem is that your theme is floating the content div left and floating the sidebar left. In CSS – on Mozilla browsers – a floated element does not influence the height of the parent element. In your case, the div “container” is the parent element and because it effectively has no height-adjusting elements, the “container” div (which is what has the white background) does not expand down the page.

1. Keep it Div – This one can be a pain.

Make one of the divs (either the content div or the sidebar div) not float. The easiest way to choose would be the one that will always be the longest in length…most likely the content div. Once you have removed the float, you may need to fiddle around with the width of the content div to prevent the sidebar div from wrapping to the bottom of the page. The drawback is this: Sometimes your sidebar may be longer than your content.

2. Go Oldschool – This one is archaic but functional.

The fact of the matter is, div layouts are a pain to fiddle with to get working with all browsers all the time. I still haven’t mastered it and it takes a lot of tweaking. What you can do is use a table:

[table]
[tr]
[td valign=”top” style=”width: 550px”]Your content (divs and all) go in here[/td]
[td valign=”top” style=”width: 200px”]Your sidebar (divs and all) go in here[/td]
[/tr]
[/table]

The oldschool way would be the easiest to implement with the quickest results. The drawbacks? Well, its an oldschool way of doing things…layout with tables. Its frowned upon by some, but lets face it…tables are extremely functional and should be used where necessary to keep the end user’s experience consistent across browsers.

I won’t say that I understood all of it as I am still learning the finer points of CSS coding but the bottom line is that I removed the float from the content div and now all seems to be well.

2 thoughts on “Interesting theme problem

  1. The problem is that your theme is floating the content div left and floating the sidebar left. In CSS – on Mozilla browsers – a floated element does not influence the height of the parent element. In your case, the div “container” is the parent element and because it effectively has no height-adjusting elements, the “container” div (which is what has the white background) does not expand down the page.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s