SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fire Fox vs IE 8.0

    I was using *html to make IE understand the padding. But IE 8.0 is not working.

    Do you have any idea how should the code can be written so that both padding in form elements can come same?

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to provide a link or code. You should not have an issue with padding typically between IE or FF unless you are doing something funky.

    Form elements are handled differently by different browsers and can cause a headache, but without code its next to impossible to diagnose.

  3. #3
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Here is the code which I am trying to use for

    Fire Fox:
    ---------
    #searchPanel input.kyefield
    {
    background-image: url(images/imgSearchInputBg.jpg);[/url]
    background-repeat: no-repeat;
    background-position: left 0px;
    margin: 0px;
    padding: 0px 0 0 15px;
    height: 40px;
    width: 475px;
    border-width: 0px;
    color: #999999;
    }

    For IE 8

    *html #searchPanel .kyefield
    {
    background-image: url([images/imgSearchInputBg.jpg);[/url]
    background-repeat: no-repeat;
    background-position: left 0px;
    margin: 0px;
    padding: 10px 0 0 15px;
    height: 40px;
    width: 475px;
    border-width: 0px;
    color: #999999;
    }

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    off the top of my head, i've read that IE8 ignores the *html hack.. not verified but worth a check. Also from your css, the code:

    Code:
    *html #searchPanel .kyefield
    {
    background-image: url([images/imgSearchInputBg.jpg);[/url]
    background-repeat: no-repeat;
    background-position: left 0px;
    margin: 0px;
    padding: 10px 0 0 15px;
    height: 40px;
    width: 475px;
    border-width: 0px;
    color: #999999;
    }
    when you add a top padding but keep your height at 40, the new height will be 50px, so that may cause a problem.

    What are the differences in IE8 versus FF?

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mvbooth View Post
    off the top of my head, i've read that IE8 ignores the *html hack..
    Since it is specifically an IE6 hack, IE7 ignores it too.

    There shouldn't be any need to use different CSS for IE8 to what you are using for Firefox, Chrome, Safari, and Opera.

    If it doesn't look almost the same in all five of those browsers then there is something wrong with the way the CSS is defined leading to browsers having to guess at what you meant.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks to all of you, I have corrected the CSS just removing the height and adjusting the padding.

    But there is another issue in which the footer getting overlapped on top of the content after decreasing the height of the browser.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Only Ie6 and under will parse the * html hack. IE7 and 8 will ignore it.

    I can't really see why you would need the extra padding on an input so I'd need to see the page to debug properly.

    You can use conditional comments if you want to target various versions of IE but I would suggest we find out what the real issue is first

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by swaraj_here View Post
    Thanks to all of you, I have corrected the CSS just removing the height and adjusting the padding.

    But there is another issue in which the footer getting overlapped on top of the content after decreasing the height of the browser.
    We'd need to see the page to debug

  9. #9
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I can not display anything as of now, so is there any other way I can represent or explain the code?

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    once again post css and html code.. you can use pastie.org or put it in the message.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by swaraj_here View Post
    I can not display anything as of now, so is there any other way I can represent or explain the code?
    All you have told us so far is this:
    But there is another issue in which the footer getting overlapped on top of the content after decreasing the height of the browser.
    That's like saying " My car is broken " - "Can you fix it without looking at it".

    If you are talking about a sticky footer then all the relevant details are explained in the FAQ at the top of the forum and it's just a matter of making sure you have followed the rules correctly. If content is overlapping then make sure the footer height matches the negative margin and that the clearer element (dependiing on which method you have used) is also the same height as footer.

    Without further code all we can do is make wild guesses I'm afraid.

  12. #12
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    All you have told us so far is this:


    That's like saying " My car is broken " - "Can you fix it without looking at it".

    If you are talking about a sticky footer then all the relevant details are explained in the FAQ at the top of the forum and it's just a matter of making sure you have followed the rules correctly. If content is overlapping then make sure the footer height matches the negative margin and that the clearer element (dependiing on which method you have used) is also the same height as footer.

    Without further code all we can do is make wild guesses I'm afraid.
    I really appreciate paul for taking concern. I will see and find out if I have any alternative way, else will try to use some more brain.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No Problem - we're here to try and help

  14. #14
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hello everyone, thanks for all your help, I have been able to resolve the issue, I had mentioned inline styles which was causing the issue.


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
  •