SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submit button box different in IE and Fx

    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?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    remove top margin

    Code:
    .submit{
     background:url('../images/submit.jpg');
     width: 79px; 
     height: 21px;
     border:0;
     margin-top:8px; /* remove this */
     float:right;
     cursor:pointer;
    }
    vineet

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Now it looks fine in IE, but too close to the top in firefox lol
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    .submit{margin-top:10px;/*test*/}
    #purple-top{height:auto;overflow:hidden;}
    #purple-top form br{clear:both;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    [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]
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I think i am going to settle on what i have now, take a look I just added a <div> and set a height on it...
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Had you done my suggestion you could have set the top margin to whatever you pleased .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i originally had a margin-top of 8px but then it looked fine in Firefox but looked squashed in IE7

    Its too small of a task to spend too much time on
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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&#37; market share though so at least needs to be usable.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •