Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How is full encapsulation of HTML elements possible

    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?

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    As far as I know it isn't possible.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    Spain
    Posts
    420
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Don't resist to assimilation. Billions of Borgs can't be wrong!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ...

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's one: Assign an id to the div, and then use JavaScript to override the element properties:
    Code:
    outerDiv=document.getElementById("outerdiv");
    outerDiv.style.width="auto";
    Assuming, of course, that you've given your div the id outerdiv.
    Need more emoticons?
    Visit Catman's Private Stock

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    }


    <div></div>
    <div></div>
    <div></div>
    <table><tr><td><div></div></td></tr></table>
    <div></div>

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ...
    Last edited by brothercake; 01-09-2003 at 09:00 PM.

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know what that is ... it sounds good I shall check it out

    <slightly_later>
    Yup, I think that's it. Nice one 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.
    </slightly_later>
    Last edited by brothercake; 01-09-2003 at 10:47 PM.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •