...

View Full Version : IE6 / IE7 Layout problem with a curved box and a slice



jwhittlestone
10-05-2007, 10:43 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 :confused:

rams1703
10-05-2007, 11:02 AM
use div tag instead of <img />

<div style="height:10px;widows:146px;background:url(../../fbm_sidebar_btm.gif) no-repeat;"></div>


gud day
rams

jwhittlestone
10-05-2007, 11:55 AM
thanks i opted for a similar solution and just styled the image to Block

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum