3 replies [Last post]
jon.whittlestone
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-17
Posts: 23
Points: 0

Hi All,

I have a problem with a curved box on my page.

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.

See screenshot

here is the relevant HTML

/images/fbm_sidebar_top.gif">

/images/fbm_sidebar_btm.gif">

And here is the relevant CSS

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;
}

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

It validates and uses

Any help greatly appreciated!

thanks

jon whittlestone :?

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 13 years 14 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

Background Images instead of In-line images

Hello!

Try using Background images instead of in-line images! IE leaves a extra space before images!

try this:

This is your text content

This is your text content

This is your text content

This is your text content

This is your text content

This is your text content

This is your text content

and css:

.col3_top_img { background: transparent url("http://magazine.foxybingo.com/wp-content/themes/foxymagazine/images/fbm_sidebar_top.gif") no-repeat left top; height:11px; width: 146px; font-size:1px; } .col3_content { background: transparent url("http://magazine.foxybingo.com/wp-content/themes/foxymagazine/images/fbm_sidebar_slice.gif") repeat-y left top; width: 146px; } .col3_bottom_img { background: transparent url("http://magazine.foxybingo.com/wp-content/themes/foxymagazine/images/fbm_sidebar_btm.gif") no-repeat left top; height:11px; width: 146px; font-size:1px; }

jon.whittlestone
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-17
Posts: 23
Points: 0

many thanks

many thanks incauncalator..

i opted for another solution, and simply put my final image, the bottom curved border to display:block

eg

/images/fbm_sidebar_btm.gif" style="display: block;" >

thanks

jon

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 13 years 14 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

glad you figured it out!

:thumbsup: glad you figured it out!