Hi Art,
there are several problems in the html and css.
First, the html:
- you have more then one id="mainContent". That's not allowed, an id
is only allowed once on each page. So make that a class="mainContent".
( a class is allowed more often).
- then you understand that you may not give the first h3 also the same
id. So get rid of that too.
- third, you don't have to place a h4 at the bottom of the box for the
background-image. You allready have enough 'hooks' for both. Give the
class="mainContent" the bg img for the bottom, and the .mainContent h3
the bg img for the top, and you're done.
- the extra borders in IE have something to do with the way the
browsers handle "margin-collapsing". Try read something about that, on
the css-discuss page, or www.positioniseverything.net for example.
Just give the .maincontent a margin 10px auto and you're done.
So, to give it all:
html:
<div class="mainContent">
<h3>News</h3>
The full story behind The Pit Fiend is coming soon. How it's possible
to get your foot in the door of the music industry and get the full
experience by sharing your passion.
<h4></h4>
</div>
css:
.mainContent {
margin: 10px auto;
padding:0;
position: relative;
width: 400px;
text-align: left;
background: #e7e7e7 url(bottom_bar.png) no-repeat bottom left;
}
.mainContent h3 {
background: transparent url(top_bar.png) no-repeat top left;
position: relative;
padding: 5px;
margin:0;
}
/* if you don't really need the h4, you can leave them out */
.mainContent h4 {
position: relative;
padding: 5px;
}
Succes,
Matthijs
On 5/15/05, Arthur Dodd <[EMAIL PROTECTED]> wrote:
> Hey everyone,
>
> I'm using images to round corners of boxes and in IE there is an extra
> solid bar between the boxes, using the background color from the contents
> of the box. It doesn't happen in Firefox.
>
> Please take a look and let me know if you see any probs I need to change.
> I'm stumped here.
>
> The site is:
> http://www.thepitfiend.com
>
> Thanks!
>
> Art-
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
