[SOLVED] IE vs Firefox - IE putting space in

[marmite]

Hi, I know this one has been done before but I can't see what I'm doing wrong. It's as though IE is putting in a <br />... Argh!

 

CSS code:

 

#pay_card {
background-image: url(../images/pay_card.gif);
background-repeat:no-repeat;
display:block;
height:130px;
width:209px;
margin-top:0px;
margin-left:18px;
padding-top:45px;
padding-left:6px;
}

 

html code

 

Please press the button
<form>
<? php code
<input type='hidden' etc
<img src='images/spacer.gif' height='75 px' width='1px' alt='' />
<div>BUTTON as image</div>
</form>

 

So, "please press the button" is 45px below the top, as it should be, but the BUTTON is not 75 px below that... I don't know whether it's IE or FF that's mucking it up because I can't tell what 75 px should look like! But suspect IE.

 

Any help? Thanks....???

[Copyright]

Try:

 

<img src='images/spacer.gif' height="75" width="1" alt='' />

 

 

 

Later.

[obsidian]

IE defaults to larger margins on elements like form, table and p than does firefox. You'll need to be sure to define margin and padding on those elements that seem to be displaying differently, even if it is simply to zero out the default IE margins.

[marmite]

Hi thanks, I've tried that suggestion but no joy.

 

@ Obsidian, I've added "padding-bottom=0px" and "margin-bottom=0px" declarations but it's made no difference.

 

The problem seems to be that IE is putting in an automatic line break in, before seeing the img spacer of 75px.

 

Still stuck. My checkout page looks ridiculous! Anyone?

[obsidian]

There are a couple things that IE does that you may want to make sure are not affecting you in this case:

 

1. As stated before, IE adds margins to many elements. To get around this, I usually start my CSS with the following line to default all margin and padding to 0 and simply add in the additional spacing I require:

* {
  margin: 0;
  padding: 0;
}

 

2. IE often interprets white space around images and other elements which it shouldn't. So, sometimes, you need to run your markup together around those elements. So, something like this:

<div>
  <img src="myImg.jpg" alt="" height="100" width="100" />
</div>

 

Would become this:

<div><img src="myImg.jpg" alt="" height="100" width="100" /></div>

 

If you try all that to no avail, send us a link, and we'll see if there's anything further we can diagnose

[marmite]

Thanks

 

I got round it by adding the text to the image (as it doesn't change) and using padding-top to determine height of button.

 

Works great. Thanks for your help.

 

Emma