Page 1 of 1
Another wierd CSS bug in MSIE 6, Ideas and Help Wanted
Posted: Thu Mar 09, 2006 2:54 pm
by darryladie
Evening Boys and Girls,
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.
The link is
http://www.autismlifeline.com/services-training.php
Thanks Darryl

Posted: Thu Mar 09, 2006 3:03 pm
by feyd
tried using a fieldset?
Posted: Thu Mar 09, 2006 3:11 pm
by darryladie
I can't say even know what one of those is sorry.
I did try z-index though, that didn't work

Posted: Thu Mar 09, 2006 3:22 pm
by matthijs
Fieldset can be used. But it's not a form, so maybe that's not really semantic.
Another option could be using position:relative; on the h3 (and if necessary position the div as well to have a reference for the h3)
Posted: Thu Mar 09, 2006 3:47 pm
by darryladie
Feyd,
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>.
Could you explain PLEASE

Posted: Thu Mar 09, 2006 4:18 pm
by feyd
the "label" for the fieldset is created via the <legend> tag..
Posted: Fri Mar 10, 2006 1:25 am
by matthijs
The positioning works like this. There's several ways but i'll just explain the basics:
Code: Select all
h3 {
position:relative;
left:20px;
top: 20px;
}
Now you gave the h3 a position 20 px from the left and 20px from the top. But the fun part is that you can also use negative values:
Code: Select all
h3 {
position:relative;
left:20px;
top: -20px;
}
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?
Code: Select all
#parentdiv {
position:relative; // give it a position but don't do anything with it
width: 600px;
}
#parentdiv h3 {
position:absolute;
top:-10px;
left:20px;
}