/    Sign up×
Community /Pin to ProfileBookmark

Firefox issues with boxes and negative margins

I’m working on a new <a href=”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:

[code=php]
.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;
}
[/code]

Relevant XHTML:

[code=php]
<div class=”post”>
<div class=”author”>
author info
</div>
rest of post
</div>
<hr class=”clear” />
(repeats)
[/code]

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?

to post a comment
CSS

10 Comments(s)

Copy linkTweet thisAlerts:
@FangJun 05.2005 — Can't see this happening in the code given. Do you have a live example?
Copy linkTweet thisAlerts:
@IncaWarriorauthorJun 05.2005 — http://dynamic.gamespy.com/~populous/forum/example.html

Just look at the left side overlapping in firefox compared to IE or Opera
Copy linkTweet thisAlerts:
@VladdyJun 05.2005 — Start by using strict DTD so that you are not the one who puts browser in the buggy mode.
Copy linkTweet thisAlerts:
@FangJun 05.2005 — 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.
Copy linkTweet thisAlerts:
@IncaWarriorauthorJun 05.2005 — 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.
Copy linkTweet thisAlerts:
@VladdyJun 05.2005 — 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.
Copy linkTweet thisAlerts:
@IncaWarriorauthorJun 05.2005 — well as I said, I changed to it XHTML 1.1 (which has no modes) and there was no difference.
Copy linkTweet thisAlerts:
@felgallJun 05.2005 — Only IE understands negative margins.
Copy linkTweet thisAlerts:
@VladdyJun 05.2005 — Only IE understands negative margins.[/QUOTE]
Gecko does too
Copy linkTweet thisAlerts:
@IncaWarriorauthorJun 05.2005 — Actually every major browser does, that part works... The problem is the negative margin takes the block out of the parent for some reason.
×

Success!

Help @IncaWarrior spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...