Results 1 to 3 of 3

Thread: Scalable Background Image w/ Textual Tool Tip

  1. #1
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default Scalable Background Image w/ Textual Tool Tip

    Hi, I'm using jscheuer1's code from a previous thread:
    http://www.dynamicdrive.com/forums/s...ckground+image
    in conjunction with DD Textual Tool Tip II located at:
    http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

    I'm still working on the same "simple" page where I tried the fader discussed in a previous thread: (http://www.dynamicdrive.com/forums/s...ad.php?t=9025), this time making it simpler, and I'm having trouble - again. The background shows in Firefox, Opera and Netscape but not in MSIE and Advanced. It will show in MSIE if I move the line:

    <img class="backgroundcontent" src="earth_terminator.jpg" alt="background test image">

    but then the text disappears. My take is that this part doesn't work in my page, but works in jscheurer1's demo (demo found at http://home.comcast.net/~ansiguy/alpha_image_test_2.htm) and I don't know why:

    html { filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='earth_terminator.jpg', sizingMethod='scale');
    }

    Also, I cannot control the position of the text on the page; it is not possible to move the text up farther to make it look right on smaller windows. (I don't know what's up.) jscheuer, could you please help? Thanks in advance.

  2. #2
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not sure why yet but, it must have something to do with DOCTYPE switching, also with the peculiarities of the HTML element. Anyways, if you change your DOCTYPE to:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    and the style:

    Code:
    	html {	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='earth_terminator.jpg', sizingMethod='scale');
    	}
    to:

    Code:
    	body {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://earth.engr.ccny.cuny.edu/noaa/wc/Development/earth_terminator.jpg', sizingMethod='scale');
    	height:100%;
    	margin:0;
    	}
    That will take care of the major problem. The minor problem of the positioning of the text is ordinary layout. I chose for my demo:

    Code:
    	.forgroundcontent {
    		position:absolute;
    		z-index:1;
    		margin:100px 10% 0 10%; /*design preference*/
    	}
    As commented, that line is design preference. You can use the traditional 20px or experiment with a (small) percentage, 8% seemed good. But, no matter how you work it, the content for 'NOAA-CREST' is too tall all by itself for 800x600, except in full-screen chromeless (F11) mode. If it is critical, you might want to detect the window.innerHeight/document.documentElement.clientHeight and adjust the top margin of the forgroundcontent class accordingly using script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •