View Full Version : How is full encapsulation of HTML elements possible

01-09-2003, 03:13 PM
For example, say there's a page with this global CSS:

div { width:500px; }

How do I create a <div> element which doesn't apply this property; ie, how do I fully encapsulate HTML elements? Is it even possible?

01-09-2003, 04:19 PM
As far as I know it isn't possible.

01-09-2003, 05:07 PM
you have to create another style i.e: div.small {width:100px}
<div class="small">

or overwrite the style properties:
<div style="width:100">

but I think that you can't call off a global style; that's why sometimes it isn't a good idea to define one

01-09-2003, 06:05 PM
Yeah I thought as much. But I have a situation where

- I can't control what's in the style sheet
- I can't override properties like that because I need the div to be unstyled

That's why I literally need something that can isolate a block of html, like

<div> ... all of this including the outer DIV is not affected by anything else on the page ... </div>

I'm open to ludicrous ideas ...

01-09-2003, 06:37 PM
Here's one: Assign an id to the div, and then use JavaScript to override the element properties:


Assuming, of course, that you've given your div the id outerdiv. ;)

01-09-2003, 06:56 PM
Without changing anything on the page, the only way to do that is with child selectors. Of course this only works if the element you want to isolate is in another element.

div {
global style

td div {
local style


01-09-2003, 09:57 PM
Cool .. cool ... I like those last two ideas.

But ... it gets worse (this isn't an academic challenge, it's just that I'm only just realising myself how deep this issue is running)

The end use is a dhtml layers API where I have literally no idea what else is going to be on the document. I can't override all possible style properties of all possible elements (div width is only one specific), but of course I can apply new style properties to the layers.

Maybe line-height is a more interesting example - there is no default line-height value - it varies between browsers and even "line-height:auto" isn't useful, because it's unstable in some browsers - such as ns4, where line-height:auto can cause <br> tags to have no visual effect so the lines run over each other - and similair issues in opera 5 and 6.

What I'm after I guess is a method for making part of the document not part of the document, in some way .. somehow ...

Unless I;ve missed some obvious trick that would render the whole issue irrelevant ...

01-09-2003, 11:23 PM
Originally posted by brothercake
What I'm after I guess is a method for making part of the document not part of the document, in some way .. somehow ...

Perhaps I'm missing the point, but anonymous content in Gecko, and ViewLink content in IE can be forced to be completely isolated from the document.

01-09-2003, 11:40 PM
I don't know what that is ... it sounds good :) I shall check it out

Yup, I think that's it. Nice one :thumbsup: or at least, I found plenty of ViewLink documentation for IE; can you recommend any docs on the Mozilla method you mentioned?

I was hoping for a full x-browser solution, but that's pretty unlikely, this helps a lot because at least it narrows down the problem range, and I can do something for the others with class selectors for the most common properties of the most common elements, as others have suggested. thanks.

Mr J
01-09-2003, 11:41 PM
Could you not use Class Selectors or ID Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, you may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css { color: #4b0082 }

or even

ID Selectors

These are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#me { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=me>Text indented 3em</P>