Databases
StackOverflow2013
Postsdbo
POCSS link padding added via Javascript not working in IE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS link padding added via Javascript not working in IE
    primarykey
    data
    text
    <p>I tried searching for an answer first, but this seems to be an edge case.</p> <p>I'm adding a class to a link via JavaScript (well jQuery actually but I don't think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can't test IE9/10. Works fine in Firefox.</p> <p>I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. <a href="http://jsfiddle.net/toxalot/fsdcu/" rel="nofollow">http://jsfiddle.net/toxalot/fsdcu/</a></p> <p>I'll try adding the code here.</p> <pre><code>&lt;style type="text/css"&gt; body { background-color: #fff } a:hover { background-color: transparent; color: #c30 } ul { padding-left: 40px } .iconNewWindowLeave { padding-right: 15px; background-color: #ccc } &lt;/style&gt; &lt;ul&gt; &lt;li style="float: left"&gt;&lt;a class="iconNewWindowLeave" href="#"&gt;left link&lt;/a&gt;&lt;/li&gt; &lt;li style="text-align: right"&gt;some stuff on the right&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li style="float: left"&gt;&lt;a class="linkExternal" href="#"&gt;left link&lt;/a&gt;&lt;/li&gt; &lt;li style="text-align: right"&gt;some stuff on the right&lt;/li&gt; &lt;/ul&gt; &lt;script type="text/javascript"&gt; $('.linkExternal').each(function() { $(this).addClass('iconNewWindowLeave'); }); &lt;/script&gt; </code></pre> <p>I've removed the image from the example and added a background color for illustration. In IE 8, the second link doesn't have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn't correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.</p> <p>So I've narrowed down the cause(s), but I don't know what to do about it. I don't want to remove or change the existing code. It's all required for the site layout. If possible, I'd like to <em>add</em> some CSS or JavaScript to fix it. It's a minor issue, but it's bugging me. I'm also curious as to whether or not the problem appears in newer versions of IE.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. UStoxalot
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS link padding added via Javascript not working in IE
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS link padding added via Javascript not working in IE
      1. This table or related slice is empty.
      1. VTUpMod
    1. COi tried [your code](http://jsfiddle.net/toxalot/fsdcu/) and checked in IE7, 8 and 9 also and working fine as i can see padding-right on both link.
      singulars
      1. POCSS link padding added via Javascript not working in IE
      1. USCode
    2. CO@maxterner did you try the code above as is or try my jsFiddle? I just noticed that it works when the JavaScript is in the body below the element as in the code above. But when it runs onDomReady as in the jsFiddle, then it fails.
      singulars
      1. POCSS link padding added via Javascript not working in IE
      1. UStoxalot
    3. COyes @toxalot this link i tried http://jsfiddle.net/toxalot/fsdcu/
      singulars
      1. POCSS link padding added via Javascript not working in IE
      1. USCode
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload