Member Avatar for j4mes_bond25
j4mes_bond25 0 Junior Poster in Training

I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies).

Presently looking page can be seen on:

http://allinclusivewebdesign.byethost13.com/AllInclusiveWebDesign/about.php

The related CSS code is:

#centerContentContainer
{
	width:100%;
}

#centerContentShadow
{
	background:url(content-shadow.jpg) #FFFFFF;
	width:760px;
	float:left;
}

#centerContent
{
	background:url(contentbackground.jpg) #FFFF00;
	color:black;
	text-align:center;
	position:relative;
	width:700px; 
	margin-left:30px;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

And to display it within each html files, I've got:

<div id="centerContentContainer">
<div id="centerContentShadow">
<div id="centerContent">

Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from:

http://allinclusivewebdesign.byethost13.com/AllInclusiveWebDesign/AllInclusiveWebDesign/about.php

while in Internet Explorer this "centerContent" drags down.

In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byethost13.com/AllInclusiveWebDesign/about.php)

I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border.

  • 1 Contributor
  • 0 Replies
  • 95 Views

Dani AI

Generated

For : the symptoms you describe (works in Firefox but the inner box drops in Internet Explorer, and the bottom menu collapses to the same narrow width) match two common float problems: the old IE double-margin-on-floats bug and a missing float-clear (or container not containing floats). Quick, low-risk steps that usually fix this:

  • Prevent IE from doubling a floated element's margin by forcing it to render inline (an established IE workaround).
  • Make sure the parent/container encloses its floated children (use a clearfix or trigger hasLayout in legacy IE).
  • As a quick test, give the menu a clear: both to see if it restores full width; if it does, the issue is float containment.

Example fixes you can try (add them to your stylesheet):

/* stops IE from doubling margins on a floated element */
#centerContent { display: inline; }

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

/* if supporting very old IE, giving the container hasLayout helps */
#centerContentShadow { zoom: 1; }

If you control the layout and do not need to support old browsers, a simpler and more robust approach is to drop the nested floats and use CSS3 shadows on the container (no image needed):

.container {
  margin: 0 auto;
  max-width: 960px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

Debug checklist: validate that all DIVs are closed, test removing floats to isolate the problem, try adding clear: both to the bottom menu, and test the page in an IE developer tool or an old-IE VM to reproduce the exact bug.

Further reading: a short writeup of the IE float/margin bug (), a solid clearfix pattern (CSS-Tricks clearfix), and the modern box-shadow reference (MDN box-shadow).

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.