Solved

Why does this tooltip pop up immediately over the text as opposed to it being slightly to the right?

Posted on 2016-08-05
4
42 Views
Last Modified: 2016-08-08
Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KitchenCabinetCo.com by Online Cabinets Direct</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/carousel_stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/sidebar.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script language="Javascript">
	function MM_jumpMenu(targ,selObj,restore){ //v3.0
	eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
	if (restore) selObj.selectedIndex=0;
}

</script>

<script>
$.ajaxSetup({ cache: false });

$(document).ready(function(){
	
	
//this is your starting point where all your slidingNavTerms are hidden and your display_hide links are displayed

		$(".slidingNavTerms").hide();
		$(".display_hide").show();
 
//here's your actual function, as far as a user clicking on a link in order to see the "hidden" link beneath it 
 
		$('.display_hide').click(function(){
			$(this).next().slideToggle();
			//$(this).html("System Performance &#9650;");
		});
	
//this is the command that corresponds to all of the links on your main nav bar in that anytime the user hovers over a "primary" link, it sets all of the previously exposed links to "hidden." This way
//any expanded menus don't linger. Since I've got graphic to correspond with every link, I gave each link a function. It may not be the most elegant approach, but it got the job done.	

	$('.restore').hover(function(){
		$(".slidingNavTerms").hide();
		$(".display_hide").show();
	});
	
	$('.button').click(function() {
		//$('.screen'+$(this).val()).text('Button clicked: ' + $(this).val());
		$('#screen').show();
		$(this).next().show("slow");
	});
	
	$('.close_window').click(function() {
		//$('.screen'+$(this).val()).text('Button clicked: ' + $(this).val());
		$('#screen').hide();
		//$(this).prev().hide("slow");
		//$(this).hide("slow");
		$(".box").hide("slow");
	});
	
	/*$(".menu_toggle").click(function(e){
	e.preventDefault();
	$('#screen').hide();
	$(".box").hide("slow");
	$("#wrapper").toggleClass("menuDisplayed");
	$(window).scrollTop(0);
	});*/
	
	$("#show_cart").click(function(e){
	e.preventDefault();
	$('#sidebar_content').load('ajax.php?session_id=sucqqh1g0asn0onij1041mj2d4');
	//$('#sidebar_content').load(url +' #sidebar_content');
	$("#wrapper").toggleClass("menuDisplayed");
	$(window).scrollTop(0);
	$('#show_cart_button').hide();
	$("#select_option").hide();
	$(".button").hide();
	$('#screen').show();
	});
	
	$("#myForm").submit(function(e) {// use the correct ID
		e.preventDefault();// we don\'t want to submit anything until we\'ve first determined that the user\'s not get ready to duplicate something that\'s already in the database.
		
		var devTest = $( "#myForm" ).serialize(); //packaging all of our submitted variables into one, neat little var
		//alert("Develop test, URL prams = "+devTest);// publish a little alert box that lets you see your posted variables
		$.post( "ajax.php", devTest) // posting all of our variables to ajax.php 
			.done(function(Drumstick) { //the "done"function is what you\'re doing when the AJAX call (in this case the ajax.php page) is "done" running and we\'re now hearing back from the server
				if (Drumstick.charAt(0) == "E") //"Drumstick.charAT(0) is just fancy code for the first letter of what you\'re getting back from the server
				{
					alert("ERROR - The submarket has been entered before");
				}
				else 
				{	
					//alert(Drumstick);
					$('#sidebar_content').html(Drumstick);
					$(".box").hide("slow");
					$("#wrapper").toggleClass("menuDisplayed");
					$(window).scrollTop(0);
					$("#select_option").hide();
					$(".add_to_cart_button").hide();
					$("#show_cart_button").hide();
					$('#screen').show();
				}
			});
		});	
		
		$("#doorForm").submit(function(e) {// use the correct ID
		e.preventDefault();// we don\'t want to submit anything until we\'ve first determined that the user\'s not get ready to duplicate something that\'s already in the database.
		
		var devTest = $( "#doorForm" ).serialize(); //packaging all of our submitted variables into one, neat little var
		//alert("Develop test, URL prams = "+devTest);// publish a little alert box that lets you see your posted variables
		$.post( "ajax.php", devTest) // posting all of our variables to ajax.php 
			.done(function(Drumstick) { //the "done"function is what you\'re doing when the AJAX call (in this case the ajax.php page) is "done" running and we\'re now hearing back from the server
				if (Drumstick.charAt(0) == "E") //"Drumstick.charAT(0) is just fancy code for the first letter of what you\'re getting back from the server
				{
					alert("ERROR - The submarket has been entered before");
				}
				else 
				{	
					//alert(Drumstick);
					$('#sidebar_content').html(Drumstick);
					$(".box").hide("slow");
					$("#wrapper").toggleClass("menuDisplayed");
					$(window).scrollTop(0);
					$("#select_option").hide();
					$(".add_to_cart_button").hide();
					$("#show_cart_button").hide();
					$('#screen').show();
				}
			});
		});	
	
		$("#menu_toggle_option").click(function(e){
		e.preventDefault();
		//alert("ajax_2.php");
		$('#sidebar_content').load('ajax.php?session_id=sucqqh1g0asn0onij1041mj2d4');
		$("#wrapper").toggleClass("menuDisplayed");
		$('#show_cart_button').show();
		$("#select_option").show();
		$(".button").show();
		$('#screen').hide();
		return false;
		 //alert("The paragraph was clicked.");
	});
	
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	});
	
});

