Member Avatar for halfdozenplus1

I am trying to finish up a website that in all intents and purposes SHOULD be done, but when tested in IE7, the text on 2 of the pages "jumps" to one word per line. It happens on the 2 pages that do have their own templates, they were created from templates. I thought I was dragging in code from Word, but even when I start a new page from a template and just type text directly onto the page, save and move it live - it's still doing it.

I thought maybe it was a Spry Menu issue because it seemed to happen as soon as I hovered over the menu, but now I'm not sure.

Thank you SO SO much for any help!

Jessica

  • 2 Contributors
  • 2 Replies
  • 119 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by michaelcp23

Dani AI

Generated

A few concise, practical checks and fixes to try. The symptom you describe (text snapping to one word per line when the menu is hovered) is usually a layout collapse that IE7 exposes when a script or :hover changes an element’s computed box. Spry may only be the trigger — the real causes are often invalid HTML, an uncleared float, or IE7’s "hasLayout" quirks.

  1. Isolate the trigger
  • Make a copy of one problem page and strip out Spry and nonessential CSS. If the text stays OK, Spry/its CSS is the trigger. If it still breaks, the template or content has the issue.
  • Validate the page HTML/CSS with the W3C validator to catch unclosed tags or stray markup: W3C Validator.
  1. Inspect what changes on hover
  • In IE (use an IE8 VM and F12 tools in IE7 mode if needed) check the computed width/position of the content block while hovering the menu. If the content wrapper’s width collapses or a margin/padding suddenly changes, that points to a layout/float interaction.
  1. Fast fixes that often work in IE7
  • Give the text container "hasLayout" so IE keeps its size:
    #content { zoom: 1; white-space: normal; }
  • If the menu is affecting document flow, make dropdowns position absolute so they don’t resize siblings.
  • Add an IE-only stylesheet via conditional comments for targeted fixes:
    <!--[if lte IE 7]>
<style>
#content { zoom:1; }
</style>
<![endif]-->
  1. Final notes
  • Compare the working pages’ head and wrapper CSS to the broken template; tiny differences (missing clears, different display values) are often the culprit.
  • If Spry is the root cause and replacing it isn’t feasible, ensure its hover states don’t change parent sizes (use absolute positioning for submenus and explicit widths on the menu container).

For background on whitespace behavior and layout properties, see MDN’s white-space docs: white-space.

If these steps don’t reveal the cause, the quickest next move is to paste the minimal broken page (HTML + the small CSS that affects the wrapper) so the exact computed styles can be checked.

Member Avatar for michaelcp23

I am not sure exactly what error are you experiencing. I viewed it in IE7 & IE6 and all I see is a space between the nav bar and the first top image. Is this is problem you are experiencing?

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.