IE9 Renders a Sidebar beneath the Content

[al2henry]

I am a self taught "elementary" html coder (still find hard to resist putting formatting on the page along with the content) and have created two web sites for orgs I belong to:

http://www.conservancyonmayne.com and http://www.vivaldichoir.org.

I recently added a code snippet I found at Digital Point that performs a Google search on the local site. Delighted to find it worked first time (the original more complex piece of code that interacted with Google directly became useless due to its mistaken attribution of "mass e-mail" proclivities to each and every computer it was tested on - by self and many users) I added the search box to our "home" pages and in the case of the Conservancy to the "About" page as well. Pages render fine in Firefox, Chrome & IE 7 & 8 as well as Safari. However in IE9 my left sidebar containing the search input box gets thrown to the bottom of the page. Commenting out the Digital Point code of course removes the search box, but otherwise the page renders perfectly.

I also tried commenting out the reference to the Search DIV in the CSS in case there was something incompatible with the formatting - no change.

The full code I picked of from Digital Point reads as follows:

" <iframe style="width:220px; height:35px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php? site=www.conservancyonmayne.com&s=120&b=1&y=1"></iframe> "

Anyone got any clues as to why this is happening?

Thank you!

Alan

[floatingDivs]

Hi Alan (al2henry),

You should familiarize yourself with CSS floats.

Here's what you should do (the ONLY thing you change).

#navBar {
float: left;
margin: 0;
width: 21%;
}
</div>
<!--end navbar -->

<div style="clear:both;"></div> <--// Add this under the "navbar" div to "clear" the floats (you'll learn about that when you read the post I've linked to above.

What the code above does is remove the margin-right (79%), adds a float on the left navigation, and sets it width to 21%.

[al2henry]

Hi floating Div - Your suggestion and link was very helpful. I put the float left in the "Search Div" and immediately the sidebar was restored to its correct position. I hadn't realised the float had other applications than placing pictures.

Unhappily the other menu items that should be below the search box overlaid it. After messing with "margins" and "padding" and px values I regret I gave up and stuck in 3 <br> tags on the page and gave the section links a border-top in the css. Displays great in IE and FF, and that's what counts, for now!

I will pursue the link to Chris Coyier's stuff a bit further - maybe one day I can do "well formed"

Thank you again!

[floatingDivs]

Hi al2henry,

The link I posted actually explains what needs to be done to clear (hint hint) the problem where elements underneath a floated element overlay it. Sticking 3 break tags worked -- that's great -- but it's not a great solution in general.

Also, I'm viewing the site in IE9 right now and it's not working properly.

Lastly, an ID has to be unique otherwise you're breaking validation rules. For instance, right now you have two divs with the id navBar and that's not good.

That's all I saw wrong from a general look around.

Glad to see it helped.