Working on a site some of you have already seen but some of you won't have, I have an <h3> tag that I have altered the margins of so that it overlaps the border of the containing <div>. I want the background of the <h3> to cover the line...
However, as with a lot of things IE doesnt like it!!
It only displays the background-color on odd occasions to blank the line behind the text. If you scroll up and down and put the headers out of view and then scroll down again a few times you will see that it works randomly.
Of course it works in FF so you might wanna see what I am trying to achieve with that.
I look up fieldset on w3schools and as Matt said it's not exactly semantic so I would rather not use it because my markup for this project is overwhelmingly for people with disabilities so accessibility is key. Thanks for the suggestion though.
I assume that the title attribute will add the text to the border of the fieldset?
Thanks Matt,
I have positioned the h3 relatively but it still doesnt work consistently, I'm not entirely sure what you meant about the <div> reference to the <h3>.
You can also work with giving the element an absolute position. But then it's taken "out of the flow" of the page and doesn't take up space anymore. Also, it is positioned absolutely against the first positioned parent element. And that's normally the body element. Problem with that is that if the surrounding div changes position, the absolutely positioned h3 stays in position relative to the body element. That's why I said that you could position the parent div by giving it a position relative. In that case you're sure the element is positioned absolutely relative to it's positioned parent, the div. Confused already?
#parentdiv {
position:relative; // give it a position but don't do anything with it
width: 600px;
}
#parentdiv h3 {
position:absolute;
top:-10px;
left:20px;
}