what's interfering with my blurb?

[Abby]

I'm stumped on this one. I have a simple <div class="blurb"> that's sandwiched between two somewhat complicated horizontal lists on the page. I know the <div class="blurb"> works, because I use it again at the very bottom of the page, where it works fine.But at the top of the page, something is messing up the margin or text alignment of the simple <div class="blurb">. It looks like an overlapping block element is shoving the contents over, but I can't see it (even using my new web designer toolbar), or figure out where it is. Here's a link to the page. The "blurb" begins with What is 1D animation? and you can see that the text is shoved to the far right of its container, as if there's a float:right in there. But there is no float:right. What's causing this?Here's my CSS code:

/* ********** animation menu *********** */#animenu {	list-style:none;	min-width:500px;	position:relative;	left:120px;	top:-68px;	padding-top:0;	padding-right:0;	padding-bottom:0;	padding-left:25%;	margin:0;	background:none;}#animenu li {		display:inline-block; /* IE7-8 */		float:left; /* IE6-7 */		padding:4px;		margin:0;}#animenu a {		display:inline;		float:left;		color:yellow;		text-indent:-9999em;		padding:0;    margin:0;		outline:none;}#animenu a.ani1 {background: url(../images/menu/anim1d.png) no-repeat 0 -96px; width:100px; height:96px;}#animenu a.ani1:hover {background: url(../images/menu/anim1d.png) no-repeat 0 0;}#animenu a.ani2 {background: url(../images/menu/anim2d.png) no-repeat 0 -107px; width:95px; height:107px;}#animenu a.ani2:hover {background: url(../images/menu/anim2d.png) no-repeat 0 0;}#animenu a.ani3 {background: url(../images/menu/anim3d.png) no-repeat 0 -95px; width:100px; height:95px;}#animenu a.ani3:hover {background: url(../images/menu/anim3d.png) no-repeat 0 -0;}#animenu a.ani4 {background: url(../images/menu/anim4d.png) no-repeat 0 -100px; width:85px; height:100px;}#animenu a.ani4:hover {background: url(../images/menu/anim4d.png) no-repeat 0 0;}#animenu a.ani1active {background: transparent url(../images/menu/anim1d.png) no-repeat 0 0; width:100px; height:96px;}#animenu a.ani2active {background: transparent url(../images/menu/anim2d.png) no-repeat 0 0; width:95px; height:107px;}#animenu a.ani3active {background: transparent url(../images/menu/anim3d.png) no-repeat 0 0; width:100px; height:95px;}#animenu a.ani4active {background: transparent url(../images/menu/anim4d.png) no-repeat 0 0; width:85px; height:100px;}#content { /* This wraps up the page content, so it doesn't overlap the top headers and menu. */  width:auto;  height:auto;  position:relative;  top:52px;  left:0;  z-index:-2;  padding:0;  margin:0;}.blurb {  width:80%;  height:auto;  font-size:1.1em;  text-align:left;  color:#000000;  background-color:#ddbbff;  border:4px inset #aa00dd;  padding:2px;  margin:0 8%;}.attn { /* This works fine, but the first instance of .blurb doesn't, even though they're in the same container. */  font-weight:bold;  text-align:center;}#showcase { /* This is the GIF menu */	list-style:none;	min-width:1000px;	height:170px;	text-align:center;	position:relative;	top:0;	left:0;	border:1px solid green;	padding:0;	margin:0 10%;}#showcase li {		display:inline-block; /* IE7-8 */		float:left; /* IE6-7 */		padding:10px;		margin:0;}#showcase a {		display:inline;		float:left;		border:1px solid green;		padding:0;    margin:0;		outline:none;}

HTML:

<ul id="animenu"><li> /* These are the 1D, 2D, 3D, 4D buttons */</ul><!-- page content goes here --><div id="content"><div><a name="top"></div><div class="blurb">What is 1D animation?  Pixel art, or game sprites, are mainly used in games for portable devices, such as mobile phones, plug-n-play and educational toys, and Nintendo DS and GameBoy games.  Blah, blah, blah.<br><div class="attn"><em>Courtesy Notice:</em>  If you want to use these .GIFs for non-profit personal use, PLEASE save them to your computer first!</div></div><ul id="showcase"><li> /* These are the animated GIFs */</ul>

