Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div not displaying

Status
Not open for further replies.

JimJx

Technical User
Feb 16, 2001
202
US
Hi all,

Still banging my head on the wall over this thing....

For some reason, the "update" div is not displaying. It should be visible on load, and hide after the button is clicked..... That works fine if it goes on a page alone, but on this one, it will not display the button.....

As always, suggestions greatly appreciated.....

Jim


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Bluefish 1.0.5"/>
        <title>Investor Relations</title>
        <meta name="Keywords" Content="JR Capital and Investment Corp,Mezzanine Loan,Construction
         Financing,Investment,Real Estate,mortgage lender,subordinated
         loan,residential projects,capitalization,finance,funding source,mortgage,borrower,leverage,commercial
         lending,developer,capital,investment,Roy Ridgeway,John Bock,Peter Staaf,Fort Lauderdale,Florida,bridge the gap,BuilderFinancial">
        <meta name="Description" Content="Introduction to JR Capital and Investment, Corp.">

        <meta name="author" content="root">
        
        <link href="../../css/basic.css" rel="stylesheet" type="text/css" media="all" />
        <link href="../(EmptyReference!)" rel="stylesheet" type="text/css" media="all" />
        <link href="../(EmptyReference!)" rel="stylesheet" type="text/css" media="all" />
        <style type="text/css" media="screen" class="Jane"><!--
