SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scope of CSS class applied to DIV

    I am using the MSIE dropshadow filter on a DIV element to give a dropshadow to the DIV box. Unfortunately it affects the text in the DIV as well. It is not _really_ bad because once the background image loads the texts dropshadows apparently go behind that (in effect hiding it) but for a few seconds while the page is loading all text within the DIV has a dropshadow making it very messy looking. Can that be avoided? I.e. how can I get the filter to affect only the DIV box, not the text inside it?

    The details (snippets of the actual code):

    global.css:
    .FLBoxBlue
    {
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#AAAAC3', Positive='true');
    background-image: url(Graphics/bluegradientx.jpg);
    }


    HTML:
    ...
    <DIV class="FLBoxBlue">
    <table><tr><td>Hello World!</td></tr></table>
    </DIV>
    ...

    I suppose I could make another DIV with the filter and then just place it in the same location with the same dimensions but that seems like a bad solution.

    Sample page: http://www.photoedits.com/new/index.html

    /Claus
    Claus
    www.photoedits.com - Photo Restoration Services

  2. #2
    SitePoint Zealot infoxicated's Avatar
    Join Date
    Jun 2001
    Location
    UK
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a bit gross while it's loading, isn't it!?

    Why don't you set the div's to be invisible and then do an onload event that makes them visible when their background images have loaded?

  3. #3
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    That's a thought

    > It is a bit gross while it's loading, isn't it!?
    Exactly it's terrible - didn't see this while everything was on my local machine of course

    >Why don't you set the div's to be invisible and then do an onload event that makes them visible when their background images have loaded?

    Your idea may work. I currently only refer to the background images in the CSS file. To properly fire the onload I would need to reference this image in my HTML wouldn't I? So I suppose I could do that in yet another invisible DIV? I.e.

    <DIV class="my_invisible_div">
    <IMG src="my_bg_image.jpg" onload="make_them_visible">
    </DIV>

    Or would it be sufficient to have an onload on the <BODY>? What is the exact firing semantics of onload?

    Thanks for your idea!
    Claus
    www.photoedits.com - Photo Restoration Services


Bookmarks

Posting Permissions

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