SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    graphic not showing up in DIV

    I have a site here where I'm using a DIV with z-index of -2 and height/width 100% for a dynamically-resizing background image. It looks exactly correct in Firefox, but the background image does not show up in IE/Win or Safari.

    With the exception of some little things (height attribute in a table because CSS can't vertically-center worth a crap, and some nested ULs), it validates as HTML 4.01 Transitional. Can somebody point me in the right direction to get that background DIV to show up? This is really annoying me because this is otherwise pixel-perfect in IE/Win, Firefox, and Safari, which is rare for a good-looking design :-).

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    strange mix of div's and tables in a frame set

    I think z-index=position:absolute;

    only use the class backgroundimage on the div or img

    div.menucontainer
    { z-index: 10;position: absolute;

    .backgroundimage
    {
    position: absolute;
    z-index: 2;/*-?*/
    height: 100%;/*IE cant handle this use width 100% */
    top: 0;
    right: 0;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <meta http-equiv="imagetoolbar" content="no">
    <base target="_top">
    <title>12345 12345 12345 12345 12345</title>
    <script type="text/javascript" language="JavaScript" src="hacks/bgsleight.js"></script>
    <style type="text/css">
    <!--
    body {
    background: #841A00;
    color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    .backgroundimage{
    position: absolute;
    z-index: 0;
    left:0;
    top: 0;
    right: 0;
    width:100%;
    }
    a{
    color: #CDDFFE;
    }
    .mct{
    overflow: hidden;
    position: absolute;
    left:10%;
    top:30%;
    height:100%;
    width:350px;
    }
    
    div.menuheader
    {
    color: #FFFFFF;
    font-weight: bolder;
    }
    div.menu
    {
    border: 1px solid #FFFFFF;
    }
    ul
    {
    margin: 10px;
    padding: 0px;
    list-style-type: none;
    font-weight: bold;
    }
    ul.quicklinks
    {
    list-style-type: none;
    font-size: 11px;
    font-weight: normal;
    } 
    
    table.verticalcenter{
    }
    div.loginbox
    {
    font-size: 10px;
    position: absolute;
    
    right: 0px;
    bottom: 0px;
    color: #cccccc;
    background: url(img/trans_black_55.png);
    border: 1px solid #CCCCCC;
    margin-right: 0px;
    margin-top: 0px;
    padding-top: 2px;
    padding-right: 3px;
    padding-left: 3px;
    height: 18px;
    text-align: right;
    }
    input
    {
    font-size: 10px;
    background: url(img/trans_black_75.png);
    color: #CCCCCC;
    border: 1px solid #999999;
    margin: 0px;
    padding: 0px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="backgroundimage">
    <img src="img/red_phones.jpg" class="xxx" alt="Background Image" width="100%">
    </div>
    
    
    
    
    <div class="mct">
    <div class="menuheader">
    
    Welcome&nbsp;to&nbsp;The&nbsp;WHRW&nbsp;Media&nbsp;Library
    <div class="menu">
    
    <table width="100%" border=0 background="img/trans_black_55.png"><tr><td>
    <ul>
    <li><a href="audio.html">Browse Audio</a></li>
    <ul class="quicklinks">
    <li>
    <a href="audio5b0d.html?cat=12">Special Events</a> |
    <a href="audio376e.html?cat=13">Space Shows</a> |
    <a href="audiob31a.html?cat=1">The Mad Trivia Party</a> |
    <a href="audio1cd2.html?cat=10">Perennial Quest</a> |
    <a href="audio81ea.html?cat=3">Station IDs</a> |
    <a href="audio3f99.html?cat=16">Public Service Announcements</a> |
    <a href="audio0b40.html?cat=9">The Party</a> |
    <a href="audioc055.html?cat=17">Wrestle Radio</a> |
    <a href="audio.html">More Audio...</a></li>
    </ul>
    <li><a href="images.html">Browse Images</a></li>
    <ul class="quicklinks">
    <li>
    <a href="images0b40.html?cat=9">Photos</a> |
    <a href="imagesaa1e.html?cat=4">Mad Trivia Cast Photos 2001</a> |
    <a href="imagesc728.html?cat=7">35th Anniversary Weekend</a> |
    <a href="images.html">More Images...</a></li>
    </ul>
    <li><a href="video.html">Browse Video</a></li>
    <ul class="quicklinks">
    <li>
    No video yet. | 
    <a href="http://wiki.whrwfm.org/index.php/How_to_contribute_media" target="_blank">How to contribute media</a>
    </li>
    </ul>
    </ul>
    </td></tr></table>
    </div>
    </div>
    </div><!-- -->
    </div>
    <div class="loginbox">
    <b>Admins Login Here:</b> <form style="display: inline" method="post" action="http://media.whrwfm.org/front.php?">Username: <input class="pcp_loginbox" type="text" name="loginbox_username" size=10 maxlen=16> Password: <input class="pcp_loginbox" type="password" name="loginbox_password" size=10 maxlen=16> <input type="submit" name="login_submit" value="Log in"></form></div>
    </body>
    </html>
    Last edited by all4nerds; Apr 26, 2005 at 14:48.


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
  •