.main_class { color: white; font-size: 9px; font-family: verdana, geneva; line-height: 13px; }
.indexbody { color: #552500; font-size: 11px; font-family: verdana, geneva; line-height: 15px; }
.menu_a:link { color: #004a8d; font-size: 9px; font-family: verdana, geneva; font-weight: bold; line-height: 11px; }
.menu_a:hover { color: #fff; }
.bottomline { color: #552500; font-size: 9px; font-family: verdana, geneva; line-height: 15px; }
.bottomline2 { color: #65423a; font-size: 9px; font-family: verdana, geneva; line-height: 15px; text-decoration: none; }
.menu2 { color: #004aaa; font-size: 12px; font-family: verdana, geneva; font-weight: 700; line-height: 15px; }
.IndexHead { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 17px; }
.info { color: #004a8d; font-size: 10px; font-family: verdana, geneva; text-decoration: none; }
.Jane { color: #fff; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; }
#Address { height: 15px; width: 578px; left: 32px; top: 575px; position: absolute; z-index: 3; visibility: visible; }
#toplogo { height: 120px; width: 735px; left: 30px; top: 30px; position: absolute; z-index: 4; visibility: visible; }
#yellow { height: 441px; width: 164px; left: 30px; top: 140px; position: absolute; z-index: 3; visibility: visible; }
#gradient { height: 435px; width: 571px; left: 194px; top: 140px; position: absolute; z-index: 2; visibility: visible; }
#Animate { height: 100px; width: 104px; left: 647px; top: 460px; z-index: 6; position: absolute; visibility: visible; }
.NewPageTest { color: #552500; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: 16px; }
.contactHead { color: #0d4b83; font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; }
#slogan { height: 50px; width: 266px; left: 220px; top: 506px; z-index: 4; position: absolute; visibility: visible; }
#menu2 { height: 360px; width: 110px; left: 60px; top: 190px; z-index: 6; position: absolute; visibility: visible; }
.login { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; }
#graphic { height: 100px; width: 100px; left: 330px; top: 76px; position: absolute; z-index: 6; visibility: visible; }
--></style>
        <csactions>
            <csaction name="c0fa4b7b1" class="Goto Link" type="onevent" val0="../Images/Contact_JRC1.html" val1="" urlparams="1"></csaction>
            <csaction name="c0fa4b7d3" class="Goto Link" type="onevent" val0="../Images/Contact_JRC1.html" val1="" urlparams="1"></csaction>

        </csactions>
        <csscriptdict import="import">
            <script type="text/javascript" src="../GeneratedItems/CSScriptLib.js"></script>
        </csscriptdict>
        <csactiondict>
            <script type="text/javascript"><!--
CSAct[/*CMP*/ 'c0fa4b7b1'] = new Array(CSGotoLink,/*URL*/ '../Images/Contact_JRC1.html','');
CSAct[/*CMP*/ 'c0fa4b7d3'] = new Array(CSGotoLink,/*URL*/ '../Images/Contact_JRC1.html','');
var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        pre_Contact_over = newImage('../menurollover.data_/Contact-over.gif');
        pre_JRCNews_over = newImage('../menurollover.data_/JRCNews-over.gif');
        pre_LoanAp_over = newImage('../menurollover.data_/LoanAp-over.gif');
        pre_mortPro_over = newImage('../menurollover.data_/mortPro-over.gif');
        pre_projInfo_over = newImage('../menurollover.data_/projInfo-over.gif');
        pre_NewInves_over = newImage('../menurollover.data_/NewInves-over.gif');
        pre_investor_over = newImage('../menurollover.data_/investor-over.gif');
        pre_BldLnd_over = newImage('../menurollover.data_/BldLnd-over.gif');
        pre_mezz_over = newImage('../menurollover.data_/mezz-over.gif');
        pre_ConFinan_over = newImage('../menurollover.data_/ConFinan-over.gif');
        pre_Profile_over = newImage('../menurollover.data_/Profile-over.gif');
        pre_Home_over = newImage('../menurollover.data_/Home-over.gif');
        preloadFlag = true;
    }
}

// --></script>
        </csactiondict>
<script type="text/javascript">
<!--
function toggle(id) {
var e = document.getElementById(id);
var f = document.getElementById('update');
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
if(f.style.display == 'block')
f.style.display = 'none';
else
f.style.display = 'block';
}
//-->

</script>
    </head>

    <body onload="preloadImages();" background="../Images/background2.gif" leftmargin="30" marginheight="30" marginwidth="30" topmargin="30">
        <div class="menu">
            <div id="menu2">
                <csobj occur="86" w="112" h="315" t="Component" csref="../web-data/Components/navbar.html">
                    <table id="Table_01" width="112" border="0" cellspacing="0" cellpadding="0" height="315" livesettings="menurollover.data_/" livesrc="../web-data/SmartObjects/menu%20rollover.psd" csoptsrc="../menurollover.data_/settings.opt">
                        <tr>
                            <td rowspan="12"><img src="../menurollover.data_/menurollover_over.gif" alt="" height="315" width="8" border="0" /></td>

                            <td cssliceid="0000006B"><a onmousedown="changeImages('Home', '../menurollover.data_/Home-over.gif'); return true;" onmouseup="changeImages('Home', '../menurollover.data_/Home-over.gif'); return true;" onmouseover="changeImages('Home', '../menurollover.data_/Home-over.gif'); return true;" onmouseout="changeImages('Home', '../menurollover.data_/Home.gif'); return true;" href="../index.html"><img src="../menurollover.data_/Home.gif" alt="" name="Home" height="21" width="96" border="0" /></a></td>
                            <td rowspan="12"><img src="../menurollover.data_/menurollover_over-04.gif" alt="" height="315" width="8" border="0" /></td>
                        </tr>
                        <tr>
                            <td cssliceid="00000070"><a onmousedown="changeImages('Profile', '../menurollover.data_/Profile-over.gif'); return true;" onmouseup="changeImages('Profile', '../menurollover.data_/Profile-over.gif'); return true;" onmouseover="changeImages('Profile', '../menurollover.data_/Profile-over.gif'); return true;" onmouseout="changeImages('Profile', '../menurollover.data_/Profile.gif'); return true;" href="../JRCProfile.html"><img src="../menurollover.data_/Profile.gif" alt="" name="Profile" height="24" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="00000075"><a onmousedown="changeImages('ConFinan', '../menurollover.data_/ConFinan-over.gif'); return true;" onmouseup="changeImages('ConFinan', '../menurollover.data_/ConFinan-over.gif'); return true;" onmouseover="changeImages('ConFinan', '../menurollover.data_/ConFinan-over.gif'); return true;" onmouseout="changeImages('ConFinan', '../menurollover.data_/ConFinan.gif'); return true;" href="../Construction.html"><img src="../menurollover.data_/ConFinan.gif" alt="" name="ConFinan" height="32" width="96" border="0" /></a></td>
                        </tr>

                        <tr>
                            <td cssliceid="0000007A"><a onmousedown="changeImages('mezz', '../menurollover.data_/mezz-over.gif'); return true;" onmouseup="changeImages('mezz', '../menurollover.data_/mezz-over.gif'); return true;" onmouseover="changeImages('mezz', '../menurollover.data_/mezz-over.gif'); return true;" onmouseout="changeImages('mezz', '../menurollover.data_/mezz.gif'); return true;" href="../Mezzanine.html"><img src="../menurollover.data_/mezz.gif" alt="" name="mezz" height="24" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="0000007F"><a onmousedown="changeImages('BldLnd', '../menurollover.data_/BldLnd-over.gif'); return true;" onmouseup="changeImages('BldLnd', '../menurollover.data_/BldLnd-over.gif'); return true;" onmouseover="changeImages('BldLnd', '../menurollover.data_/BldLnd-over.gif'); return true;" onmouseout="changeImages('BldLnd', '../menurollover.data_/BldLnd.gif'); return true;" href="../Bldr_LndrSrvs.html"><img src="../menurollover.data_/BldLnd.gif" alt="" name="BldLnd" height="35" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="00000084"><a onmousedown="changeImages('investor', '../menurollover.data_/investor-over.gif'); return true;" onmouseup="changeImages('investor', '../menurollover.data_/investor-over.gif'); return true;" onmouseover="changeImages('investor', '../menurollover.data_/investor-over.gif'); return true;" onmouseout="changeImages('investor', '../menurollover.data_/investor.gif'); return true;" href="../Invstr_Relations.html"><img src="../menurollover.data_/investor.gif" alt="" name="investor" height="24" width="96" border="0" /></a></td>
                        </tr>

                        <tr>
                            <td cssliceid="00000089"><a onmousedown="changeImages('NewInves', '../menurollover.data_/NewInves-over.gif'); return true;" onmouseup="changeImages('NewInves', '../menurollover.data_/NewInves-over.gif'); return true;" onmouseover="changeImages('NewInves', '../menurollover.data_/NewInves-over.gif'); return true;" onmouseout="changeImages('NewInves', '../menurollover.data_/NewInves.gif'); return true;" href="../New_Invstrs.html"><img src="../menurollover.data_/NewInves.gif" alt="" name="NewInves" height="21" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="00000090"><a onmousedown="changeImages('projInfo', '../menurollover.data_/projInfo-over.gif'); return true;" onmouseup="changeImages('projInfo', '../menurollover.data_/projInfo-over.gif'); return true;" onmouseover="changeImages('projInfo', '../menurollover.data_/projInfo-over.gif'); return true;" onmouseout="changeImages('projInfo', '../menurollover.data_/projInfo.gif'); return true;" href="../Project_Info.html"><img src="../menurollover.data_/projInfo.gif" alt="" name="projInfo" height="33" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="0723E69D"><a onmousedown="changeImages('mortPro', '../menurollover.data_/mortPro-over.gif'); return true;" onmouseup="changeImages('mortPro', '../menurollover.data_/mortPro-over.gif'); return true;" onmouseover="changeImages('mortPro', '../menurollover.data_/mortPro-over.gif'); return true;" onmouseout="changeImages('mortPro', '../menurollover.data_/mortPro.gif'); return true;" href="../MortPrograms.html"><img src="../menurollover.data_/mortPro.gif" alt="" name="mortPro" height="26" width="96" border="0" /></a></td>
                        </tr>

                        <tr>
                            <td cssliceid="09CD0B3D"><a onmousedown="changeImages('LoanAp', '../menurollover.data_/LoanAp-over.gif'); return true;" onmouseup="changeImages('LoanAp', '../menurollover.data_/LoanAp-over.gif'); return true;" onmouseover="changeImages('LoanAp', '../menurollover.data_/LoanAp-over.gif'); return true;" onmouseout="changeImages('LoanAp', '../menurollover.data_/LoanAp.gif'); return true;" href="../LoanApp.html"><img src="../menurollover.data_/LoanAp.gif" alt="" name="LoanAp" height="24" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="1CCD9FBB"><a onmousedown="changeImages('JRCNews', '../menurollover.data_/JRCNews-over.gif'); return true;" onmouseup="changeImages('JRCNews', '../menurollover.data_/JRCNews-over.gif'); return true;" onmouseover="changeImages('JRCNews', '../menurollover.data_/JRCNews-over.gif'); return true;" onmouseout="changeImages('JRCNews', '../menurollover.data_/JRCNews.gif'); return true;" href="../JRC_News.html"><img src="../menurollover.data_/JRCNews.gif" alt="" name="JRCNews" height="24" width="96" border="0" /></a></td>
                        </tr>
                        <tr>
                            <td cssliceid="1D0C748E"><a onmousedown="changeImages('Contact', '../menurollover.data_/Contact-over.gif'); return true;" onmouseup="changeImages('Contact', '../menurollover.data_/Contact-over.gif'); return true;" onmouseover="changeImages('Contact', '../menurollover.data_/Contact-over.gif'); return true;" onmouseout="changeImages('Contact', '../menurollover.data_/Contact.gif'); return true;" href="../ContactJRC.html"><img src="../menurollover.data_/Contact.gif" alt="" name="Contact" height="27" width="96" border="0" /></a></td>
                        </tr>

                    </table>
                </csobj></div>
            <div style="position:relative;width:735px;height:520px;background-color:#fff;background-image:url('(EmptyReference!)');-adbe-g:m,10,10;"></div>
        </div>
        <div class="main_class">



<form>
<div id="update" style="display:block">
<input type="button" value="Change Password" onclick="javascript:toggle('frm1');" />
</form>                    
</div>

                    <form id="frm1" style="display:none" name="change">
                    Enter new password&nbsp; <input type="password" name="NewPass" value=""><br />
                    Confirm new password&nbsp; <input type="password" name="ConfNPass" value=""><br />
                    <input type="submit" value=" Submit ">
                    </form>
                    <p />
          
        </div>

        <p></p>
        <div id="gradient">
            <img src="../Images/NewPageFile/Gradient.jpg" alt="" width="571" height="435" border="0" /></div>
        <div id="yellow">
            <img src="../Images/NewPageFile/MenuBackground.jpg" alt="" width="164" height="435" border="0" /></div>
        <div class="bottomline2">
            <map name="Layout-Web3_07c0faac4a"><area shape="rect" coords="14,15,117,62" href="Contact_JRC.html" alt="" /><area shape="rect" coords="114,78,117,81" alt="" /></map><map name="Layout-Web3_05c0faac2a"><area shape="rect" coords="8,14,118,62" href="Mezzanine.html" alt="" /></map><map name="Layout-Web3_03c0faab7b"><area shape="rect" coords="7,9,116,64" href="Construction.html" alt="" /></map><map name="LogoWhitec0faac19"></map>
            <div id="graphic">
                <img src="../Images/NewMenuImage.jpg" alt="" width="407" height="95" border="0" /></div>

            <div id="Animate">
                <img src="../Images/NewPageFile/JRAnimate.gif" alt="" width="104" height="91" border="0" /></div>
            <map name="Menuc08a423a"></map>
            <div id="Address">
                <span class="bottomline">888 East Las Olas Blvd. Suite 601 Fort Lauderdale, FL 33301 954-467-5204</span><span><span class="info"><span class="bottomline"><font color="#004a8d"> </font></span></span><font color="#004a8d"><a href="mailto:roy@jrcapitalandinvestment.com">roy@jrcapitalandinvestment.com</a></font></span></div>
        </div>
        <div id="slogan">

            <img src="../Images/NewPageFile/SloganTitlep.gif" alt="" width="231" height="40" border="0" /></div>
        <!-- Start of StatCounter Code --><map name="Pcentec08d32cf"></map><map onclick="CSAction(new Array(/*CMP*/'c0fa4b7d3'));return CSClickReturn()" name="RBleftc08d3038" csclick="c0fa4b7d3"><area shape="rect" coords="18,16,21,19" alt="" /></map><map onclick="CSAction(new Array(/*CMP*/'c0fa4b7b1'));return CSClickReturn()" name="RBrightc08d3128" csclick="c0fa4b7b1"></map>
        <div id="toplogo">
            <img src="../Images/NewPageFile/LogoWhite.jpg" alt="" width="735" height="117" border="0" /></div>
        <script type="text/javascript" language="javascript">
var sc_project=1597622;
var sc_invisible=1;
var sc_partition=15;
var sc_security="23aca152";
var sc_remove_link=1;
</script>
        <script type="text/javascript" language="javascript" src="[URL unfurl="true"]http://www.statcounter.com/counter/counter.js"></script>[/URL]
        <!-- End of StatCounter Code -->
    </body>

</html>
 
For some reason, the "update" div is not displaying. It should be visible on load

It shows just fine on load for me (in Fx), and IE 7... However, you have external script and CSS files that are called which you've not given us, so maybe one of those is interfering? Try removing them from your source and see if you can see the button. if you can, the issue will probably be in those.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
You do realize this is not the final client side code? There should be no strange cs tags in that code.

Other than that, do you know that two of your linked stylesheets claim to have empty reference to them? Maybe your styles are defined in those two.

Furthermore, given that there is so much javascript on your site, it is likely that something is interfering. You should be look to javascript errors on the page to get an answer to that.
 
Thanks for the reply!

After a lot of cut-and-paste, I think I have it narrowed down.....

This line seems to be the problem. I can remove it and the button displays, but the whole page is broken then (go figure.....) I can't spot anything that is interfering or contradicting though...

Jim

Code:
#menu2 { height: 360px; width: 110px; left: 60px; top: 190px; z-index: 6; position: absolute; visibility: visible; }


The external css is very basic...
Code:
body { }
p { }
td { }
a:link { color: #004a8d; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: 12px; }
a:visited { font-size: 0; line-height: 0; text-decoration: none; }
a:active { }
.JR Capital { color: #004a8d; font-size: 10px; font-family: verdana, geneva; font-style: italic; line-height: 15px; text-decoration: none; }
.royparagraph { color: #552500; font-size: 11px; font-family: verdana, arial; font-weight: normal; font-style: normal; line-height: 12px; }
.NewParagraph { color: #552500; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: 12px; }
element { }
a:hover { color: #552500; }
.profileCaps { color: #004a8d; font-size: 11px; font-family: verdana, arial; font-weight: bold; font-style: normal; line-height: 15px; }
.profilePhotos { color: #004a8d; font-size: 9px; font-family: verdana, arial; line-height: 11px; }
.profilePhotosCaps { color: #552500; font-size: 11px; font-family: verdana, arial; line-height: 13px; }
.bottomline { color: #552500; font-size: 9px; font-family: verdana, arial; }
menu_a:hover { color: #552500; font-size: 9px; font-family: verdana, arial; line-height: 13px; }
.apformonline { color: #76451c; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; }
#id { }
 
Vragabond,

That was a view->source copy.... I got rid of the empty refs right after I posted this, no joy.

Neither IE7 nor FF report any JS errors. That was the first thing I looked for.

In IE7 the button does display (I just updated while this was going on to see if it made a difference) but it displays at the bottom so I definitely feel that this is a style issue.

I will keep plugging away to see if I can find something. I really hate dealing with other peoples code, especially when they use GoLive and call themselves web masters.....


Jim
 
Is there a chance that menu2 is somehow covering the #update div? Since it has a z-index of 6, that could be possible. I would try to tamper with the menu2 as much as possible as its code is pretty substandard -- it uses absolute positioning in a parent that is not absolutely positioned (meaning that it is probably positioned relative to the viewport which is very seldom a good idea).
 
I made some changes to the external css file. I added
Code:
.update { visibility:visible; position:relative; top:250px; left:200px; z-index:100;}

Now, the button displays in FF but not IE. I have changed everything I can think of with the z-index but cannot get it on top in IE. I know it is rendering and being covered up because when I load the page, I see the button is placed correctly, but then the background covers it up.

Any suggestions?

Jim
 
Ouch. My suggestion. Complete re-design. This is terrible. For one, the gradient element containing the gradient image should be just a background image on the main_class content.

Anyway, apparently IE likes to think absolutely positioned elements should always be above relatively positioned one. If you give your main_class a hight z-index value and position: absolute it will actually appear. However, I do not endorse that solution, as it will most likely break other stuff. And all in all, it's just adding more crap to fix crap that shouldn't be there to begin with.
 
Yup - complete re-structure needed. Ditch the tables... lose the IMG tag, as Vragabond says (in favour of BG images)... lose the "cssliceid" attributes (WTF are these for, anyway?)... and get your suorce validating:


As you can see, there any numerous errors!

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
I had a feeling that it was going to be something along those lines..... However, I am not the designer on this one, I am just handling (trying to handle?) some programming for the site.....

I think suggesting a complete redesign will cause some major problems. There is already a lot of time invested in this and it is getting down to crunch time....

Anyway, thanks for looking, I really appreciate the time everyone has taken with this.
Jim
 
I agree completely, however, when you have a graphic designer using GoLive, with all of the CSS functions in it, and all you need is some PERL programming done, you don't seem to understand that GoLive doesn't create the most compliant code out there.

Then you run into problems like this.

Yes, I am a PERL coder, but my background is design, all done by hand. My editor of choice is CoffeeCup, but I do NOT use the WYSIWYG functions. I hate programs that think they are smarter than me.....

Jim
 
Well, to fix your immediate problem, simply add "z-index: 10;" to the ".main_class" rule... But I can't stress how much you really, really, really, should update that markup. It's not th worst in the world, but it's not too good.

Perhaps put a case to your boss to get a real HTML coder in for a day or two (shouldn't take any longer than that, really).

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top