User login

Home ›
 Background graphics not displaying in IE6 due to use of padding instead of width and height values

Background graphics not displaying in IE6 due to use of padding instead of width and height values

Submitted by Benjamin Melançon on January 3, 2008 - 2:14am
in
Searched words: 
Microsoft Internet Explorer 6 is the Devil

Some IE6 fixes did not require browser detection

Wrong (as far as IE6 is concerned)

a#emailalerts_button {
display: block;
background: url('images/alerts.gif') 0% 0px;
padding: 135px 0px 0px 130px;
vertical-align: bottom;
}

Right (for everything as far as we can test)

a#emailalerts_button {
display: block;
background: url('images/alerts.gif') 0% 0px;
padding: 0;
width: 135px;
height: 130px;
vertical-align: bottom;
}

(In this cases, the entire a tag is to be represented by the background graphic, and the text inside the a tag was wrapped in spans set to display:none. However, for the top graphic of blocks in the right sidebar using the padding was necessary, and height didn't work. Go figure.)

Resolution

Comments

Thanks!

Submitted by Visitor on May 23, 2008 - 7:34am.

This just saved me from pulling my hair out in frustration, thank you!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.