Forums

blueturtle

Hi All,

I posted this issue yesterday, and am back again today since no one responded. I also figured out that the dropdown menu in the afflicted site is actually hiding behind the photo banner (that changes out using .cycle plugin). I'm not sure if this is a jquery issue or a CSS. I'm thinking it's a CSS issue but for the life of me, I can't figure it out. If you have time to take a look at it and let me know what I'm doing wrong, I would greatly appreciate it. Thank you!

Here is the site:

http://thompsoninsurancefl.com/

HTML

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>The Thompson Agency | Insurance for Auto, Home or Business in Ft. Myers, Florida</title>
<link href=\"oneColFixCtr.css\" rel=\"stylesheet\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"js/jquery-1.3.1.min.js\"></script>	
<script type=\"text/javascript\" language=\"javascript\" src=\"js/jquery.dropdownPlain.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.cycle.all.js\"></script>
<script type=\"text/javascript\">
		$(document).ready(function(){
			$('#slideshow').cycle({
				fx: 'fade',
				speed: 5000,
				timeout: 2000
			});
		}); 
	</script>
</head>

<body class=\"oneColFixCtr\">
<div id=\"main_wrapper\">
  <div class=\"wrapper\">
    <div id=\"header\">
      <div id=\"logo\"><img src=\"images/TTA_logo.png\" width=\"223\" height=\"75\" alt=\"Thompson Agency logo\" /></div>
      <div id=\"tagline\"><p class=\"tagline\">Delivering peace of mind, one client at a time.</p>
      </div>
      <div id=\"address\"><p class=\"headeraddress\">4531 Deleon Street, Suite 207<br />Ft. Myers, Florida 33907<br />ph 239.278.5822 | fax 239.278.1074</p>
      </div>
    </div> <!-- end #header -->
    <div id=\"topnav\">
            <ul class=\"dropdown\">
                <li><a href=\"#\">Property &amp; Casualty</a>
					<ul class=\"sub_menu\">
                  	<li><a href=\"#\">Auto</a></li>
                  	<li><a href=\"#\">Homeowners</a></li>
                  	<li><a href=\"#\">Renters</a></li>
                  	<li><a href=\"#\">Flood</a></li>
                  	<li><a href=\"#\">Recreational Vehicles</a></li>
                   	<li><a href=\"#\">Personal Umbrella</a></li>
             		</ul>
			  </li>
           	    <li><a href=\"#\">Commercial</a>
					<ul class=\"sub_menu\">
                    <li><a href=\"#\">Auto</a></li>
					<li><a href=\"#\">Property</a></li>
					<li><a href=\"#\">Liability</a></li>
					</ul>
			  </li>
				<li><a href=\"#\">Life &amp; Retirement</a></li>
				<li><a href=\"#\">Health Insurance</a></li>
				<li><a href=\"#\">Location</a></li>
				<li><a href=\"#\">About Us</a>
					<ul class=\"sub_menu\">
					<li><a href=\"#\">History</a></li>
					<li><a href=\"#\">Management</a></li>
					</ul>
			  </li>
                <li><a href=\"#\">Contact Us</a></li>
           </ul>
    </div>
    <div class=\"clear\"></div>
<!-- end #topnav -->
    <div id=\"photo_banner\">
            <div id=\"slideshow\">
      <img src=\"images/slide_1.jpg\" alt=\"Girl driver\" />
      <img src=\"images/slide_2.jpg\" alt=\"Couple in front of house\"/>
      <img src=\"images/slide_3.jpg\" alt=\"Business man driver\"/>
      <img src=\"images/slide_4.jpg\" alt=\"Grandparents with grand daughter in Marina\"/>      </div>
      <div id=\"quote\"><img src=\"images/clickhere_button.png\" alt=\"click here button\" />      </div>
    </div> 
    <!-- end #photo_banner -->
    
    <div id=\"categories\">
    <div class=\"column1\"><img src=\"images/car.jpg\" alt=\"photo of auto\" />
    <h3>Property &amp; Casualty Insurance</h3>
    <p class=\"bodytext\">We can write a policy to cover all of your personal assets.</p>
    <p><a href=\"#\" class=\"learnmore\">Learn more.</a></p>
    </div>
    <div class=\"column2\"><img src=\"images/commercialbuilding.jpg\" alt=\"photo of building\" />
    <h3>Commercial Insurance</h3>
    <p class=\"bodytext\">Protect your business assets: auto, property and liability.</p>
    <p><a href=\"#\" class=\"learnmore\">Learn more.</a></p>
    </div>
    <div class=\"column3\"><img src=\"images/life_photo.jpg\" alt=\"photo of couple\" />
    <h3>Property &amp; Casualty Insurance</h3>
    <p class=\"bodytext\">Plan ahead and learn to invest wisely.</p>
    <p><a href=\"#\" class=\"learnmore\">Learn more.</a></p>
    </div>
    </div>
    <div class=\"clear\">&nbsp;</div>
  </div>
