Question

I have <a> elements in two different contexts on my page, some are in divs (call them .container > a) and some are in child divs (like .container > .section > a) and even some that are in further descendant divs (like .container > … > .section > a). I am currently doing some formatting on the inline <a> elements with the following CSS:

line-height:1.4;
position: relative;
left: 15px;
margin-left: -5px;

Since I am currently styling the links with a border-bottom: 1px dotted #333, it is necessary that the links remain inline elements. The problem is that sometimes links in .section behave differently from the ones in just .container. The latter look fine in both FF 3.6 and IE7. The former have the first character or so (whatever lies inside the amount of the negative margin) cut off in IE7 (I’m assuming by the negative margin).

I think that it might be a bug with hasLayout, so I checked the status of the three cases. They are as follows:

Case 1) For .container > a, .container hasLayout is true. (http://imgur.com/WJ3zM.png)
Case 2) For .container > .section > a, .section hasLayout is false and .container hasLayout is true. (http://imgur.com/4NHxj.png)
Case 3) For .container > … > .section > a, .section hasLayout is false, all but one of the intervening containers (divs, li, and ul) hasLayout is true, and .container hasLayout is true. (http://imgur.com/WefBk.png)

The first two cases look fine in IE7, and the third case has the negative margin bug. What could be causing this to happen, and in such a limited context?

Answer 1

It could be the hasLayout. Did you try adding layout in case 3 to .container? (Sorry, you said it already had layout, I meant one of the .section…)

Added based on my comment and experiment below:

Change your margin-left: -5px to text-indent: -5px on your a tags.