hover effect with borders - creating alignment issues - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

hover effect with borders - creating alignment issues

whatson

8:59 pm on Sep 18, 2012 (gmt 0)

I want a hover effect that creates borders, but when I add the border effect the line distorts.
How do you make it so when you hover the width of the borders doesn't increase the cell width?

lucy24

11:39 pm on Sep 18, 2012 (gmt 0)

You can't. The border is, by definition, outside whatever element it's a border of. Or, in the case of cells, between the present cell and the adjoining ones. So adding a border will always make the element bigger.

You can cheat by setting a default all-the-time border with the same color as your page background and the same width as your sometimes-visible border. You can say "transparent" and most browsers will humor you, but technically it's an error and won't validate. Borders are foreground, not background. You might also experiment by using padding instead of a border and changing its color. Padding is background, so it defaults to transparent. But it may not give the visual effect you want.

MinosTheNinth

7:21 am on Sep 19, 2012 (gmt 0)

In theory you can use calculated values in CSS. Haven't tried id in real usage yet, but it can be a possibility.

See "Calculated values" in article "Learning to Love the Boring Bits of CSS" on A list apart website ( [alistapart.com...] )

alt131

5:36 pm on Sep 19, 2012 (gmt 0)

Nice reference, MinosTheNinth, and something I haven't investigated much either, so I'd be interested in comments from anyone who has. As the article refers, there is also 6.1. �box-sizing� property [w3.org] which was initially thought to be the solution for this, but is now at risk element and may not go forward.

There are also 18.4 Dynamic outlines: the 'outline' property [w3.org], which is drawn outside the box (so may require a margin to make sure the box does not overlap other elements).

Paul_o_b

7:48 pm on Sep 19, 2012 (gmt 0)

Hi,

If you want to add borders without a jump in the page then at the same times as you add borders reduce the padding by the same amount and the element will stay the same size.

If you really want the border outside you can use a negative margin to drag the border wide without affecting other elements (or use the outline property as already mentioned above).

e.g.Both examples below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
margin:0 0 1em;
padding:0;
list-style:none;
border:5px solid #ccc;
float:left;
clear:left;
}
li { float:left; }
a {
float:left;
height:30px;
line-height:30px;
padding:2px 30px;
color:#000;
background:red;
}
li:nth-of-type(odd) a { background:blue }
a:hover {border:2px solid yellow}
.test1 a:hover{padding:0 28px}
.test2 a:hover{margin:-2px;position:relative}
</style>
</head>

<body>
<ul class="test1">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="test2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>

As the article refers, there is also 6.1. �box-sizing� property [w3.org] which was initially thought to be the solution for this, but is now at risk element and may not go forward.

I don't quote understand the reasoning for box-sizing being at risk when it has about 93% browser support (caniuse.com) and people (http://paulirish.com/2012/box-sizing-border-box-ftw/) are actively promoting it!

lucy24

8:40 pm on Sep 19, 2012 (gmt 0)

Overlapping Paul, above, so we may be repeating ourselves

Ooh, outlines, whole nother kettle of fish :) Depending on situation, they can be absolutely exactly what you want-- or a total disaster. One variable is browser compatibility, so make sure you test thoroughly.

Outlines can be especially spiffy with spans, because unlike borders, an outline draws a single line all the way around the complete text block. If, ahem, your browser cooperates.

:: off to experiment, because I have never tried outlining a table cell ::

CSS

table {border-collapse: collapse;}
td {border: 1px solid black; padding: .5em;}

