I'm working on a new <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://dynamic.gamespy.com/~populous/forum/">forum</a> design and it's going pretty nicely except there's a nasty bug in firefox.
Relevant CSS:
.post {
padding-left:10.5em;
min-height:16em;
}
.author {
width:10em;
background-color:#003;
border-right:solid 2px #191970;
margin-left:-10.5em !important;
margin-left:-5em;
}
.clear {
clear:both;
}
Relevant XHTML:
<div class="post">
<div class="author">
author info
</div>
rest of post
</div>
<hr class="clear" />
(repeats)
Basically the author box shows up next to the post info as it should, and in Opera and IE the <hr /> shows up below the author box when it extends past the post box (when the post box is small and the author box is big, it will just extend out of the post box). In firefox on the otherhand, it just ignores the clear and continues into the box below overlapping. Is there some special way to prevent this?Can't see this happening in the code given. Do you have a live example?http://dynamic.gamespy.com/~populous/forum/example.html
Just look at the left side overlapping in firefox compared to IE or OperaStart by using strict DTD so that you are not the one who puts browser in the buggy mode.I saw it when I first loaded it, then it corrected itself. The document is quite heavy (and full of errors) which could be causing the problem.Transitional isn't "buggy mode" and changing it to XHTML 1.1 made no difference in the rendering. The errors are all trivial and non-related (mostly due to the PHPBB code) so it's not because of that. I'm not quite sure what you mean by heavy, but the page it quite complex so there's not much I can do about that.Transitional DTD puts browser in the Quirks mode - i.e. legacy, buggy. XHTML 1.1 Transitional is no different from HTML3.2 - use Strict DTD as all new sites should.well as I said, I changed to it XHTML 1.1 (which has no modes) and there was no difference.Only IE understands negative margins.Only IE understands negative margins.
Gecko does tooActually every major browser does, that part works... The problem is the negative margin takes the block out of the parent for some reason.
Relevant CSS:
.post {
padding-left:10.5em;
min-height:16em;
}
.author {
width:10em;
background-color:#003;
border-right:solid 2px #191970;
margin-left:-10.5em !important;
margin-left:-5em;
}
.clear {
clear:both;
}
Relevant XHTML:
<div class="post">
<div class="author">
author info
</div>
rest of post
</div>
<hr class="clear" />
(repeats)
Basically the author box shows up next to the post info as it should, and in Opera and IE the <hr /> shows up below the author box when it extends past the post box (when the post box is small and the author box is big, it will just extend out of the post box). In firefox on the otherhand, it just ignores the clear and continues into the box below overlapping. Is there some special way to prevent this?Can't see this happening in the code given. Do you have a live example?http://dynamic.gamespy.com/~populous/forum/example.html
Just look at the left side overlapping in firefox compared to IE or OperaStart by using strict DTD so that you are not the one who puts browser in the buggy mode.I saw it when I first loaded it, then it corrected itself. The document is quite heavy (and full of errors) which could be causing the problem.Transitional isn't "buggy mode" and changing it to XHTML 1.1 made no difference in the rendering. The errors are all trivial and non-related (mostly due to the PHPBB code) so it's not because of that. I'm not quite sure what you mean by heavy, but the page it quite complex so there's not much I can do about that.Transitional DTD puts browser in the Quirks mode - i.e. legacy, buggy. XHTML 1.1 Transitional is no different from HTML3.2 - use Strict DTD as all new sites should.well as I said, I changed to it XHTML 1.1 (which has no modes) and there was no difference.Only IE understands negative margins.Only IE understands negative margins.
Gecko does tooActually every major browser does, that part works... The problem is the negative margin takes the block out of the parent for some reason.