View Full Version : Column Problem in IE - Blog

05-21-2009, 05:57 PM
In the course of making my first blog, I have run in to a severe roadbump. My columns are not displaying side by side as intended. In FIREFOX they are displaying properly and I have no issues. In IE, the sidebar jumps to the bottom no matter what I try to do. At first I figured it was a slight miscalculation of widths but I have been unable to correct the problem no matter the amount of stuff I change.

Any help would be appreciated.

It works in IE before it is put in the blog.

Otherwise it fails. www.freethedream.com

The CSS is a bit long to post (and unfortunately a bit messy)

05-21-2009, 08:37 PM
You have a few validation errors (http://validator.w3.org/check?uri=http%3A%2F%2Ffreethedream.com%2F&charset=(detect+automatically)&doctype=Inline&group=0), most of which are alt tags, but there's an extra </div> somewhere which might be contributing. Worth sorting this out first.

05-23-2009, 06:01 PM
Cleaned up Validation issues (minus the one it has with a 'label' tag that's part of the search plugin. Removed search completely and it still didn't fix the problem so it's not that)

Need help. Apparently it shows up in IE 8.0 correctly, just not 7...and I'd assume 6, since 6 hates everything anyways.

05-23-2009, 07:08 PM
Been playing around with this for a while. Is it possible that your html has got changed in the transfer?

On the "correct" version you have

#content{margin:0px auto}
#columns{margin:0px auto;width:900px}

and #sidebar is nested within #columns. But on the "wrong" version #sidebar is not nested within #columns and columns is still 900px wide, hence causing the float drop, because #sidebar won't fit?? Why it's OK in FF I'm not sure.

05-23-2009, 10:07 PM
Good god I feel stupid. I am surprised I didn't figure that out before. Thanks a lot, I know you spent quite a bit of time scanning through my code. My first attempt at a blog has been a bit challenging but I'm glad it's 'mostly' done now. Thanks again.

05-24-2009, 02:06 PM
I have the same problem. When my blog is loaded in IE 6 everything in my right sidebar drops down to left bottom. My site: DTs Flash Drive Blog - Recent Posts (www.usbmemorysticks.net/recent-posts). I've been told in later IE versions it displays find as well as with firefox, safari etc. Is there something wrong with my sidebar-right.php or something with my css? Would greatly appreciate any feedback.
Here's the code of my right sidebar:

<!-- Sidebar -->
<div class="sidebar sidebar-right">

<h3>RSS Feed</h3>
<div id="sidebar-feed">
<a href="<?php bloginfo('rss_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss_feed.jpg" alt="RSS Feed" width="160" height="60" /></a>

<form id="searchform" method="get" action="http://www.usbmemorysticks.net/">
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="Search" />
<!-- Sidebar -->

The other elements come from the wordpress widget and no matter if I rearrange everything through there or put everything in the sidebar-right.php, IE still has this display error. So I guess it's my stylesheet? Unfortunately I'm pretty new to all this...

05-24-2009, 02:26 PM
Have a try by removing the widths from the inner elements of right side bar, say from
.sidebar #searchform and .sidebar h3

05-24-2009, 06:59 PM
Nice idea but unfortunately that didn't fix it. I just noticed another strange thing: Between the search box and the elements below that is quite a gab. In Firefox its relatively small and negligable, but in IE its huge.