Click to See Complete Forum and Search --> : outline - Yes or No?
bubbisthedog
04-20-2007, 11:02 AM
I am having mixed feelings about the outline property for CSS 2.0 (though it really can't be used with 100% confidence right now anyway due to poor cross-browser support). I'm in favor of giving developers all the tools necessary to end up with the page that is desired; but I'm a little skeptical about this one for some reason. I guess it's because I've always written markup and CSS to standards and can't imagine that a border would be available that didn't affect elements around it. That, to me, just seems to defy everything I've learned about how paddings, margins, borders, etc. behave for block-level elements.
Am I being too paranoid, you think?
Robert Wellock
04-20-2007, 11:10 AM
I cannot ever recall anybody using outline in real world cases.
1. draws the outline outside the border edge.
2. does not take up any space in the document flow or box model.
Paranoid probably but like I said, I've never seen it put to good use.
bubbisthedog
04-20-2007, 11:19 AM
I cannot ever recall anybody using outline in real world cases.
1. draws the outline outside the border edge.
2. does not take up any space in the document flow or box model.
Paranoid probably but like I said, I've never seen it put to good use.
Well, one possible use that I pondered was horizontal tabs, but only if you could set, for instance, an outline-bottom. If you had a colored border on the content section with a white background, and tabs at the top of the content section with the same colored border, then you could use 'outline-bottom' to make the tab selected to have a white bottom border, thus appearing to be connected to the content section.
Eh, maybe I'll mess around with it; but, like yourself, I've never had any use for something like that.
ray326
04-20-2007, 01:39 PM
And border doesn't work for this why?
bubbisthedog
04-20-2007, 03:30 PM
And border doesn't work for this why?
Not saying it doesn't. I was simply trying to explain how outline may be used. An ugly, quickly-put-together example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>tab one</title>
<style type="text/css">
#tabs
{
margin:0px;
padding:0px;
}
#tabs li
{
border:solid 1px red;
border-bottom:0px;
width:100px;
list-style:none;
float:left;
margin-left:10px;
text-align:center;
}
#content
{
border:solid 1px red;
clear:both;
padding:10px;
width:500px;
}
.selected_tab
{
outline:solid 1px white;
}
</style>
</head>
<body>
<ul id="tabs">
<li id="first_tab">tab one</li>
<li class="selected_tab">tab two</li>
<li id="third_tab">tab three</li>
</ul>
<div id="content">
content
</div>
</body>
</html>
NogDog
04-20-2007, 04:50 PM
Outlines can be useful for outlining inline elements where you do not want a border that would cause line-height or word-spacing to change, or if you want it to switch on/off (such as a link hover effect), since as per the spec., "switching outlines on and off should not cause the document to reflow."
bubbisthedog
04-20-2007, 05:10 PM
Outlines can be useful for outlining inline elements where you do not want a border that would cause line-height or word-spacing to change, or if you want it to switch on/off (such as a link hover effect), since as per the spec., "switching outlines on and off should not cause the document to reflow."
Thanks, nog. The more I think about it, the more I think I was just over-thinking it (again). Okay, I'll shut up now.:o
WebJoel
04-20-2007, 05:50 PM
Outlines can be useful for outlining inline elements where you do not want a border that would cause line-height or word-spacing to change, or if you want it to switch on/off (such as a link hover effect), since as per the spec., "switching outlines on and off should not cause the document to reflow." That would be sweet! -I've been working on a client's site that needed something like this. I am using "border-bottom:2px solid colorOfThickUnderline;" for the psuedo-class :hover to make a thick, vertically-space faux text-decoration:underline that I can control the color of, but in order to stop the line from re-sizing, had to play around with line-height:FOOem AND make the a:link have a border-bottom:2px solid sameColorAsPageBackground which is 'swapped' for the :hover one... A 'border-outline' that doesn't mess with the document flow would be awesome... :D