Results 1 to 4 of 4

Thread: What's up with IE? Padding issues.

  1. #1
    Join Date
    Oct 2012
    Posts
    157
    Thanks
    21
    Thanked 1 Time in 1 Post

    Default What's up with IE? Padding issues.

    Hi,

    It looks just fine in all other browsers, but somehow IE shows padding differently in identical class styles on the same page!

    Notice how the first URGENT sign looks in IE: http://qwikad.com/50/posts/12-biz-op...iate-programs/

    The padding-bottom looks bigger in the first one than in the rest of the signs.

    Here's the code I use:

    Code:
    <class style="background-color: #FF7B00; color: #FFFFFF; padding: 0px 8px 0px 8px; font-size: 10px; font-style: italic; font-weight: bold;">URGENT</class>
    Is there something I can use to fix it? I tried pretty much everything.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,999
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    That's IE for you!

    The best way to tackle this is to use a conditional stylesheet for IE. Put it after your main stylesheet and add all the CSS fixes that only apply to the bits of your page that need it in IE. http://css-tricks.com/how-to-create-...ly-stylesheet/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Apr 2013
    Location
    Madrid, Spain
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Very old HTML

    Hello,

    Before worrying about padding, "class" is NOT an HTML element. You must use a span, for example:

    Code:
    <span style="background-color: #FF7B00; color: #FFFFFF; padding: 0px 8px 0px 8px; font-size: 10px; font-style: italic; font-weight: bold;">URGENT</span>
    Then you can try to fix the padding issue and apply what Beverleyh says.

    You're using very old HTML. "Font" is no longer an HTML element. You should re-design your site from the ground up with modern standards.

    Cheers,

    ---
    Francisco Blanchart
    Web accessibility and standards consultant
    Madrid, Spain
    ---


    Quote Originally Posted by qwikad.com View Post
    Hi,

    It looks just fine in all other browsers, but somehow IE shows padding differently in identical class styles on the same page!

    Notice how the first URGENT sign looks in IE: http://qwikad.com/50/posts/12-biz-op...iate-programs/

    The padding-bottom looks bigger in the first one than in the rest of the signs.

    Here's the code I use:

    Code:
    <class style="background-color: #FF7B00; color: #FFFFFF; padding: 0px 8px 0px 8px; font-size: 10px; font-style: italic; font-weight: bold;">URGENT</class>
    Is there something I can use to fix it? I tried pretty much everything.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,999
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    Interestingly, most browsers don't care what tags you use - you could use a totally mythical "<wacky>" tag and most browsers would apply styling to it as though it were a valid element. The exception to this is IE8 and lower - which is precisely why those browsers don't play nicely with the new HTML5 elements like <article> (or qwikad's <class> tag), and why we need to use polyfils like HTML5shiv http://code.google.com/p/html5shiv/ or Modernizr.js http://modernizr.com/ , while other browsers accept the new tags without fuss
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. No fieldset padding top in IE8
    By Rain Lover in forum CSS
    Replies: 1
    Last Post: 11-03-2012, 08:17 PM
  2. Resolved padding issue
    By mlegg in forum CSS
    Replies: 1
    Last Post: 07-01-2011, 01:17 AM
  3. Margin/Padding
    By TheJoshMan in forum CSS
    Replies: 5
    Last Post: 07-31-2008, 01:47 AM
  4. Page padding
    By Bornfree in forum Looking for such a script or service
    Replies: 1
    Last Post: 05-28-2007, 07:55 AM
  5. Replies: 4
    Last Post: 10-28-2005, 07:05 PM

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
  •