Member Avatar for cmills83

Everything else is good so far except the drop shadow around the main content box only goes down to the bottom of the browser window in FireFox and Netscape but works in IE.

Here is the HTML site I am redoing in CSS

Here is the CSS site with the broken dropshadow

Check the source and let me know if you have any ideas, Thanks.

  • 1 Contributor
  • 2 Replies
  • 100 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by cmills83

Dani AI

Generated

As discovered, adding plain text made the shadow behave differently — that change is a good clue. When a wrapper's background (your shadow) stops at the viewport instead of following content, the usual culprits are: the wrapper isn't containing floated children, the wrapper has height:100% (which only works if parent heights are defined), or the shadow image/element is applied to the wrong box.

Quick checklist and fixes to try:

  • Verify the wrapper's actual box. Temporarily add a visible border or background to the container to see its computed height in Firefox and IE. Use Firebug or the IE developer toolbar to inspect computed height and overflow.

  • If child elements are floated and the wrapper collapses, contain the floats. Two safe fixes:

/* clearfix for modern browsers */
.container:after {
  content: "";
  display: table;
  clear: both;
}

/* quick IE fix to trigger hasLayout */
.container { zoom: 1; }

Alternatively, overflow: auto or overflow: hidden on the wrapper will also make it expand to contain floats (watch for unwanted scrollbars when using auto).

  • If you used height:100% on the wrapper, remove it unless you explicitly set html, body { height: 100%; }. For flexible pages prefer min-height (or let the wrapper be height: auto) so the shadow can grow with content.

  • If the shadow is a background image, ensure it is set to repeat vertically (repeat-y) or use left/right shadow elements that stretch with content.

Why adding text “fixed” it: inserting non-floated text forces the wrapper to expand, masking the underlying float/height problem. Applying one of the fixes above will make the shadow reliable across Firefox, Netscape-era browsers, and IE.

Member Avatar for cmills83

I changed it a little and now it works fine in FF but not IE. ugh why do 80% of internet users still use IE it is gay.

Member Avatar for cmills83

I changed it a little and now it works fine in FF but not IE. ugh why do 80% of internet users still use IE it is gay.

Ohh I put text on the page and magically it started working. I officially hate the following things:
*CSS*
Internet Explorer
and Firefox kind of
I am going to the bar, later.

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.