CSS - Cursor Hand

I've a menu bar that's a horizontally displayed list (i.e. set up with the following values:

ul{
margin-top:5px;
margin-bottom:5px;
margin-left:0px;
}
li.inline
{
display:inline;
padding-left:5px;
padding-right:5px;
border-left:1px solid #fff;
}

Contained in the following code:

<div id="mainNav">
<UL>
<li class="first"><a href="../about/index.html">About</a></li>
<li class="inline"><a href="../contact/index.html">Contact</a></li>
<li class="inline"><a href="../services/index.html">Services</a></li>
<li class="inline"><a href="index.html">Portfolio</a></li>
</UL>

On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element.

Is there a way to get both Firefox and IE to have no padding?

Thanks
</div>

Hello All,

I'm not too savvy with CSS, so please pardon if this seems uber easy.

I have started to use Google AdSense on my web pages ( I wish I could show you an example on my website, but I am not allowed to post a URL on the forum), In Firefox, it shows the main content on the left hand side and the Ads on the right hand side in a columnar format, however, there is no word wrapping going on. In Internet Explorer, the AdSense shows at the top right and then below that my content starts.

Here is what I have in my HTML in a single TD Cell:

[div class="google120rightbanner"]

[script type="text/javascript"][!--
google_ad_client = "myAdSenseID";
google_alternate_ad_url = "(Alternate Adsense URL)";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--]
[/script]
[script type="text/javascript"
src="(Javascript URL Location)"]
[/script]

[/div]

[!-- Show my main content --]

[div id="ContentPane" runat="server" style="padding-left:2px;"][/div]
[!-- End my main content --]

[div class="clear"][/div]


This is what I have in my CSS:

.google120rightbanner [
width: 122px;
margin: 15px 10px 5px 10px;
float: right; /*allows main content to wrap around the google ad */
/*note: after this we need to use the clear class to clear the float at end of container */
]

.clear [
clear: both;
]


NOTE: I have changed the brackets so I can display this message on the forums.

Does anyone have any idea what I am doing wrong here in getting the display I want using this CSS? Again, I'm not very savvy about this, so a good explanation would be helpful.

Thank you all very much!

Mark Gordon

I guess I dont know what this technique is called so it was hard for me to search for an answer. The best example I can give is if you go to Dells website or any other site where you can build a computer and as you scroll down there is that box that always stays in the upper right hand corner that displays the price. Is that possible in CSS? Could somebody give me the name of the technique so I can try looking for mulitple answers or show me how its done?

Thanks,
Dave

Hi,

Is their any way to change the cursor color in css or javascript?

Thanks
Rishu

Hi all,

I'm trying to change my cursor when I hover over a image on a onclick event as the example below but I can't get this to work.

<a onmouseover="this.style.cursor='hand'">

Regards

Stephen

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}


#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.

kopertone.com/newsite/index1.html

Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks!

I have 2 problems with the following code:
1- the vertical align only works in FF (not IE)
2- i cannot get the #index .contact to attach to the bottom right hand corner of the wrapper



* {
margin: 0;
padding: 0;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}

body{
font: 100% verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
}

#container{
display: table;
height: 100%;
width: 100%;
margin: 0;
}

#content{
display: table-cell;
vertical-align: middle;
position: relative;
}

#index{
border: 1px dotted gray; /*for clarity in the demo*/
width: 900px;
height: 645px;
margin: 0 auto;
}
#index .logo{
position: relative;
top: 0px;
left: 0px;
}
#index .contact{
position: absolute;
bottom: 0px;
right: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> I2Eye Design </title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>

<div id="container">
<div id="content">
<div id="index">
<div class="logo">logo</div>

<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="400" height="400" id="index_eyeball" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index_eyeball.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="index_eyeball.swf" quality="high" bgcolor="#ffffff" width="400" height="400"
name="index_eyeball" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</center>

<div class="contact">contact button</div>
</div>

hello,

i'm placing a custom cursor on a stylesheet like so:

body { cursor: url(normal.cur), default; }

and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)?

thanks for any help!

I'm trying to change the cursor when a user mouses over an image.

Code:

cursor:hand

Works perfect in IE, but the cursor tag doesn't respond at all in Firefox.

I've been able to "trick" Firefox when using onClick JS links by putting href="#".

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;


}

When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links.

Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links.

www.middle-age-guy.com/forum-css-help_images.html


Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page.

___________________________________________

#header {
width: 998px;
margin: 0 auto;
}

#header .container {
background:url(images/head_pat.jpg) left top repeat-x;
height: 200px;
}

/* -- links along the top of the page (Home,

MAGman Lifestyles, etc. --*/

.topline {
}

ul.menu li.page_item {
float: left;
display: inline;
font-size:12px;
margin-top: 25px;
}


ul.menu li.page_item a {
color:#000!important;
text-decoration: none;
padding:25px 0 0px 0px;
margin-right: 15px;
list-style-type: none;
}

ul.menu li.page_item a:hover {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}


ul.menu li.current_page_item a {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}

/* -------------------- Image on right side of header ---------*/

#magmanheadshot {
padding:0;
margin:25px 50px 20px 0;
float:right;
width:160px;
color:#003e4f;
}

/*--------------- Title - Middle-Age-Guy.com --------------*/

#headline {
width:450px;
margin-top: 20px;
}


#headline h1 {
display: block;
clear:left;
font-size:30px;
margin-left: 20px ;
margin-bottom: 5px;
color:#FFFFFF;
font-weight:normal;
}


/* ------------- Tagline below the title --------------*/
.desc_l {
background:url(images/desc_l.gif);
width:10px;
height:27px;
float:left;
margin-left: 25px;

}


.desc {
background:url(images/desc_pat.gif);
height:27px;
float:left;
font-size:14px;
line-height:25px;
font-weight:normal;
color:#FFFFFF;
}



.desc_r {
background:url(images/desc_r.gif);
width:10px;
height:27px;
float:left;
}



.magmandatingsystem {
margin: 10px 0 0 0;
font-size: 12px;
padding: 0 0 0 23px;
float: left;
width: 400px;
}

/* --------------------- Membership login link -----*/

.login {
font-size: 18px;
color:#FFFFFF;
text-decoration: none;
float: right;
margin-top: -80px;
margin-right: 50px;
list-style-type: none;
}

.login a {
color:#FFFFFF!important;
text-decoration: none;
}

.login a:hover {
color:#FF0000!important;
text-decoration:none;

}

.join {
font-styleblique;
font-size: 9px;
font-weight: bold;
}

.join a {
text-decoration:underline !important;
color:#ff0000!important;
}

.join a:hover {
color:#0099FF!important;
}

/* ------------ End of Header -*/

_______________________________________

Here is the relevant html from header.php

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1><?php bloginfo(''); ?></h1>

<div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->
______________________________________________

Finally, this is the source code

________________________________________________

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1>Middle-Age-Guy.com</h1>

</div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->


Thanks for any help you can bring.

Scott

When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac

Even tried a{ cursor:pointer; } but the same thing happens...

http://pd-scammell.co.uk/site/

Any ideas?

Thanks.

Hi

I've got a testpage, with everything removed except the problem which occurs in Firefox
http://ied.gospelcom.net/tester.php

There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is
#reportalert {visibility:hidden;}

This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen.

As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus.

It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD.

Any other ideas I could try?

thanks

Tony

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.