</script>
</head>
<body><!-- this is your browser container-->
<div id="screen"></div>
<div class="navbar_background">
<div style="background-color:#000000; height:49px; width:100%; position:absolute; z-index:-2"></div>
	<div class="bbb_logo"></div>
	<div class="social_icons">
		<a href="http://facebook.com" target="_blank"><div class="facebook_link"></div></a>
		<div class="blog_link"></div>
					<a href="checkout.php?session_id=sucqqh1g0asn0onij1041mj2d4"><div class="store_link"></div></a>
				<a href="#"><div class="avatar_link"></div></a>
	</div>
	<div class="no_cam_sign"></div>
	<!-- this is your navbar -->
	

<div class="navbar">
		<div class="navcontainer">
			<ul>
				<li><a href="index.php">Home</a></li>
				<li><a href="#" class="restore">About</a>
					<ul>
						<li><a href="about.php">About</a></li>
						<li><a href="construction.php">Construction</a></li>
						<li><a href="about.php#specs">Specifications</a></li>
						<li><a href="why.php">Why Buy RTA Cabinets...</a></li>
						<li><a href="#" class="display_hide" style="outline:0;">Policies  &#9660;</a>
							<div class="slidingNavTerms">
								<a href="returns.php" style="line-height:26px; outline:0;">Return Policy</a>
								<a href="privacy.php" style="line-height:26px; outline:0;">Privacy Policy</a>
								<a href="damage.php" style="line-height:26px; outline:0;">Damage Policy</a>
							</div>
						</li>
					</ul>
				</li>
				<li><a href="gallery_full.php" class="restore">Gallery</a>
					<ul style="width:400px; height:auto; background-color:#ffffff;">
										<br>
						<table border="0" style="width:auto; margin:auto;">
						<tr>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=558"><img src="Photos/crop.php?h=85&w=85&f=BlackIslandDistress[1].jpg"  border="0" alt="558" style="margin-left:-28px;"></a>
										Black Distressed										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=389"><img src="Photos/crop.php?h=85&w=85&f=brandywine_shaker2.jpg"  border="0" alt="389" style="margin-left:-28px;"></a>
										Brandywine Shaker										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=548"><img src="Photos/crop.php?h=85&w=85&f=2909GeorgiaAveKitchenC.jpg"  border="0" alt="548" style="margin-left:-28px;"></a>
										Chocolate Mist										</td>
									</tr>
								</table>
														</td>

						</tr><tr>
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=324"><img src="Photos/crop.php?h=85&w=85&f=FrenchVanilla2.jpg"  border="0" alt="324" style="margin-left:-28px;"></a>
										French Vanilla Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=323"><img src="Photos/crop.php?h=85&w=85&f=kitchen010.jpg"  border="0" alt="323" style="margin-left:-28px;"></a>
										Ginger Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=304"><img src="Photos/crop.php?h=85&w=85&f=Mocha Hood 2.jpg"  border="0" alt="304" style="margin-left:-28px;"></a>
										Mocha Deluxe										</td>
									</tr>
								</table>
														</td>

						</tr><tr>
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=773"><img src="Photos/crop.php?h=85&w=85&f=white_deluxe.jpg"  border="0" alt="773" style="margin-left:-28px;"></a>
										White Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=692"><img src="Photos/crop.php?h=85&w=85&f=2909GeorgiaAveKitchenB.jpg"  border="0" alt="692" style="margin-left:-28px;"></a>
										White Shaker										</td>
									</tr>
								</table>
														</td>

						<td>&nbsp;</td></tr></table><br>	
					</ul>					
				</li>
				<li><a href="all_doors.php" class="restore">Door Styles</a>
					<ul style="width:480px; height:auto; background-color:#ffffff;">
					<!-- code for feature doors -->					
											<table border="0" style="width:450px; margin:auto;">
							<tr>
							<td colspan="4" style="padding-top:5px; padding-bottom:5px;"><a href="rta_doors.php" class="doors">view standard finishes...</a></td>
						</tr>
						<tr>
						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=389"><img src="assets/images/door_colors/Brandywine Shaker.jpg" border="0" alt="Brandywine Shaker Sample Door" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Brandywine Shaker										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=324"><img src="assets/images/door_colors/3FV12.jpg" border="0" alt="French Vanilla Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										French Vanilla Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=323"><img src="assets/images/door_colors/Ginger.jpg" border="0" alt="Ginger Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Ginger Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=555"><img src="assets/images/door_colors/HARVEST3.JPG" border="0" alt="Harvest Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Harvest Deluxe										</td>
									</tr>
								</table>
														</td>

						</tr><tr>
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=304"><img src="assets/images/door_colors/Mocha.jpg" border="0" alt="Mocha Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Mocha Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=725"><img src="assets/images/door_colors/WhiteChocolatePen.jpg" border="0" alt="White Deluxe Chocolate Glaze Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Chocolate Glaze										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=692"><img src="assets/images/door_colors/WhiteShaker.jpg" border="0" alt="White Shaker Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										White Shaker										</td>
									</tr>
								</table>
														</td>

						<td>&nbsp;</td></tr>						 <tr>
							<td colspan="4"><a href="custom_doors.php" class="doors">view custom finishes...</a></td>
						</tr>
						</table><br>					</ul>	
				
				</li>
				<li><a href="#" class="restore">How to Design Your Kitchen</a>
					<ul>
						<li><a href="design.php">Design</a></li>
						<li><a href="assembly.php">Assembly</a></li>
					</ul>
				</li>
				<li><a href="faqs.php" class="restore">Faqs</a></li>
				<li><a href="reviews.php" class="restore">Reviews</a></li>
				<li><a href="contact.php" class="restore">Contact</a></li>
			</ul>
		</div>	
	</div></div>
