#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2006
    Posts
    166
    Rep Power
    15

    Internet Explorer ignores padding??


    my HTML code:
    Code:
    <input name="search" type="text" id="search" size="35" />
    CSS:
    Code:
    input {
    padding:5px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    ^ padding around the textfield supposed to show.
    It does show up in Opera but not in Internet Explorer.

    Then I tried this:
    Code:
    <input name="search" type="text" id="search" size="35" class="forms"/>
    Code:
    .forms {
    padding:5px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    still nothing.
    Works fine in Opera, but Internet Explorer seems to be ignoring it.

    what's the problem? I'm using IE 7 btw
    Limits are ideas!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Browsers only support a limited number of CSS properties on form controls. Which properties and how many are supported varies from browser to browser.
    http://www.456bereastreet.com/archiv...form_controls/
    http://www.456bereastreet.com/archiv...form_controls/
    http://www.456bereastreet.com/archiv...css_revisited/
    background images in form elements

    Comments on this post

    • Athlon1600 agrees
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    Hmmm. Your code looks ok to me. Maybe try this:

    HTML:
    Code:
    <div class="forms">
    <input name="search" type="text" id="search" size="35" />
    </div>
    CSS:
    Code:
    div.forms input {
    padding: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    May make no difference, but worth a try until someone more knowledgeable replies!

    Update: Aaargh, Kravvitz beat me...

    Comments on this post

    • Athlon1600 agrees
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2006
    Posts
    166
    Rep Power
    15
    you won't believe it...

    here is what I did wrong:

    I had a PHP document that looks like this:
    Code:
    <?php
    some functions...
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    ... HTML begins...
    because I was too lazy to upload that file every time I changed something and to see if it looks right, I renamed that file to .HTML so I can test it as a local document.

    because I did that, all that <php code before DOCTYPE tag got ignored so Internet Explorer thought of it as an empty space.
    Because there was an empty space before DOCTYPE, Internet Explorer probably ignored the whole DOCTYPE tag so that's why padding style did not work

    bottom line:
    it works fine now.
    From now on I will know not to put stupid code before DOCTYPE tag
    Limits are ideas!
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Yeah, don't put code before the doctype unless you want IE to be in quirks mode. Putting server-side code there is okay normally, but you were viewing it locally, so the PHP code was still there when IE opened the file.

    What I often do is a view the PHP page on the web server via the browser and then save it locally, so all of the server-side code will have been processed.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo