www.webdeveloper.com
Results 1 to 3 of 3

Thread: Tool Tips stopped working!

  1. #1
    Join Date
    Jun 2013
    Posts
    38

    Tool Tips stopped working!

    I spent all day yesterday coding some awesome-looking tool tips, via http://sixrevisions.com/css/css-only-tooltips/
    and they looked super sexy and worked like a charm. This morning they were still working fine, so I moved on to my next project. I didn't touch anything in my css or html for these tool tips, yet they stopped working a few minutes later. I swear I didn't delete anything, and I can't figure out why they are no longer working...

    This is what it's supposed to look like (while hovering)
    This is what it currently looks like:

    You can get the source code for the tool tips on the website listed above. The following are my complete CSS and HTML files...
    Can anybody see why they may have stopped working?

    Code:
    .tourtitle h1 {
    	font-family: 'platin';
    	font-size: 25pt;
    }
    .tourpage {
    	background: url('images/bandeback.JPG') no-repeat;
    	background-size: 491px 327px;
    	height: 491px;
    	overflow: hidden;
    	color:  #F8F8F8;
    }
    .tourpage-desc {
    	position: absolute;
    	bottom: 200px;
    	font-family: 'platin';
    	padding-left: 120px;
    	width: 340px;
    	line-height: 1.3em;
    }
    .tourpage-desc h2 {
    	font-family: 'platin';
    	font-size: 22pt;
    	line-height: 1.2em
    }
    .tourpage-desc h3 {
    	font-family: 'tradegothic';
    	font-size: 12pt;
    	line-height: 1.2em
    }
    .tourpage-text {
    	float: right;
    	width: 220px;
    	font-size: 12pt;
    	line-height: 1.1em;
    	color: black;
    	margin-right: -20px;
    }
    .tourpage-text ul {
    	padding-top:15px;
    }
    .tour-quote {
    	color:black;
    	float: left;
    	position: relative;
    	top: 70px;
    {
    
    .tour-button {
    	background: url('images/Whole_Button.png') no-repeat;
    	font-family: 'platin';	
    	box-shadow: 2px 2px 3px #888888;
    }
    
    /*TOOLTIPS*/
    
    .tooltip {
    	color: #000000; 
    	outline: none;
    	text-decoration: none;
    	position: relative;
    }
    .tooltip span {
    	margin-left: -999em;
    	position: absolute;
    }
    .tooltip:hover span {
    	border-radius: 5px 5px; 
    	-moz-border-radius: 5px; 
    	-webkit-border-radius: 5px; 
    	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
    	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
    	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    	font-family: Calibri, Tahoma, Geneva, sans-serif;
    	position: absolute; 
    	left: 1.8em; 
    	z-index: 99;
    	width: 250px;
    }
    .tooltip:hover img {
    	border: 0; 
    	margin: -10px 0 0 -55px;
    	float: left; 
    	position: absolute;
    }
    .tooltip:hover h1 {
    	font-family: 'platin', Tahoma, Geneva, sans-serif; 
    	font-size: 1.5em; 
    	font-weight: bold;
    	display: block; 
    	padding: 0.2em 0 0.6em 0;
    }
    .classic { 
    	padding: 0.8em 1em; 
    }
    
    * html a:hover { 
    	background: transparent; 
    }
    
    .inspections { 
    	padding: 0.5em 0.8em 0.8em 2em;
    	background: rgb(246,248,249); /* Old browsers */
    	background: -moz-linear-gradient(top, rgba(246,248,249,1) 44%, rgba(245,247,249,1) 52%, rgba(215,222,227,1) 70%, rgba(147,143,143,1) 98%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(44%,rgba(246,248,249,1)), color-stop(52%,rgba(245,247,249,1)), color-stop(70%,rgba(215,222,227,1)), color-stop(98%,rgba(147,143,143,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#938f8f',GradientType=0 ); /* IE6-9 */
    	border: 1px solid #FFFFD1;	
    }
    
    /*END OF TOOLTIPS*/
    Code:
    <div class="entry-content">
    		<h1 class='entry-title'>
    Take The Tour<br />
    </h1>
    <hr class='rh'>
    <div>
    <div style="position:relative; height:433px; width:971px; background:url(https://stage.cleantelligent.com/wp-content/themes/cleantelligent/images/Tour-Splash-Page.jpg) 0 0 no-repeat;">
    <a style="position:absolute; top:0px; left:678px; width:280px; height:38px;" class="tooltip" alt="Facility Management Software" href="https://stage.cleantelligent.com/tour/facilities-management-software/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/CTicon.png" alt="Facility Managers" height="48" width="48" />
    <h1>Facility Managers</h1> This is so very very awesome! Buy me!
    </span>
    </a>
    <a style="position:absolute; top:214px; left:105px; width:240px; height:53px;" class="tooltip" alt="Janitorial Inspection Software" href="https://stage.cleantelligent.com/tour/janitorial-inspection-software/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/inspections.png" alt="Inspections" height="48" width="48" />
    <h1>Inspections</h1> This is so very very awesome! Buy me!
    </span>
    </a>
    <a style="position:absolute; top:270px; left:105px; width:291px; height:51px;" class="tooltip" alt="Mobile Surveys" href="https://stage.cleantelligent.com/tour/mobile-surveys/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/inspections.png" alt="Inspections" height="48" width="48" />
    <h1>Mobile Surveys</h1> This is so very very awesome! Buy me!
    </span>
    </a>
    <a style="position:absolute; top:324px; left:105px; width:257px; height:51px;" class="tooltip" alt="Work Order Software" href="https://stage.cleantelligent.com/tour/work-order-software/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/workorders.png" alt="Work Orders" height="48" width="48" />
    <h1>Work Orders</h1> This is so very very awesome! Buy me!
    </span></a>
    <a style="position:absolute; top:377px; left:105px; width:288px; height:52px;" class="tooltip" alt="Janitorial Scheduling Software" href="https://stage.cleantelligent.com/tour/janitorial-scheduling-software/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/workorders.png" alt="Work Orders" height="48" width="48" />
    <h1>Job Scheduling</h1> This is so very very awesome! Buy me!
    </span></a>
    <a style="position:absolute; top:219px; left:483px; width:186px; height:53px;" class="tooltip" alt="Janitorial Reports" href="https://stage.cleantelligent.com/tour/janitorial-reports/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/workorders.png" alt="Work Orders" height="48" width="48" />
    <h1>Reports</h1> This is so very very awesome! Buy me!
    </span></a>
    <a style="position:absolute; top:274px; left:483px; width:402px; height:52px;" class="tooltip" alt="Janitorial Bidding Software" href="https://stage.cleantelligent.com/tour/janitorial-bidding-software/" target="_self">
    <span class=inspections">
    <img src="/wp-content/themes/cleantelligent/images/workorders.png" alt="Work Orders" height="48" width="48" />
    <h1>Bidding and Estimating</h1> This is so very very awesome! Buy me!
    </span></a>
    <a style="position:absolute; top:327px; left:483px; width:270px; height:50px;" class="tooltip" alt="Time Tracking Software" href="https://stage.cleantelligent.com/tour/time-tracking-software/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/workorders.png" alt="Work Orders" height="48" width="48" />
    <h1>Time Tracking</h1> This is so very very awesome! Buy me!
    </span></a>
    <a style="position:absolute; top:380px; left:483px; width:210px; height:49px;" class="tooltip" alt="Inventory Tracking Software" href="https://stage.cleantelligent.com/tour/inventory-tracking-software/" target="_self">
    <span class="inspections">
    <img src="/wp-content/themes/cleantelligent/images/workorders.png" alt="Work Orders" height="48" width="48" />
    <h1>Inventory</h1> This is so very very awesome! Buy me!
    </span></a>
    
    </div>
    </div>
    <p></p>
    
    			</div><!-- .entry-content -->

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,214
    Large parse error reported by CSS Validator: http://jigsaw.w3.org/css-validator/#...t+with_options

    Some HTML errors too: http://validator.w3.org/#validate_by_input+with_options

    Use which ever input method you want. I would try correcting the errors first and see if that fixes the problem.

  3. #3
    Join Date
    Jun 2013
    Posts
    38
    Quote Originally Posted by Major Payne View Post
    Large parse error reported by CSS Validator: http://jigsaw.w3.org/css-validator/#...t+with_options

    Some HTML errors too: http://validator.w3.org/#validate_by_input+with_options

    Use which ever input method you want. I would try correcting the errors first and see if that fixes the problem.
    There probably will be some parse errors because I left out the header files and all the server info, for sake of simplicity. I mostly just copied the relevant code. Sorry, I know that was misleading. Thanks though.

    Any other ideas? It WAS working for at least 12 hours, then it just stopped. A friend of mine said it could be a server error? I have no idea what that would mean or why it would happen... thoughts?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles