Submit button box different in IE and Fx

HTML & CSS
1

Hey,

Take a look at this page:-

http://www.thelinenhire.co.uk/

On the far right “Request a call back” box, why does the submit button look squashed up in IE7 but not in firefox?

I want it to look like it does in firefox, any ideas? :slight_smile:

Thanks

2

remove top margin


.submit{
 background:url('../images/submit.jpg');
 width: 79px; 
 height: 21px;
 border:0;
 [COLOR="Red"]margin-top:8px;[/COLOR] [COLOR="Blue"]/* remove this */[/COLOR]
 float:right;
 cursor:pointer;
}

vineet

3

Hey,

Now it looks fine in IE, but too close to the top in firefox lol :frowning:

4

Both my FF3.5 and IE7 show submit hugging the bottom text input in Newsletter and Request a Call Back. It would help if the forms were valid (did you know a form must have a block element as a direct child? Usually a fieldset but even a div or a p would make it valid), but I think what you’ll want is instead a bottom margin on the last non-submit input.

That can be hard without adding classes to things, but bottom margins are usually safer than top margins, because top margins can slide up behind (or over) the elements above. Bottom margins though are usually pretty straightforward.

So the select and the text input in the newsletter, if they had bottom margins, that would work… complicating this is the table (why??) in Request a Call…

And, of course, I need to say that the text above the inputs are labels, and ideally should be marked up as such… : )

5

FF and IE7 are displaying hte submit button identical to IE, all that you should need now is an increased top margin (or set one) on the input :slight_smile:

6

That’s what was there originally, a top margin. It didn’t look good cross-browser, which is why Vineet said to try taking it off.

7

I must be missing something. I put a margin-top:10px on .submit on a local copy and it appears identical in FF/Opera/IE6

IE7 is making it overlap a bit, is that whta you meant? The parent #purple-top has a height and it is hanging out, try this

.submit{margin-top:10px;/*test*/}
#purple-top{height:auto;overflow:hidden;}
#purple-top form br{clear:both;}
8

I must be missing something. I put a margin-top:10px on .submit on a local copy and it appears identical in FF/Opera/IE6

I may also be missing something… Vineet beat me to the original site so I never saw the original problem : ) So my suggestion was based on the OP’s remarks and Vineet’s fix.

9

[ot]I just looked at the OP and he says IE7 and I saw the issue there with a big enough margin, vineet lowered it to 8px in his solution which wasn’t enough to see the issue[/olt]

10

Hey,

I think i am going to settle on what i have now, take a look :slight_smile: I just added a <div> and set a height on it…

11

Had you done my suggestion you could have set the top margin to whatever you pleased :).

12

Well i originally had a margin-top of 8px but then it looked fine in Firefox but looked squashed in IE7 :confused:

Its too small of a task to spend too much time on :wink:

13

Yes and I told you it was because you set a height. My CSS is quick efficient and it would remove the need of an extra element ;).

14

Oooooh, is that what “smooshed” meant… the button was pushed down but getting cut off by the bottom of the container’s set height? Ah, if so, then Ryan’s solution would work because then someone with a slightly larger text size set on their browser won’t cut off anything (you generally don’t want to set heights on boxes for this reason).

15

Nothing to do with the original question but the page is completely broken in IE6 but I guess you are not supporting that. It still has about 20% market share though so at least needs to be usable.

16

Yes I saw that and the problem was that something inside the left column was making it expand, giving hte parent overflow:hidden; rectified the issue, though I never had time to find out what the actual cause was.