What's up with IE? Padding issues.

[qwikad.com]

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-opps/147-affiliate-programs/

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

Here's the code I use:


<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.

[Beverleyh]

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-an-ie-only-stylesheet/

[blanchrt]

Hello,

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


<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
---



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-opps/147-affiliate-programs/

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

Here's the code I use:


<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.

[Beverleyh]

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 ;)