Member Avatar for 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:

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=&s=120&b=1&y=1"></iframe> "

Anyone got any clues as to why this is happening?

Thank you!

Alan

  • 2 Contributors
  • 3 Replies
  • 201 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by floatingDivs

Dani AI

Generated

This is a classic float/clearing/layout interaction rather than a Google iframe bug. was right to point at floats, and the duplicate id="navBar" that was noted can also cause CSS rules to behave unpredictably. The temporary fix of inserting <br> tags hides the symptom but leaves brittle markup that will break again as the layout changes.

A short, practical checklist to diagnose the problem:

  • Validate the HTML (unclosed tags or duplicate IDs will break flow).
  • Use IE9 Developer Tools (F12) and confirm the Document Mode is IE9 Standards (Compatibility View or an X‑UA‑Compatible header can make IE9 behave like older versions).
  • Inspect the sidebar container: if the floated box isn’t contained, later blocks can slide up underneath.
  • Check the iframe’s computed display and width — an inline iframe or an inner page wider than the sidebar can push layout.

A robust, IE9‑friendly fix is to contain floats with a clearfix (no extra markup required) and give the iframe its own stable box. Example:

/* clearfix to contain floats */
.cf::after {
  content: "";
  display: table;
  clear: both;
}

/* keep the iframe from behaving like inline text */
.search-iframe {
  display: block;
  width: 220px;
  max-width: 100%;
  height: 35px;
  border: 0;
}

Apply the cf class to the wrapper that contains the navigation and the main content. As an alternate quick fix, giving the wrapper overflow: auto; or overflow: hidden; will also create a block formatting context and contain floats (watch for clipped content). Avoid using <br> tags for layout; prefer clearing, margins, or giving elements their own box model. Finally, fix any non‑unique IDs (use classes where repeatable styling is needed). If long‑term maintenance is planned and IE9 support is not required, consider migrating to modern layout methods (flexbox/grid) for a cleaner solution.

Recommended Answers

All 3 Replies

Member Avatar for 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%.

Member Avatar for 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!

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.