Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE6 / IE7 Layout problem with a curved box and a slice

Status
Not open for further replies.

jwhittlestone

Programmer
Apr 19, 2006
16
GB
Hi All,

I have a problem with <a href=" 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=" 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" "</code>

Any help greatly appreciated!

thanks

jon whittlestone
 
Change the display type of your bottom image to block. That should get rid of the gaps.
Code:
<img src="[URL unfurl="true"]http://magazine.foxybingo.com/wp-content/themes/foxymagazine/images/fbm_sidebar_btm.gif"[/URL] style="display: block;" />

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
great that solved it thanks, i guess the problem was that IE treats images as inline by default right?

thanks so much

jon
 
Hi

jon, please reward Vragabond with a star for his helpful tip. Click the

* [navy]Thank Vragabond
for this valuable post![/navy]


link at the bottom of Vragabond's post then click again to confirm on the page which will appear in a pop-up window.

Feherke.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top