[SOLVED] negative margins for iframe showing different in FF and IE

[scarhand]

i am trying to display a form from a website inside an iframe

 

the problem is, this form displays perfectly in IE:

 

 

but it displays wrong in FF:

 

 

heres the CSS:

 

#container{
  width: 380px;
  height: 288px;
  overflow: hidden;
  border: 3px solid #4398d4;
}
#container iframe {
  width: 800px;
  height: 600px;
  margin: -305px 0px 0px -40px;
}

 

heres the HTML:

 

<div id="container">
<iframe src="http://wow.eroticagateway.com/signup/signup.php?step=signup&qualify=1&site=226&nats=NzUxNjg6MzoyMjY" scrolling="no" frameborder="0"></iframe>
</div>

 

any idea why this is happening?

[haku]

IE isn't so good with negative margins. Which is where your problem is coming from.

 

You basically have two ways you can deal with this - rework your code so that you aren't using negative margins (better way, but potentially time-intensive) or you can use conditional comments to write IE specific CSS (not as good a way, but faster and easier).

[scarhand]

thanks haku, but how would i go about doing this without negative margins? i have to use an iframe to show a specific part of a website on this landing page.

[haku]

Got me - its not a question that can be answered simply. Everything affects everything else, so making once change requires another. But if you have a negative margin, that means either that something is pushing that element down, or that its in the wrong place in the document. Play around with those kind of things.