Forum Moderators: not2easy
I wanted news meta description to appear in a block with curved edges. But the description is variable length, so I produced a top gif and a bottom gif. The top gif (upper curves)is a background image to the main div, below that is another empty div with bottom curved background img. So I have
<div class="newsstory">
<h3 class="newsstory">Headline</h3>
<p>blah blah blah</p></div>
<div class="storybutt"></div>
and the css
div.newsstory {
padding: 3px 3px 0px 5px;
background-image: url(../i/news_div_bg.gif);
background-repeat: no-repeat;
margin-bottom: 0px;
width: 350px;
background-color: #FFCC66;
}
div.storybutt {
background-image: url(../i/storybutt.gif);
background-repeat: no-repeat;
height: 6px;
margin-bottom: 4px;
}
Just in case the text is ever long enough to make the box bigger than the background images, I have made the div background color the same as the images. that's where the fun starts. Displays fine in Firefox, just as I intended. In IE6, you can see where the image ends and you get another 3 or 4 pixels of the div background to the right of it, ruining the whole thing.
Any suggestions? I am stumped.
It sounds like a box-model problem. What doctype (if any) are you using in your HTML?
Basically, the difference could be with the calculated width of 350px for the newsstory div: you have horizontal padding of 8px which can throw things out of kilter.
xhtml 1.0 transitional.
You're quite right - I thought it must be a box model thing, but wasn't aware IE6 had a box model issue...The div is 350px wide, plus 8. The background image is 358 pixels wide. Remove the padding and it looks fine in IE6 (even though the image is wider!) - however it's now wrong in firefox, as the background image is actually wider than the div, which is logically what you would expect..seems IE stretches the div to fit the background img?
As this is for an intranet where we use only IE it's ok as it is..but..interesting..
Many thanks,
Tony
<?xml version="1.0" encoding="UTF-8"?>
