CSS3 outline using CSS2 border

Question

Sadly, CSS outline isn't supported in IE7, so i'm stuck using border. But adding a border to any element on the page takes up room and possibly shifts the page.

If i'm adding a 2px border, then I set a -2px margin, it sill isn't perfect, as list items move to the left, and "margin:auto" really screws with it.

You can see examples here:

http://paul.slowgeek.com/nodeSelector/tests/simple.html

http://paul.slowgeek.com/nodeSelector/tests/center1.html

For example, if a page had :

<div>
    <p>Lorem Ipsum</p>
</div>

And then I did :

<div>
    <p style="border: 5px solid red">Lorem Ipsum</p>
</div>

The page would now be 10 px bigger and the p element would be 5 pixels indented. But if i did :

<div>
    <p style="outline: 5px solid red">Lorem Ipsum</p>
</div>

in firefox 3, the page would be the exact same height and the element would be in the same position. I want this behavior to work cross browser.

Basically, how can you use a CSS border to get the effect of a CSS outline?

Answer 1

If it's hover effects you're worried about, and your background is of uniform colour then simply set the non-hover border ot the elements to the background colour, and then just change the colour on hover. So the element is always the same size, though you will have to decrease the padding to adjust for the border always being there.

so instead of

a p {padding: 10px;}
a:hover {border: 5px solid red;}

use

a p {border: 5px solid white;padding:5px}
a:hover p {border-color: red;}

As an aside, if you're using :hover on any element other than a link or an input then no effect will be seen in ie6, which a lot of people still use. But you can use the ie7 script to fix that: http://code.google.com/p/ie7-js/