<div id="wrapper">
	<div id="page_content_wrapper">
		<div id="sidebar_wrapper">
			<div style="background-color:#b20606; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;"><a href="#" id="menu_toggle_option" style="color:#ffffff;">Continue Shopping</a></div><div style="background-color:#0687b2; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;"><a href="checkout.php?session_id=sucqqh1g0asn0onij1041mj2d4" style="color:#ffffff;">Checkout</a></div>
			<br><br>
				<div id="sidebar_content"></div>
			</div>
			<!-- end of cart sidebar-->
		<div style="margin:auto; width:1000px; height:auto; margin-bottom:50px;"><!-- this centers your content-->
			<br><br>
			<div style="background-image:url(images/satellite_text_header.jpg); background-repeat:no-repeat; width:857px; height:81px; margin:auto;"><!-- filler-->
			<a href="index.php"><div style="width:328px; height:45px; position:relative; display:inline-block;"></div></a>
			<a href="all_doors.php"><div style="width:82px; height:22px; position:relative; display:inline-block; margin-left:10px;"></div></a>
			<a href="cabinets_home.php"><div style="width:52px; height:22px; position:relative; display:inline-block; margin-left:-3px;"></div></a>
			<a href="trim_home.php"><div style="width:98px; height:22px; position:relative; display:inline-block; margin-left:-1px;"></div></a>
			<a href="posts_home.php"><div style="width:138px; height:22px; position:relative; display:inline-block; margin-left:2px;"></div></a>
			<a href="accessories_home.php"><div style="width:113px; height:22px; position:relative; display:inline-block; margin-left:2px;"></div></a>
			</div>
			<div style="background-image:url(images/satellite_filler.jpg); background-repeat:y-repeat; width:857px; height:auto; margin:auto;">	
				<div style="width:790px; min-height:750px; margin-left:50px;"><br><!--main content-->	
