I'm working on a user control that does an asynchronous post to the server. I want the user control to fade and display a "Sending..." message and gif while it's working. To do so I'm trying to absolutely position a semi-transparent div overtop of the control's main div. It's turning out to be a lot harder than it should be. I finally got it looking ok in firefox but go into IE and find that the control's main div is not even the correct width.
I want the total width to be 275px. So in firefox I styled it to have
width: 245px; margin 36px 15px 46px 15px;
So the width + the margin = 275 and that's how it renders. In IE, the browser is subtracting the margin from the width so the total width is 245 with the 15px margins inside that. Well I found out both browsers are running in quirks mode despite ... I think ... the doc type being:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
My understanding is this is what quirks mode is supposed to do, but when IE and Firefox render it differently even though both are in quirks mode, I don't know what to do.
It would be easier to respond if you posted a link, but if my assumptions are correct, you can force IE modes by using meta tags that look like this
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Obviously it would be different depending on what version you want to use. Similarly you are able to force out of compatible mode, into quirks mode, etc. I've never had this issue in Firefox so can't speak to that, but I would imagine Mozilla has something similar.
I think your problem would be better solved by setting the box model, though. Use this CSS class on the block elements in question
#yourdiv { box-sizing: border-box }
This will help alleviate the pains of different browsers' rendering of the box model. More info on box-sizing here.
Also, don't forget about display: block as sometimes this will fix oddities.