td.forward:hover {outline: 2px dotted red}
td.halfway:hover {outline: 1px solid red}
td.fatline:hover {outline: 4px solid #99F;}

HTML ("quirks" mode, bare <html> with nothing else)

<table>

<tr>
<td class = "forward">text text text text text text text text text text text text text text text</td>
<td class = "halfway">text text text text text text text text text text text text text text text</td>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
</tr>
<tr>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
<td class = "forward">text text text text text text text text text text text text text text text</td>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
</tr>
<tr>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
<td class = "halfway">text text text text text text text text text text text text text text text</td>
<td class = "forward">text text text text text text text text text text text text text text text</td>
</tr>
</table>

Camino will only recognize the hover if I include the element name: td.forward etc rather than .forward alone. This is a good habit anyway. MSIE 5 [insert guffaws ad lib] won't recognize it at all. But then, it also ignores my explicitly stated "border-collapse: collapse".

Here is the tiny but crucial difference. Someone may want to see how MSIE behaves.

In Opera and in webkit-based browsers, the outline will go outside the top and left table-cell borders, but will cover the right and bottom borders. (This is why I tried different types of outline.)

In Mozilla-based browsers (Firefox and Camino), the outline will cover the cell border on all four sides.

Paul_o_b

8:19 am on Sep 20, 2012 (gmt 0)

Yes outlines have always historically been buggy.

e.g.
IE8 incorrectly places the outline on inline elements when the parent element has the value text-align:justify. The outline remains at the exact position had justify not been used and will therefore be misaligned with the element it refers to depending on how far the text has been moved when justified.

Firefox 3.5 and under will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element�s actual set dimensions.

Someone may want to see how MSIE behaves.

In IE9 the left border gets covered.

In IE8 the left and top borders get covered.

IE7 doesn't understand outlines and ie6 doesn't understand hover on anything but anchors.:)
(IE must be in standards mode of course or none of them will work)

Apologies I missed the part about in the OPs original post referring to cells so my previous example is probably of no use.

alt131

11:27 am on Sep 20, 2012 (gmt 0)

don't quote understand the reasoning for box-sizing being at risk when it has about 93% browser support (caniuse.com) and people (http://paulirish.com/2012/box-sizing-border-box-ftw/) are actively promoting it!

Thanks for drawing attention to that Paul. The padding-box value is at risk (which isn't even relevant here). Sorry team, tired brain late at night.

Lucy ... tables for text and quirks <sigh> :)

Are you certain about what you are seeing? On closer inspection I'm not so sure. Recalling outline is drawn around the edge of the border, so any variations are likely related to the interpretation of border-collapse (and for internal cells, maybe also stack order).

From a quick test on winxp, using ff14, op11, winSaf5 and ie8, using your code but with a border on the table, plus 10px solid border for the td, 5px dotted blue on hover.

With border-collapse:seperate all tested browsers have the outline outside the displayed cell border (and on top of the table border) - as expected.

With border-collapse:collapse, ff14 draws the outline outside the displayed cell border, all others draw the outline over the four sides of the border, starting at 5px across the border.

There is good argument that only 1/2 the border belongs to each cell, although the recs aren't explicit about the relationship between cell borders, but very clear about the relationship between cells and table borders:
17.6.2 The collapsing border model [w3.org]:

Borders are centered on the grid lines between the cells.
... The left border width of the table is half of the first cell's collapsed left border, and the right border width of the table is half of the last cell's collapsed right border. ...

I can't reproduce the top/left bottom/right variations, but I'd be interested if you are still seeing them given my thinking that stack order may also be at work here.

Paul_o_b

12:50 pm on Sep 20, 2012 (gmt 0)

Thanks for drawing attention to that Paul. The padding-box value is at risk (which isn't even relevant here). Sorry team, tired brain late at night.

Ahh ok - that makes sense - I should have checked anyway :)

lucy24

1:26 am on Sep 21, 2012 (gmt 0)

Are you certain about what you are seeing? On closer inspection I'm not so sure. Recalling outline is drawn around the edge of the border, so any variations are likely related to the interpretation of border-collapse (and for internal cells, maybe also stack order).

That's why I made a 3x3 table-- so I could see the behavior on cells in different locations. And, ahem, it's a table because that's what the OP was asking about.

:: detour to check something else ::

Things get interesting when you double the width of all borders. Then it becomes a variation between seeing the inmost 1px of the cell border, and seeing the whole thing. But I added a proper 4.1 dtd at the same time, so that may have an effect.

The one thing I can be sure of is that adding outlines to table cells has no effect on cell size or spacing. But if the cells already have borders, it would be safest to change their color (only) on hover.