#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    34
    Rep Power
    10

    Link in my DIV is not click-able?!


    For some odd reason, the link in one of my DIVS is inaccessible. It's styled as a link, so I know it's being recognized, but mouse-over does nothing, and it won't respond to a click. I've tried to bring the DIV to the front via z-index, but no help. The pile of code is below, but the DIV I'm needing help with is "frontcontentbox". You can see an example at www . deepwaterchurch / next

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    	<link href="css/universal.css" rel="stylesheet" type="text/css" />
        <link href="css/jflow.css" rel="stylesheet" type="text/css" />
    	<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
        <script src="scripts/jquery-1.2.6.pack.js" type="text/javascript"></script>
        <script src="scripts/jquery.flow.1.2.auto.js" type="text/javascript"></script>
    
         <!--[if lt IE 7]>
                <script type="text/javascript" src="unitpngfix.js"></script>
        <![endif]-->   
    
        
        <script type="text/javascript">
        $(function() {
            $("div#controller").jFlow({
                slides: "#slides",
                width: "462px",
                height: "289px",
    			auto:true,
            });
        });
        </script>
    	
    <script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function(){
            $(".tweet").tweet({
                username: "deepwaterchurch",
                join_text: "auto",
                avatar_size: 0,
                count: 5,
                auto_join_text_default: "we said,", 
                auto_join_text_ed: "we",
                auto_join_text_ing: "we were",
                auto_join_text_reply: "we replied to",
                auto_join_text_url: "we were checking out",
                loading_text: "loading tweets..."
            });
        });
    </script>
    <link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>	
    	
    	
    </head>
    <body>
    <div id="container">
    <div id="top"></div><!--end top-->
    <div id="content-container">
    <div id="content"><!--START ENTERING CONTENT HERE-->
    <div id="logo"></div>
     <div id="navtabs">
    		<ul id ="nav">
    	<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
    	<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
    	<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
    	<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
    	<li class="faq"><a href="faq">FAQ</a></li>
    	<li class="contactus"><a href="contactus">CONTACT US</a></li>	</ul></div><!--end navigation-->
    	
    	<div id="wrap">
    
        <div id="controller" class="hidden">
            <span class="jFlowControl">Current Series</span>
            <span class="jFlowControl">We're Social</span>
            <span class="jFlowControl">Compassion</span>
        </div>
        
        <div id="prevNext" class="hidden">
            <img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
            <img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
        </div>
        <div id="slides">
            <div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
            <div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" border="0"></a></div>
            <div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
        </div>
        </div>
    <div id="overlay" style="z-index:3; position:relative; top:80px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
    <!-- end slideshow -->
    <div id="tagline" style="position:absolute; top:110px; left:390px; z-index:5;"><img src="images/tagline.png" alt="Deep Water exists to help people become passionate followers of Jesus Christ" /></div>
    
    <div id="front page content" style="position:relative; top:120px; padding-bottom:140px; padding-right:20px;">
    <!--start twitter block-->
    <div class="tweet_bird" style="position:relative; top:20px; left:140px; z-index:6;"><a href="http://twitter.com/deepwaterchurch"><img src="images/whatstweetin.png" border="0"></a></div>
    <div class="tweet" style="position:relative; left:50px; top:12px; width:380px; padding-bottom:50px;"></div>
    <!--end twitter block-->
    
    <!--start theloop block-->
    <div id="the loop" style="position:relative; left:50px; width:380px; top:20px; padding-bottom:20px;">
    
    <!-- Begin MailChimp Signup Form -->
    <!--[if IE]>
    <style type="text/css" media="screen">
    	#mc_embed_signup fieldset {position: relative;}
    	#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
    </style>
    <![endif]--> 
    <!--[if IE 7]>
    <style type="text/css" media="screen">
    	.mc-field-group {overflow:visible;}
    </style>
    <![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
    <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
    
    <div id="mc_embed_signup">
    <form action="http://deepwaterchurch.us1.list-manage.com/subscribe/post?u=e6c98debd5802cfe5d135bc4d&amp;id=1b9e118a77" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;">
    	<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background:url(images/blackboardtexture.jpg);color: #ffffff;text-align: left;">
    	
    	
    <div align="center"><a href="../theloop"><img src="images/theloop_front.png" border="0" /></a></div>
    	
    <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
    If you're not receiving <em>the loop</em> newsletter, then you're... out of the loop.  Check out <a href="../theloop">the archives</a> or sign up below.<br /> <br />
    <label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address: </label>
    <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
    </div>
    <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
    			<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;color: #b51b00;"></div>
    			<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background:#;color: #73bd2b;"></div>
    		</div>
    <div id="counter chicklet" style="float:right; padding-right:40px; padding-bottom:20px;">
    <script type="text/javascript" src="http://deepwaterchurch.us1.list-manage.com/subscriber-count?b=7&u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77"></script></div>	
    
    		
    		<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="width: auto;display: block;margin: 1em 0 1em 5%;">
    		
    		</div>
    	</fieldset>	
    	<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
    </form>
    
    
    </div>
    
    
    <script type="text/javascript">
    var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='NAME';ftypes[3]='text';fnames[1]='PHONE';ftypes[1]='phone';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[2]='SMALLGROUP';ftypes[2]='dropdown';var err_style = '';
    try{
        err_style = mc_custom_error_style;
    } catch(e){
        err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: fff5ee none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: 9C1801;';
    }
    var mce_jQuery = jQuery.noConflict();
    mce_jQuery(document).ready( function($) {
      var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
      var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
      options = { url: 'http://deepwaterchurch.us1.list-manage1.com/subscribe/post-json?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                    beforeSubmit: function(){
                        mce_jQuery('#mce_tmp_error_msg').remove();
                        mce_jQuery('.datefield','#mc_embed_signup').each(
                            function(){
                                var txt = 'filled';
                                var fields = new Array();
                                var i = 0;
                                mce_jQuery(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                mce_jQuery(':hidden', this).each(
                                    function(){
                                    	if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                    		this.value = '';
    									} else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                    		this.value = '';
    									} else {
    	                                    this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
    	                                }
                                    });
                            });
                        return mce_validator.form();
                    }, 
                    success: mce_success_cb
                };
      mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
    
    });
    function mce_success_cb(resp){
        mce_jQuery('#mce-success-response').hide();
        mce_jQuery('#mce-error-response').hide();
        if (resp.result=="success"){
            mce_jQuery('#mce-'+resp.result+'-response').show();
            mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
            mce_jQuery('#mc-embedded-subscribe-form').each(function(){
                this.reset();
        	});
        } else {
            var index = -1;
            var msg;
            try {
                var parts = resp.msg.split(' - ',2);
                if (parts[1]==undefined){
                    msg = resp.msg;
                } else {
                    i = parseInt(parts[0]);
                    if (i.toString() == parts[0]){
                        index = parts[0];
                        msg = parts[1];
                    } else {
                        index = -1;
                        msg = resp.msg;
                    }
                }
            } catch(e){
                index = -1;
                msg = resp.msg;
            }
            try{
                if (index== -1){
                    mce_jQuery('#mce-'+resp.result+'-response').show();
                    mce_jQuery('#mce-'+resp.result+'-response').html(msg);            
                } else {
                    err_id = 'mce_tmp_error_msg';
                    html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
                    
                    var input_id = '#mc_embed_signup';
                    var f = mce_jQuery(input_id);
                    if (ftypes[index]=='address'){
                        input_id = '#mce-'+fnames[index]+'-addr1';
                        f = mce_jQuery(input_id).parent().parent().get(0);
                    } else if (ftypes[index]=='date'){
                        input_id = '#mce-'+fnames[index]+'-month';
                        f = mce_jQuery(input_id).parent().parent().get(0);
                    } else {
                        input_id = '#mce-'+fnames[index];
                        f = mce_jQuery().parent(input_id).get(0);
                    }
                    if (f){
                        mce_jQuery(f).append(html);
                        mce_jQuery(input_id).focus();
                    } else {
                        mce_jQuery('#mce-'+resp.result+'-response').show();
                        mce_jQuery('#mce-'+resp.result+'-response').html(msg);
                    }
                }
            } catch(e){
                mce_jQuery('#mce-'+resp.result+'-response').show();
                mce_jQuery('#mce-'+resp.result+'-response').html(msg);
            }
        }
    }
    </script>
    <!--End mc_embed_signup-->
    </div><!--end the loop block-->
    
    <!--start social icons-->
    <div style="position:relative; top:20px; left:50px; width:380px; background-color:#333333; padding-top:20px; padding-bottom:20px;">facebook link place holder</div>
    <!--end social icons-->
    <!--start right column-->
    <div style="position:absolute; top:81px; left:480px; width:300px;">
    <div id="frontcontentbox">
    <img src="images/wherewemeetfront.jpg" alt="Where We Meet" />
    <p>Deep Water meets Sunday mornings at 10:30 in the Empire Theatres at Park Lane, on the corner of Spring Garden Road and Dresden Row. <a href="wherewemeet">Get more details</a>.</p>
    </div>
    
    
    
    </div><!--end right column-->
    </div><!--end front page content-->
    </div><!--end content div-->
    <div id="bottom"></div><!--end bottom-->	
    </div><!--end content-container-->
    <div class="clear"></div><!--end clearing div-->
    </div><!--end container-->
    
    </body>
    </html>
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,921
    Rep Power
    9646
    The notepaper image thingy above (images/tagline.png) has a higher z-index and so, because it's HUEG LIEK XBOX, is being displayed in front of the "Where We Meet" box - and the link inside.
    (You can still see it because the image has transparency.)


    As a web designer/developer I suggest you get Firefox with the Firebug and Web Developer Toolbar extensions. To see the problem I right-clicked where the link was, hit Inspect Element, and Firebug showed me that the image was what I had clicked on.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    34
    Rep Power
    10
    Originally Posted by requinix
    The notepaper image thingy above (images/tagline.png) has a higher z-index and so, because it's HUEG LIEK XBOX, is being displayed in front of the "Where We Meet" box - and the link inside.
    (You can still see it because the image has transparency.)


    As a web designer/developer I suggest you get Firefox with the Firebug and Web Developer Toolbar extensions. To see the problem I right-clicked where the link was, hit Inspect Element, and Firebug showed me that the image was what I had clicked on.
    The z-index for the DIV in question is much higher than the DIV above it (z-index set for "frontcontentbox" is set at 21, z-index for "tagline" is 5). I have Firefox with the Web Developer Toolbar. I've set a height for the DIV above so that it's sure to not overlap... I still don't see the problem.


    EDIT: Never mind... I just bumped up the z-index of the containing DIV instead. Thanks for the advice!

IMN logo majestic logo threadwatch logo seochat tools logo