Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post

    Browser-specific CSS (example inside)

    Hello,

    I have an issue where the input button is slightly misaligned from the search box, about a 1px discrepency.

    I've gotten it to appear fine in IE and Chrome, but Firefox & Safari is off by about 1px. (which is strange, its typically IE that is the odd one out).

    Anyways, if somebody could take a look at this - its driving me nuts! lol

    It's the e-mail signup form on the right:

    http://dev.electrabike.com/electra/

    Thank you in advance,
    -Joe

    Here is the CSS:

    .image {
    border-bottom-width: 0;
    border-top-width: 0;
    bottom: 0;
    position: relative;
    border: none;
    bottom: 0;
    height: 19px;
    left: -6px;
    top: 6px;
    width: 30px;
    }
    #signupemail {
    bottom: 47px;
    height: 7px;
    position: relative;
    right: 3px;
    width: 133px;
    }

    .inputtext {
    color: #00aec6;
    font-size: 10px;
    font-style: normal;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    background-color: #fff;
    }
    Last edited by BlackReef; 05-30-2012 at 12:00 AM.

  • #2
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    any help on this would be greatly appreciated,

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    Are you talking about the blue arrows next to the email input box? Because it is looking fine for me.

  • Users who have thanked chrisf for this post:

    BlackReef (05-30-2012)

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    When I viewed your site, it was off in FF, Safari AND IE. In IE, the arrow image is larger by 1 px (both top and bottom) than the input text box. (IE isn't recognizing the padding assigned to the input box.) In FF and Safari, the arrow image was like you said, kind of 1px below where it should be. I changed this part:
    Code:
    .image {
    border-bottom-width: 0;
    border-top-width: 0;
    bottom: 0; // removed a duplicate instance of this line
    position: relative
    border: none;
    height: 19px;
    left: -6px;
    top: 5px; //used to be 6px
    width: 30px;
    }
    Now it appears just fine for me now in both FF and Safari. However, it's still off in IE. The bottom now aligns just fine in IE, but it's still about 1px taller than the input text box. Will update if I can find a solution for the IE issue.

  • Users who have thanked EpicWebDesign for this post:

    BlackReef (05-30-2012)

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by EpicWebDesign View Post
    When I viewed your site, it was off in FF, Safari AND IE. In IE, the arrow image is larger by 1 px (both top and bottom) than the input text box. (IE isn't recognizing the padding assigned to the input box.) In FF and Safari, the arrow image was like you said, kind of 1px below where it should be. I changed this part:
    Code:
    .image {
    border-bottom-width: 0;
    border-top-width: 0;
    bottom: 0; // removed a duplicate instance of this line
    position: relative
    border: none;
    height: 19px;
    left: -6px;
    top: 5px; //used to be 6px
    width: 30px;
    }
    Now it appears just fine for me now in both FF and Safari. However, it's still off in IE. The bottom now aligns just fine in IE, but it's still about 1px taller than the input text box. Will update if I can find a solution for the IE issue.
    Thank you for the help.

    Ya I switched it back to 5px;, and now it appears fine in FireFox and Safari, but it is off 1px in Chrome and IE (as you mentioned). driving me nuts lol


  •  

    Posting Permissions

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