<!-- end #wrapper -->
      <div class=\"footer\">
    <a href=\"#\">Home</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">Property &amp; Casualty</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">Commercial Insurance</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">Life &amp; Retirement Insurance</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">Health Insurance</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">About Us</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">Location</a>
    <span class=\"bottomnav_divider\">|</span><a href=\"#\">Contact Us</a>
<p>©2009 The Thompson Agency, Inc. - All rights reserved</p>
  </div>
</div>
  <!-- end #main_wrapper -->
</body>
</html>

CSS

@charset \"UTF-8\";
html, body, #main_wrapper {height: 100%;}
body {
	font: 100% Arial, Helvetica, sans-serif;
	margin: 0 auto; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-image: url(images/bcknd_gradient.gif);
	background-repeat: repeat-x;
	height: 100%;
}
.oneColFixCtr #main_wrapper  {
	width: 975px;
	background-image: url(images/bcknd_shadow.png);
	text-align: left;
	height:auto;
	min-height: 100%;
	margin: 0 auto ;
}
.oneColFixCtr    .wrapper  {
	width: 840px;
	margin-left: 65px;
}#header {
	height: 75px;
	padding-top: 37px;
}
#logo {
	width: 230px;
	float: left;
	display: inline;
}.tagline {
	font-family: Georgia, \"Times New Roman\", Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #666666;
}
#tagline {
	float: left;
	display: inline;
	padding-top: 38px;
	width: 290px;
	padding-left: 50px;
}
#address {
	float: left;
	display: inline;
	padding-left: 30px;
	width: 240px;
}
.headeraddress {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666666;
	text-align: right;
	line-height: 19px;
	padding-left: 25px;
}
#photo_banner {
	height: 240px;
	border-top: solid 2px #0098db;
	border-bottom: solid 2px #0098db;
	background-image: url(images/needaquote.gif);
	background-repeat: no-repeat;
	background-position: top right;
	clear: both;
}
#slideshow {
	width: 569px;
	height: 240px;
	padding: 0;
	margin: 0 auto;
	float: left;
}
#slideshow img {
	left: 0px;
	top: 0px;
	width: 569px;
	height: 240px;
}
#quote {
	float: left;
	display: inline;
	padding-left: 130px;
	padding-top: 155px;
	width: 130px;
}
#categories {
	margin-top: 35px;
	height: 290px;
	overflow: hidden;
	clear: both;
}
.column1 {
	width: 270px;
	float: left;
	margin-right: 0px;
	padding-left: 10px;
}
.column2 {
	width: 268px;
	float: left;
	border-left: solid 1px #999999;
	border-right: solid 1px #999999;
	padding-left: 10px;
}
.column3 {
	width: 270px;
	float: left;
	padding-left: 10px;
}
.bodytext {
	font-size: 13px;
	color: #666666;
	line-height: 18px;
}
h1 {
	font-size: 20px;
	color: #0066A4;
	font-weight: normal;
	text-transform: uppercase;
}
h2 {
	font-size: 18px;
	color: #0066A4;
	font-weight: normal;
}
h3 {
	font-size: 14px;
	color: #666666;
	margin-bottom: -12px;
}
 .footer {
	height: 50px;
	background-color: #0066A4;
	width: 840px;
	text-align: center;
	margin-left: 65px;
	padding-top: 10px;
	margin-top: 15px;
} .footer a {
	text-decoration: none;
	color: #FFFFFF;
	padding-right: 4px;
	padding-left: 4px;
	font-size: 12px;
} .footer a:hover {
	color:#a2d3e7;
} .footer p {
	font-size: 11px;
	color: #a2d3e7;
	margin-top: 8px;
}
.push {
	height: 70px;
}
.bottomnav_divider {color: #FFFFFF}
#topnav {
	margin-top: 20px;
	width: 840px;
	margin-left: -15px;
	clear: both;
}
ul									{
	list-style: none;
}
/* 
	LEVEL ONE
*/
ul.dropdown                         {
	position: relative;
}
ul.dropdown li                      {
	font-weight: normal;
	float: left;
	zoom: 1;
	background: #ffffff;
}
ul.dropdown a:hover		            {
	color: #5ccaf0;
}
ul.dropdown a:active                {
	color: #5ccaf0;
}
ul.dropdown li a                    {
	display: block;
	padding: 5px 13.5px;
	border-right: 1px solid #0098db;
	color: #0098db;
	font-size: 14px;
	text-decoration: none;
}
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                {
	background: #0098db;
	color: #FFFFFF;
	position: relative;
}
ul.dropdown li.hover a              {
	color: #FFFFFF;
}


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{
	width: 160px;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0px;
}
ul.dropdown ul li 					{
	font-weight: normal;
	background: #5ccaf0;
	color: #000;
	border-bottom: 1px solid #ffffff;
	float: none;
}
/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{
	left: 100%;
	top: 0;
	clear: both;
}
ul.dropdown li:hover > ul 			{ visibility: visible; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 
.learnmore  {
	font-size: 13px;
	color: #FFFFFF;
	line-height: 18px;
	text-decoration: none;
	background-color: #FF9900;
	padding: 2px 5px 2px 5px;
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	width: 0px;
	height: 0;
}

cybershot

well I am guessing you figured it out? I looked in firefox and in I.E and I don't see the issue you are talking about. If you are still having trouble, could you narrow down the issue, which tab, what browser.

ikthius

I posted this issue yesterday, and am back again today since no one responded

just bump the original thread in future, no need to have a duplicate thread.

ok, it looks as if it is fixed in FF anyway, but things to look for is z-indexing, make sure your banner part has less z-indexing than the navigation drop downs.

blueturtle

Thanks for the reply. I never could solve the issue with the menu falling behind the banner using the jquery plugin slideshow. I ended up using a flash plugin instead. Would rather use the jquery slideshow instead. If you think it is z-index, I might go back and try it.

Basically, both the drop down menu and slideshow using jquery used relative and absolute positioning. Think this may have been the conflict? I'm not sure what z-index is or zoom? are they related? the Dropdown UL had a zoom set to 1. I don't know if the slideshow banner was using zoom. If you can shed some light on this I will retry with your recommendation.

Thank you!

blueturtle

Sorry - as far as browsers were concerned, it was happening in both FF and Safari. Not sure about IE.

ikthius

z-index in like a stack of cards z-index-1 is under z-index 1 so the top one is the one you see in front of the one at the back...

so you could have a layer in front with some opacity so you can see through to the other layer so to speak

blueturtle

That's right! I have heard about it but was confused. So, if the dropdown menu (which is before the banner in html) is appearing behind the banner, how would that work? The dropdown menu has z-index 1, what would the z-index be for the photo banner to have the menu appear in front of it?

Thank you in advance for helping me out...I'm a newbee, so would love to grasp this concept.

cybershot

you could use a much higher number like 100. That's what I usually see. that should get the menu to appear over everything else.

blueturtle

"cybershot" said:
you could use a much higher number like 100. That's what I usually see. that should get the menu to appear over everything else.

Thanks! I will try it!
Kim

blueturtle

ikthius and cybershot,

Thank you so much!!! That was the issue—I set z-index to a higher number on the dropdown menu so that it would fall in front of the photo banner. Here is the updated link if anyone wants to view it in action:

http://thompsoninsurancefl.com/

I'm so glad I figured it out—I like using the jquery slideshow much better than a flash plugin. I had read a tutorial on z-index a while back, but I haven't had any run-ins with it until now.

Your help is much appreciated!

ikthius

glad it is sorted

von

I think something else that's important to remember that when z-index is not defined, "what's on top" is based on the order of objects within the code. Like the deck of cards illustration, you put out your first card and if you lay your second card to overlap at all, it will be on top of the first.

treehouse : what would you like to learn today?

Forums

Dropdown Menu hiding behind photo banner