Sent by Iris Mars on 22 March 2004 04:04
{begin tedd's message:}
You see, I need a transparent 1 em right border on my navigation to
keep the items in my navigation from jumping/shifting around on
roll-over. Plus, being transparent, the top-right border doesn't
create an overlap problem with the header as shown by some browsers.
So, I know that "transparent" borders work, they just don't validate.
So, my questions remain -- considering:
[a] background-color: transparent;
[b] border: 1px solid transparent;
1. Why does both [a] & [b] work -- but [b] won't validate?
2. Likewise, considering that [b] doesn't validate, then why does it work?
3. Are there other "rules" that work, but don't validate?
4. Is there a hack to fool validation?
{end tedd's message}
I have an example that you can look at at
http://www.ihmars.com/Devarim/test.html
which uses a hover with a change in background color and border. It works in
IE6. What it does is use all the boundary elements of the box model:
..topic {
padding: 2px;
border: 0px;
margin: 3px;
}
a:link {
color: #006699;
background-color: transparent;
text-decoration: none;
padding: 2px;
border-width: 0px;
margin: 3px;
}
a:visited {
color: #CC2255;
background-color: transparent;
text-decoration: none;
padding: 2px;
border-width: 0px;
margin: 3px;
}
a:hover {
color: #006699;
background-color: #FCFCEC;
border-color: #000000;
padding: 2px;
border-style: solid;
border-width: 1px;
margin: 2px;
}
In the a:hover, I kept the padding the same, but added the border and
subtracted from the margin. The same number of pixels are involved. Nothing
jumps around this way. Code validates.
I tried to use:
border-right: 1em solid transparent;
on some of my elements; it does NOT put a transparent border; it defaults to
the color it inherits, which, in my case, is the default black of the body.
After looking at tedd's styles, I think the appearance of it "working"
results from the border inheriting the #7c91be color, rather than being
"transparent":
{from tedd's styles.css}
#navcontainer li a /* what it looks like at rest */
{
display: block;
padding: 0.5em 0.5em 0.5em 0.5em; /*top right bottom left */
background-color: transparent;
border-right: 1em solid transparent;
text-decoration: none;
font-size: .8em;
color:#7c91be;
width: 100%;
}
{end tedd's style}
If I'm way off the mark, or I'm not making sense, I need sleep....
Iris.
_________________________________________________________________
Is your PC infected? Get a FREE online computer virus scan from McAfee®
Security. http://clinic.mcafee.com/clinic/ibuy/campaign.asp?cid=3963
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/