[dsonesuk]

it looks as though it is using float left from the animation menu to butt up against one of the buttons.try #animenu {background:transparent none repeat scroll 0;left:120px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;min-width:500px;padding:0 0 0 25%;position:relative;top:-68px;/*added by dsonesuk*/overflow:hidden;}this will prevent float from affecting elements outside its boundary.Also, i would try not using a z-index less that 0, it tends to hide the element completly in other browsers.

[Abby]

Thanks! The fix worked, but it caused a new mysterious problem. What's causing the big space between the animenu and the blurb?Here's the page.Here's the CSS (I no longer need the content div):

/* ********** animation menu *********** */#animenu {	background:transparent none repeat scroll 0;	list-style-image:none;	list-style-position:outside;	list-style-type:none;	margin:0;	min-width:400px;	padding:0 0 0 8%;	position:relative;	left:270px;	top:-68px;	overflow:hidden;}#animenu li {		display:inline-block; /* IE7-8 */		float:left; /* IE6-7 */		padding:4px;		margin:0;}#animenu a {		display:inline;		float:left;		color:yellow;		text-indent:-9999em;		padding:0;    margin:0;		outline:none;}#animenu a.ani1 {background: url(../images/menu/anim1d.png) no-repeat 0 -96px; width:100px; height:96px;}#animenu a.ani1:hover {background: url(../images/menu/anim1d.png) no-repeat 0 0;}#animenu a.ani2 {background: url(../images/menu/anim2d.png) no-repeat 0 -107px; width:95px; height:107px;}#animenu a.ani2:hover {background: url(../images/menu/anim2d.png) no-repeat 0 0;}#animenu a.ani3 {background: url(../images/menu/anim3d.png) no-repeat 0 -95px; width:100px; height:95px;}#animenu a.ani3:hover {background: url(../images/menu/anim3d.png) no-repeat 0 -0;}#animenu a.ani4 {background: url(../images/menu/anim4d.png) no-repeat 0 -100px; width:85px; height:100px;}#animenu a.ani4:hover {background: url(../images/menu/anim4d.png) no-repeat 0 0;}#animenu a.ani1active {background: transparent url(../images/menu/anim1d.png) no-repeat 0 0; width:100px; height:96px;}#animenu a.ani2active {background: transparent url(../images/menu/anim2d.png) no-repeat 0 0; width:95px; height:107px;}#animenu a.ani3active {background: transparent url(../images/menu/anim3d.png) no-repeat 0 0; width:100px; height:95px;}#animenu a.ani4active {background: transparent url(../images/menu/anim4d.png) no-repeat 0 0; width:85px; height:100px;}.blurb {  width:80%;  height:auto;  font-size:1.1em;  text-align:left;  color:#000000;  background-color:#ddbbff;  border:4px inset #aa00dd;  padding:2px;  margin:0 8%;}.attn {  font-weight:bold;  text-align:center;}

HTML:

<ul id="animenu"><li><a class="ani1active" href="">pixel and sprite art</a><li><a class="ani2" href="">2D animation and Flash</a><li><a class="ani3" href="">3D animation for games and cinematics</a><li><a class="ani4" href="">short animated films</a></ul><!-- page content goes here --><div><a name="top"></div><div class="blurb">What is 1D animation?  Pixel art, or game sprites, are mainly used in games for portable devices, such as mobile phones, plug-n-play and educational toys, and Nintendo DS and GameBoy games.  Blah, blah, blah.<br><div class="attn"><em>Courtesy Notice:</em>  If you want to use these .GIFs for non-profit personal use, PLEASE save them to your computer first!</div></div>

[dsonesuk]

this is what happens when you use positioning, i should try to avoid using position as less as possible, i can understand when using fixed position, there no alternative, but relative absolute can ve achieved by using float, margins, padding etc.as temp example in menu remove position relative, use float instead, margin-top:-67px; margin-left:300px; you get same result with no huge space.

[Abby]

this is what happens when you use positioning, i should try to avoid using position as less as possible, i can understand when using fixed position, there no alternative, but relative absolute can ve achieved by using float, margins, padding etc.as temp example in menu remove position relative, use float instead, margin-top:-67px; margin-left:300px; you get same result with no huge space.

Wow, interesting! Thanks.