<style>
.tip {

	background-color:#ffffff;
	filter:alpha(opacity=95);
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid #cccccc;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;
	margin-top:-50px;
	margin-left:25px;
	z-index:1000;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
 </style>		
			<div style="position:absolute; width:182px; height:48px; margin-top:-45px; margin-left:320px;"><a href="all_doors.php"><img src="images/back_to_doors.jpg" border="0"></a></div><br>
			
			<!-- here is where you put your product info -->
						<div style="margin-left:20px; height:26px; float:left; padding-top:5px;">
								<a href="cabinets_home.php" style="color:#000000;"><b>Cabinets</b></a>&nbsp;&#10148;&nbsp;<b><a href="cabinets_home.php?category_id=7" style="color:#000000;">Base Cabinets</b></a>&nbsp;&#10148;&nbsp;<b><a href="cabinets.php?category_id=7" style="color:#000000;">Standard Base Cabinets</b></a>
							</div>
			<div style="width:132px; height:26px; position:relative; margin-left:640px;" id="show_cart_button"><a href="#"><img src="images/view_cart.png" border="0" id="show_cart"></a></div>
			<br>
				<br>
					<table border="0" style="margin:auto;">
						<tr>
														<td style="width:75px; text-align:center;"><img src="images/left_arrow.png"><br>n/a</td>
							<td style="text-align:center; padding-left:10px; padding-right:10px;">
														<img src="assets/images/2010CabinetImages/B15.jpg" border="0" alt="B15" style="height:180px;">
									
							</td>
							<td><br>
							<div class="product_label">
							<b>Standard Base Cabinets</b><br>
							<b>Part Number:</b> B15<br>
							<b>Your Price:</b> $165.00							</div>
							<input type="image"  src="images/select_options.png" class="button" style="margin:auto; margin-top:3px;" id="select_option">
							<!-- right in here is your hidden "box" div-->
							<div class="box">
								<!--beginning of bordered div-->
								<div style="width:580px; height:auto; margin:auto; padding:5px; margin-top:10px;">
								
									<!--beginning text and nameplate-->
									Select your cabinet options from the pulldown menu below. Then be sure to enter the quantity at the bottom. If you have any questions, be sure to contact us at  (615) 828-8377 or email: <a href="mailto:orders@onlinecabinetsdirect.com" style="color:#000000;">orders@onlinecabinetsdirect.com</a>.<br><br>
									<div style="background-color:#000000; color:#ffffff; font-weight:bold; width:560px; height:25px; margin:auto; text-align:center; padding-top:3px;">B15 | Base Cabinets | $165.00</div><br>
									<!--end of beginning text and nameplate-->
									<form method="Post" id="myForm"><!-- this is being sent to ajax.php and you're triggering the "add_to_cart" function with the session_id-->
									<table style="width:475px; margin:auto;" border="0">
																															<tr>
												<td><b>select imagepath from option_features where id='2'													<a href="#" class="tip_trigger" style="color:#000000; text-decoration:underline;"><span class="tip"><img src="assets/images/trashpullout_thumbnail.jpg" style="width:150px;"></span>Add Pull Out Trash Can</a>
																								</b></td>
											</tr>
											<tr>
												<td><select name="select_1" style="width:500px;">
												<option></option>
																																						<option value="1_1_145.00">
													Add Pull Out Trash Can													+[$145.00]
																										</option>
																																						<option value="1_2_0">
													Do Not Add Trash Can Pull Out													</option>
																								</select>
												<br><br></td>
											</tr>
																																												<tr>
												<td><b><a href="#" class="tip_trigger" style="color:#000000; text-decoration:underline;"><span class="tip"><img src="assets/images/trashpullout_thumbnail.jpg" style="width:150px;"></span>Add Roll Out Tray</a>
																								</b></td>
											</tr>
											<tr>
												<td><select name="select_2" style="width:500px;">
												<option></option>
																																						<option value="2_5_100.00">
													Add 2 ROTB15													+[$100.00]
																										</option>
																																						<option value="2_3_50.00">
													Add 1 ROTB15													+[$50.00]
																										</option>
																																						<option value="2_4_0">
													Do Not Add Roll Out Trays													</option>
																								</select>
												<br><br></td>
											</tr>
																																																							<tr>
												<td><b>select imagepath from option_features where id='15'Cabinet Assembly												</b></td>
											</tr>
											<tr>
												<td><select name="select_3" style="width:500px;">
												<option></option>
																																							<option value="3_7_60.00">Standard Finish Utility / Oven Cabinet Assembly +[$60.00]</option>
																																									<option value="3_6_30.00">Standard Finish Base / Wall Cabinet Assembly +[$30.00]</option>
																																									<option value="3_8_0.00">No Assembly / Customer Will Assemble Upon Receipt</option>
																										</select>
												<br><br></td>
											</tr>
																																																							<tr>
												<td><b>select imagepath from option_features where id='23'Finished Side Panel Skins As You Are Looking At The Cabinet Front												</b></td>
											</tr>
											<tr>
												<td><select name="select_4" style="width:500px;">
												<option></option>
																																						<option value="4_12_0">
													Both Side Exposed													</option>
																																						<option value="4_10_0">
													Right Side Exposed													</option>
																																						<option value="4_9_0">
													Left Side Exposed													</option>
																																						<option value="4_11_0">
													No Side Exposed													</option>
																								</select>
												<br><br></td>
											</tr>
																																																																		<tr>
												<td><b>select imagepath from option_features where id='28'Hinge Direction												</b></td>
											</tr>
											<tr>
												<td><select name="select_5" style="width:500px;">
												<option></option>
																																						<option value="5_14_0">
													Hinge Left													</option>
																																						<option value="5_13_0">
													Hinge Right													</option>
																								</select>
												<br><br></td>
											</tr>
																																									<tr>
											<td><b>Select Your Cabinet Color From Our Drop Down Menu</b></td>
										</tr>
										<tr>
											<td><select name="select_6" style="width:500px;" disabled>
																						<option selected value="6_324_0">
											French Vanilla Deluxe											</option>
																				<!--here's where you need to put your list of all doors so user can change their finish if they want to-->
										</select><br><br>
										</td>
									</tr>
																		<tr>
										<td colspan="2" style="text-align:center; background-color:#cccccc; padding:5px;"><b>quantity:</b> <input type="text" size="15" name="quantity" style="display:inline-block;"></td>
									</tr>
									</table>
								</div>
								<!--end of bordered div-->
								<br><br>
								<!-- close button -->
								<!-- the session_id is what triggers the ring_it_up / add_to_cart function on line 509 of the ajax.php page-->
								<div style="bottom:0; left:0; right:0; position:relative; padding-bottom:5px; width:248px; height:50px; text-align:center; margin:auto;"><img src="images/cancel.png" class="close_window" style="float:left;">&nbsp;&nbsp;
								<input type="hidden" name="session_id" value="sucqqh1g0asn0onij1041mj2d4">
								<input type="hidden" name="feature_door_id" value="324">
								<input type="hidden" name="door_price" value="0">
								<input type="hidden" name="the_count" value="6">
								<input type="hidden" name="part_id" value="B15">
								<input type="hidden" name="product_id" value="8">
								<input type="hidden" name="product_name" value="B15">
								<input type="hidden" name="price" value="165.00">
								<input type="hidden" name="category_name" value="Base Cabinets">
								<input type="image" src="images/add_to_cart_button.png" style="float:left;" border="0"></a></div></form>
								<!--end of close button-->
								
							</div>
							<!-- end of hidden box div-->
							</td>
														<td style="width:75px; text-align:center;"><a href="door_shop.php?door_id=324&product_id=9"><img src="images/right_arrow.png" border="0"></a><br>B18</td>
						</tr>
					</table>
							<br>
			<div style="width:100%; margin:auto; height:25px; text-align:center;">
						<select name="select54" style="width:500px; border-radius:10px; font-size:10pt; background-color:#000000; color:#ffffff;" onchange="MM_jumpMenu('top',this,1)">	
			<option>Change Door / Color Finish...</option>
															<option value="door_shop.php?door_id=548&product_id=8">French Vanilla Deluxe With Chocolate Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=550&product_id=8">French Vanilla Deluxe With Chocolate Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=549&product_id=8">French Vanilla Deluxe With Pewter Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=561&product_id=8">French Vanilla Deluxe With Harvest Glaze Including Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=672&product_id=8">Black Distressed Ginger Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=569&product_id=8">Ginger Vandyke Distressed Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=552&product_id=8">Mocha Deluxe Vandyke Distressed Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=534&product_id=8">French Vanilla Deluxe Vandyke Distressing Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=557&product_id=8">Standard Black Finish Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=554&product_id=8">Ginger Vandyke Rub Finish Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=553&product_id=8">Mocha Deluxe Vandyke Rub Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=304&product_id=8">Mocha Deluxe</option>
																	<option value="door_shop.php?door_id=323&product_id=8">Ginger Deluxe</option>
																<option value="door_shop.php?door_id=324&product_id=8" style="background-color:#cccccc; color:#000000;">French Vanilla Deluxe</option>
																<option value="door_shop.php?door_id=389&product_id=8">Brandywine Shaker</option>
																	<option value="door_shop.php?door_id=692&product_id=8">White Shaker</option>
																	<option value="door_shop.php?door_id=555&product_id=8">Harvest Deluxe</option>
																	<option value="door_shop.php?door_id=556&product_id=8">Teaberry Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=558&product_id=8">Black Distressed Mocha Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=725&product_id=8">White Deluxe Chocolate Glaze</option>
																	<option value="door_shop.php?door_id=726&product_id=8">Black Shaker Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=748&product_id=8">Dark Grey Shaker Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=747&product_id=8">Light Grey Shaker Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=789&product_id=8">Green Chocolate Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=734&product_id=8">White Deluxe Chocolate Mist +[$115.00]</option>
																	<option value="door_shop.php?door_id=753&product_id=8">White Deluxe Charcoal Mist +[$115.00]</option>
																	<option value="door_shop.php?door_id=733&product_id=8">White Deluxe Vandyke Distressed +[$130.00]</option>
																	<option value="door_shop.php?door_id=735&product_id=8">Pecan With Black Glaze +[$115.00]</option>
																	<option value="door_shop.php?door_id=773&product_id=8">White Deluxe No Glaze +[$85.00]</option>
																	<option value="door_shop.php?door_id=776&product_id=8">Espresso Shaker +[$100.00]</option>
									</select>
			</div><br>
				<div class="shop_navbar">
	<div class="shop_navbar_container">
		<ul>
		<!--here's where you put your first function that's calling all of your macro_categories sans RTA Cabinet Door Samples and Shippiing-->
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
							<li><a href="#">Cabinets &#9660;</a>
				<!-- here are your submenus. With "Trim & Details," you've got several subcategories that require a little more width so that's why there's an if statement here -->
								<ul>
																	<li><a href="#">Base Cabinets</a>
						<ul>
													<li><a href="cabinets.php?category_id=33">
							Corner Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=2">
							Drawer Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=3">
							Full Height Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=4">
							Peninsula Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=34">
							Sink Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=6">
							Specialty Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=7">
							Standard Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=8">
							Trimmable Knee Drawers & Desk File Drawers							</a></li>
													<li><a href="cabinets.php?category_id=35">
							Trimmable Knee Drawers & Desk File Drawers@Vanity							</a></li>
												</ul>
						</li>
																	<li><a href="cabinets.php?category_id=14">
							Tall Cabinets							</a></li>
																		<li><a href="cabinets.php?category_id=23">
							Vanity Cabinets							</a></li>
																<li><a href="#">Wall Cabinets</a>
						<ul>
													<li><a href="cabinets.php?category_id=24">
							Blind Corner Wall Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=25">
							Chimney Hoods							</a></li>
													<li><a href="cabinets.php?category_id=26">
							Corner Wall Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=27">
							Mullion Doors							</a></li>
													<li><a href="cabinets.php?category_id=28">
							Refrigerator Cabinets 24							</a></li>
													<li><a href="cabinets.php?category_id=1">
							Specialty Wall Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=36">
							Standard Wall Cabinets							</a></li>
												</ul>
						</li>
										</ul>
								<!-- end of submenus -->
			</li>
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
							<li><a href="#">Trim & Details &#9660;</a>
				<!-- here are your submenus. With "Trim & Details," you've got several subcategories that require a little more width so that's why there's an if statement here -->
								<ul style="white-space:nowrap; width:250px;">
																			<li><a href="trim.php?category_id=15">
							Decorative Door Panels							</a></li>
																		<li><a href="trim.php?category_id=16">
							Fillers							</a></li>
																		<li><a href="trim.php?category_id=17">
							Hood Box Columns							</a></li>
																		<li><a href="trim.php?category_id=18">
							Moldings & Trim							</a></li>
																		<li><a href="trim.php?category_id=19">
							Moldings & Trim@Trim &...							</a></li>
																		<li><a href="trim.php?category_id=20">
							Panels & Toe Kick							</a></li>
																		<li><a href="trim.php?category_id=21">
							Touch Up Kits							</a></li>
																		<li><a href="trim.php?category_id=22">
							Valances & Base Skirts							</a></li>
											</ul>
								<!-- end of submenus -->
			</li>
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
							<li><a href="accessories.php?category_id=10">Cabinet Accessories</a></li>
							<!-- end of submenus -->
			</li>
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
								<li><a href="posts.php?category_id=11">Posts, Corbels & Onlays</a></li>
								<!-- end of submenus -->
			</li>
				</ul>
	</div>
</div><!-- this concludes your product nav bar-->		<table style="width:700px; margin:auto;" border="0">
			<tr>
				<td style="text-align:center;" rowspan="2"><img src="assets/images/door_colors/3FV12.jpg" style="width:225px;">
												<div style="position:absolute; width:96px; height:78px; margin-top:-75px; margin-left:135px;"><img src="images/free_shipping.png"></div>
				</td>
				<td style="vertical-align:top; text-align:center;"><span class="satellite_title">French Vanilla Deluxe</span><hr style="margin-top:-2px;"><a href="door_samples.php?id=324"><img src="images/information_button.jpg" border="0" style="margin-top:-2px;"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="gallery.php?category=324"><img src="images/gallery_button.jpg" border="0" style="margin-top:-2px;"></a>
			</tr>
			<tr style="height:250px;">
				<td style="vertical-align:top;"><br><ul><li><b>Name:</b> French Vanilla Deluxe Door Sample</li><li><b>Your Price:</b> $165.00</li></ul>
				<div style="position:relative; width:84px; height:86px; float:right; display:inline-block;"><form method="Post" id="doorForm"><input type="hidden" name="session_id" value="sucqqh1g0asn0onij1041mj2d4"><input type="hidden" name="feature_door_id" value="FV">
				<input type="hidden" name="price" value="165.00">
				<input type="hidden" name="sample_door_alert" value="1">
				<input type="hidden" name="quantity" value="1">
				<input type="hidden" name="product_id" value="324">
				<input type="hidden" name="the_count" value="1">
				<input type="hidden" name="part_id" value="FVDS">
				<input type="hidden" name="category_name" value="RTA Cabinet Door Samples">
				<input type="hidden" name="product_name" value="French Vanilla Deluxe Door Sample">
				<input type="image" src="images/add_to_cart.png"></form></div>Click on the "select options" button below to choose the features and specifications you desire for this product.<br><br><div style="text-align:center;"><b>FREE SHIPPING ON ALL DOOR SAMPLES!</b></div>				
				</td>
			</tr>
		</table>
				</div><!-- this closes your main content -->
			</div><!-- this closes your filler-->
			<div style="background-image:url(images/satellite_text_footer.jpg); background-repeat:no-repeat; width:857px; height:25px; margin-left:71px; margin-top:-10px;"></div>
		</div><!-- this closes what centers your content-->
	</div><!-- this closes your page_content wrapper-->
	<div class="footer">Kitchen Cabinet Company | rtakitchencabinetsonline.com |  (p) 615-828-8377 | (e) admin@kitchencabinetsonline.com</div>
</div><!-- this closes your wrapper-->

</body></html>

Open in new window


Here's the thing: The tooltip works, which is sweet! But while I can maneuver it to some extent using the CSS (.tooltip), I want to put it immediately to the right of the link itself. How can I pull that off?

Here's a screenshot of what I'm looking at right now:

screenshot
What do you think?
0
Comment
Question by:brucegust
  • 2
4 Comments
 
LVL 7

Accepted Solution

by:
rgranlund earned 250 total points
ID: 41744942
Adjust the CSS...
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
ID: 41744961
I'm using the link from your previous question. This code with all its relative urls is not very useful.

If you want it to be to the right of Add Pull Out Trash Can, then it should be after the text in the HTML stream. Right now it comes immediately before the text. You'll also have to remove your negative margins.

I'd like to offer a bit of constructive criticism. Since we seem to be answering a lot of very similar questions; questions that you should be able to answer yourself if you learned anything from the previous question, I'd like to focus on teaching you one very important thing. If we only ever teach you but one thing, that one thing should be to use the HTML validator to validate your code. It's very easy to use although fixing your errors may not be so easy. Just navigate to the validator page and paste or type in the url to your page. Admittedly, that will not help in this particular situation, but your page has a lot of errors that need to be corrected.
0
 

Author Closing Comment

by:brucegust
ID: 41747138
Thanks, guys! Kim, help me with this: The Validator has always been a bit of a pointless endeavor to me and before you choke on your coffee, let me explain why.

I've gone out there before and most of it was incremental things like the lack of a "alt" on my images. Oftentimes when I'm looking for a discrepancy in my code, the Validator is of little help. I respect your input, so what is it about the Validator that I need to revisit in order to benefit from what it brings to the table?
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41747393
Fortunately I don't drink coffee. Please be patient and read all the way to the end.

Having been in this business for nearly 20 years and remembering the struggles we went through before Microsoft relented and acknowledged that they weren't the authority over HTML, I guess I have a greater respect for the rules. In those days it became necessary for developers to create pages that were "optimized or Internet Explorer" or "optimized for Netscape Navigator." But it was nearly impossible to create pages that worked in both. Then came Firefox and Opera and Chrome which were designed to be very forgiving of errors and attempted to interpret what the developer meant instead of what they said, so to speak.

Without going into a full on sermon on the purity of compliance, suffice it to say that modern browsers are very forgiving. You see these errors as incremental because the popular browsers overlook your lack of discipline. You take advantage of their forgiving nature and continue writing non-compliant code until one day a browser upgrade breaks one of those routines for overlooking an error and suddenly your page renders the way it was written instead of the way you wanted it to. Or a new browser enters the market and becomes popular but it isn't quite as forgiving as the ones you exploited when you created the page. I'm afraid your sites will become a burden to maintain.

You mention the requirement to include an alt attribute on all images. You see this as trivial until you realize that not everyone who visits your pages will have broadband. And not everyone who visits your pages will have sight. Most of the pages I've seen that you've created are ecommerce sites so I would think it would be important not to ignore a shopper who has images turned off because of limited bandwidth or those with poor eyesight who use screen readers for their internet shopping. These are why the alt attribute is required.

But besides all this, when you ask us to help you find and fix a problem, it's very difficult to do when we have to wade through a myriad of errors to find just the one that's not being forgiven by the browser. Show a little respect for those of us you ask to help you.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now