|
|
Posted by Andy Dingley on 02/15/07 15:02
On 15 Feb, 14:13, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> I don't see what you are trying to achieve in that piece of code,
The OP can't change their HTML. Typically they probably can, but only
at a blunt whole-page level, not on an element-by-element level
(BTDT).
So if they try to apply simple CSS, we can't stop it being cacaded
onto everything. This is intended as an example of how to reverse this
effect for a more specific location (a <h2> in this case).
> but it's probably unachievable.
Works fine here - see the example below or at this URL
<http://codesmiths.com/dingbat/lj/20070215/display_inherit.html>
> First, IE does not support the value inherit, so in most browsing
> situations, the rule above has no effect.
Ah, IE. That's a bit like a web browser, isn't it?
<!--[if IE]>
<style type="text/css" >
..hideable h2 font b {
visibility: visible;
display: inline;
}
</style>
<![endif]-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html lang="en" >
<head>
<title>CSS display: inherit; example</title>
<style type="text/css" >
body { background-color: white; color: black; font-size:1em; }
b { color: red; }
h3 { margin: 2em 4em 0; }
code { font-size: 1.4em; }
..hideable font b {
visibility: hidden;
display: none;
}
/*
If there's a similar scope within this region (e.g. a h2) that you
don't want to be hidden, then you might be able to over-ride the CSS
applied to it with a CSS block like this
*/
..hideable h2 font b {
visibility: inherit;
display: inherit;
}
</style>
<!--
Here's a hack for IE's lack of support for inherit;
-->
<!--[if IE]>
<style type="text/css" >
code { font-size: 1em; }
..hideable h2 font b {
visibility: visible;
display: inline;
}
</style>
<![endif]-->
</head><body>
<h1>CSS <code>display: inherit;</code> example</h1>
<h3>Basic markup, with nothing applied:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <font
size="+2"
face="arial" ><b>Fnord</b></font> sed do eiusmod tempor [...]</p>
<div class="hideable" >
<h3>The following <code><h2></code> should be visible, together
with its Fnord:</h3>
<h2>This heading <font size="+2" face="arial" ><b>Fnord</b></font>
should be visible</h2>
<h3>The following "Fnord" ought to hide:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <font
size="+2"
face="arial" ><b>Fnord</b></font> sed do eiusmod tempor [...]</p>
</div>
</body></html>
[Back to original message]
|