How do I enforce absolute positioning and line height with CSS?

Question

I've created a jQuery Sliding Drilldown plugin that works quite well, except for one part: the positioning of the arrows. If I change the font size/line height of the element they're contained in, they move, which doesn't make sense to me. Can anyone tell me why? Does line-height actually affect the location of 0,0 in an element? Or is something else going on that I'm missing?

And - This is the real question - can I do what I'm trying to do with just CSS? I know I can use JavaScript to position them dynamically, but I'm trying to avoid that.

Here is the plugin on a very plain page:

http://thomporter.github.com/jquery-sliding-ajax-drilldown/demos/basic-plain.html

You can also check out the Sass I used to generate the CSS if you prefer, it's in the repo:

https://github.com/thomporter/jquery-sliding-ajax-drilldown/blob/master/src/lib/css/jquery.sliding-ajax-drilldown.scss

Answer 1

You're problem here is that you set font-size on your <a> tags, that are all set to display:block and house the other elements you need.

When you increase the font size in em your <a> elements expand. As you're arrow images are also nested in your <a> elements and are absolutely positioned, if the container box changes size, the position of the arrows will change. This will occur regardless of the unit type you use for sizing, margin, padding etc.

Try to contain the text within it's own element. Seperate out your CSS into typography styles vs positioning styles, wrap the text for each line in a span element.

<li>
    <a href="#" data-id="BMW">
        <span>BMW</span>
        <span></span>
    </a>
</li>

Then apply something like this with your seperated font styles applied to this span:

.ajaxdrilldown ul li a span:first-child {
    display:inline-block; /* IE7 will need a hack for this */
    position:relative;
    left:0.3em;
    font-size:1.4em;
    ...
}

This will allow the text to freely expand within the confines of its own element without affecting the layout of the other items.

You will also need to change this style on line 98:

.ajaxdrilldown div ul li a span

to something along these lines

.ajaxdrilldown div ul li a span:last-child 

to stop the spans polluting each others distinct styles

On a side note, you don't need to set width:100% on an element that is display:block;. Remove the width declaration entirely as it's unnecessary and will likely cause trouble for others styling this.

Answer 2

Just did some testing and it is because your using em to absolute position. If you change it to px for example, and fix the padding-left which is also em based, the arrows stop moving when you change the font-size.