Member Avatar for jule2910

Having big trouble with my web site... the main content of the pages simply drops down... How can that be fixed....??? Pls take a look....

At first the page looked fine.. but after I applied the CSS styling... the content of the middle column dropped down.... what can I do about it??



  • 4 Contributors
  • 4 Replies
  • 91 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by jule2910

Dani AI

Generated

Three quick, practical additions that build on what and observed (and what confirmed): IE6 problems with floated columns are often rooted in quirks-mode box-model behavior and a couple of IE6-specific bugs. The following checks and small fixes tend to solve the “middle column drops” symptom without rebuilding the layout.

Ensure a standards-mode DOCTYPE so IE uses the standard box model. For IE6-specific behavior, trigger hasLayout on the parent or problem element (this stabilizes float math) and apply the well-known float fixes: add display:inline to floated columns to stop the double-margin bug, and use a clearfix or overflow:hidden on the wrapper to contain floats (watch for clipping). If widths are right up against the container width, try reducing a column by 1px—IE6 rounding can push things over the edge.

Quick diagnostics and a small IE-only rule set to try in a conditional stylesheet:

/* IE6 fixes */
.column { float:left; display:inline; }     /* stops double-margin on floats */
.wrapper { zoom:1; overflow:hidden; }        /* triggers hasLayout and contains floats */

Temporarily add colored borders or backgrounds to each column to see computed sizes, test in an IE6 VM or emulator, and keep IE-only fixes isolated with conditional comments so modern browsers remain unaffected.

Recommended Answers

All 4 Replies

Member Avatar for macneato

Hi,

Cant view the second example and may you please post the source as well.

Regards,

Member Avatar for t_serva

I was not able to view your site as I encountered a "forbidden" message. So I may be wrong about your problem. However, we just ran into this on our site. Looked fine in FF and IE7 but the content that had a float was dropping below the div that it was supposed to clear. If this is the case, we discovered that for some reason, ie6 calculates the widths or the combination of the div width and margins and padding in such a way as to think that the div that is being pushed down does not have enough room to be in it's intended place.
The answer for us was to play with the containing div's width so that the div being push out of place has enough room.
Hope this helps,
t_serva

Member Avatar for MidiMagic

You have not yet given public permission to view the files. This means that only you can see them. You need to change the permission settings for them in your ISP.

This may be a manifestation of the fluid nature of div tags. If you absolutely need a rigid structure, use a table.

This can also be caused by the IE incompatibility. This happens when you put nonzero surrounding styles (margin, border, padding) in the same tags that contain size styles (width, height).

IE puts the surrounding styles inside the size styles. Other browsers follow the standard, putting the surrounding styles outside the defined sizes.

The fix is to not put them in the same tag or defined style. Instead, nest two pairs of tags, one with the sizes, and the other with the surrounding styles. Then all browsers render the page nearly identically.

Member Avatar for jule2910

Hello ! Thanks for getting back to me ! I finally found it out myself as well.. it was excactly what you discribed above !

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.