Jump to content

1-2px White Space Above Image In Ie6, Ie7

Recommended Posts

Hi, I am trying to create a stage header using tables and CSS. My problem is that in IE6 and IE7, there is a small amount of white space above the bottom shadow, which you can't see in IE8 or FireFox. Here is what my code looks like:

<div style="z-index:5;position:absolute;padding-left:20px;padding-top:20px;">		<table cellpadding="0" cellspacing="0" border="0">	<tr>	<td><img src="/images/960/global/stage-front-lt.gif" /></td>	<td><div style="background-color:#000; width:550px; height: 145px; border-bottom: solid 1px #ccc; border-top: solid 1px #ccc;"></div></td>	<td><img src="/images/960/global/stage-prods-services.jpg" /></td>	</tr>	</table>	</div>	<table cellpadding="0" cellspacing="0" border="0" style="z-index:-5;">	<tr>	<td>	<div class="stage-back"> </div>	</td>	<td>	<img src="/images/960/global/stage-shadow-rt.gif" />	</td>	</tr>	<tr>	<td colspan="2"><img src="/images/960/global/stage-shadow-bt.gif" /></td>	</tr>	</table>

And the CSS:

.stage-back {background-color:#f9f9f8; height: 185px; width: 948px; border: solid 1px #ccc;}

And here is the image in IE8, with no white space:ie8-stage.gifAnd here it is in IE6, with the white space:ie6-stage.gifIs there any CSS I can add to my stylesheet to remove this white space in IE6 and IE7?Thanks for any help you can provide.

Share this post

Link to post
Share on other sites

Have you tried using a CSS reset sheet?

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...