PDA

Click to See Complete Forum and Search --> : IE6 / IE7 Layout problem with a curved box and a slice

jwhittlestone
10-05-2007, 03:49 AM
Hi All,

I have a problem with <a href="http://magazine.foxybingo.com/" target="_blank">a curved box on my page.</a>

There are three components - the top curve, the div for the background (with a slice) and the bottom curve.

When I add them together, it renders fine in FF, but in IE6/IE7 there is an annoying gap between the main body div and the bottom curve.

<a href="http://www.barbaryonline.com/jw/personal/ie6css.png" target="_blank">See screenshot</a>

here is the relevant HTML

<code>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/fbm_sidebar_top.gif"><div id="fbm_sidebar"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/fbm_sidebar_btm.gif">
</code>

And here is the relevant CSS

<code>
img {
border:0px none;
}
* {
margin:0px;
padding:0px;
}

body {
font-family:Verdana,Arial,sans-serif;
}
#fbm_sidebar {
background:transparent url(images/fbm_sidebar_slice.gif) repeat-y scroll 0%;
height:200px;
width:146px;
}
</code>

Any ideas as to why this is behaving strangely in IE people?

It validates and uses
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</code>

Any help greatly appreciated!

thanks

jon whittlestone :o
jwhittlestone
10-05-2007, 04:57 AM
i opted to style the bottom border image as block so IE no longer treated it as inline

eg


<img src="<?php bloginfo('stylesheet_directory');
?>/images/fbm_sidebar_btm.gif" style="display: block;" >