PDA

View Full Version : Hover & hyperlink issue


johnMoss
01-27-2011, 07:40 PM
http://www.lacruzconcierge.com/dreamWeaverTestFile/home.html

3 things:
a) the post-it note up topside has a box border after establishing it as a hyperlink. Where did the border come from; how to get rid of it.. (Hyperlink currently leads to nowhere)

b) The menu buttons develop a dotted border which in fact represents their block size when the mouse button held down is held down over them. The mouse-down image is verified to have no such border.

c) Main reason for post: the orange 'click here' button down below.
Can't figure out what I'm doing wrong; the hover image doesn't display over the primary image during mouse-over, it stays under it. I've left the hover image in repeat mode so you can see what it is doing...

Thanx for help!


<!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>Untitled Document</title>
<link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body class="oneColFixCtrHdr" onload="MM_preloadImages('images/NB_homeDown.gif','images/NB_homeOver.gif','images/NB_homeDownOver.gif','images/NB_howItWorksDown.gif','images/NB_howItWorksOver.gif','images/NB_howItWorksDownOver.gif','images/NB_FAQDown.gif','images/NB_FAQOver.gif','images/NB_FAQDownOver.gif','images/NB_contactUsDown.gif','images/NB_contactUsOver.gif','images/NB_contactUsDownOver.gif','images/NB_qualityDown.gif','images/NB_qualityOver.gif','images/NB_QualityDownOver.gif')">
<div id="container">
<div id="header"><a href=""><img src="images/clickHere.gif" width="275" height="117" align="left" alt="Click Here To Get Us Shopping For You!" /></a>
<img src="images/shop17Logo.gif" width="450" height="117" align="right" alt="shop17Logo" />
<!-- end #header -->
</div>
<div class="menuBarLine"><img src="images/Orange-Line.gif" width="900" height="20" align="middle" alt="orange line" />
</div>
<div class="menu">
<table border="0" cellpadding="5" cellspacing="5">
<tr>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/NB_homeDown.gif',1)" onmouseover="MM_nbGroup('over','home','images/NB_homeOver.gif','images/NB_homeDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/NB_homeUp.gif" alt="home" name="home" border="0" id="home" onload="" /></a></td>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','howItWorks','images/NB_howItWorksDown.gif',1)" onmouseover="MM_nbGroup('over','howItWorks','images/NB_howItWorksOver.gif','images/NB_howItWorksDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/NB_howItWorksUp.gif" alt="How It Works" name="howItWorks" border="0" id="howItWorks" onload="" /></a></td>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','FAQ','images/NB_FAQDown.gif',1)" onmouseover="MM_nbGroup('over','FAQ','images/NB_FAQOver.gif','images/NB_FAQDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img name="FAQ" src="images/NB_FAQUp.gif" border="0" alt="Frequently Asked Questions" onLoad="" /></a></td>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','contactUs','images/NB_contactUsDown.gif',1)" onmouseover="MM_nbGroup('over','contactUs','images/NB_contactUsOver.gif','images/NB_contactUsDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img name="contactUs" src="images/NB_contactUsUp.gif" border="0" alt="Contact Us" onLoad="" /></a></td>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','qualityGuarantee','ima ges/NB_qualityDown.gif',1)" onmouseover="MM_nbGroup('over','qualityGuarantee','images/NB_qualityOver.gif','images/NB_QualityDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img name="qualityGuarantee" src="images/NB_qualityUp.gif" border="0" alt="Quality Guarantee" onLoad="" /></a></td>
</tr>
</table>
</div>
<div id="mainContent"><img src="images/shopper.gif" width="843" height="254" alt="Rock Bottom Pricing for your Custom Print Project" />


<!-- end #mainContent -->
</div>
<div class="subMainContent">

<h3>Products</h3>
<ul>
<li> Business Cards</li>
<li> Flyers</li>
<li> Postcards</li>
<li> Catalogs</li>
<li> Labels</li>
<li> Doorhangers</li>
<li>Multi-Part Forms</li>
<li>Banners</li>
<li>Brochures</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
<li>t</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="subMainText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tellus, sodales vitae mollis nec, vehicula quis dui. Integer quam libero, semper quis auctor ut, vehicula vitae nisl. Donec tincidunt nisi et elit posuere dignissim. Integer venenatis gravida neque, ut lacinia eros semper <ul class="Save">
<li> <strong>Save Money!</strong></li>
<li> <strong>Save Time!</strong></li>
<li> <strong>Quality Guaranteed!</strong></li>
<li> <strong>It's Sooo Easy!</strong></li>
</ul>
<p id="clickHereButton"><img src="images/clickHereUp.gif" width="151" height="64" alt="Click Here"/> </p>
</div>
</div>

<div id="footer">
<p><a href="#">HOME</a> | <a href="#">HOW IT WORKS | </a> | <a href="#">FAQ</a> | <a href="#">CONTACT US </a> | <a href="#">QUALITY GUARANTEE</a><br/>
<strong>&copy; 2011 DIVA GRAPHICS INC. DALLAS, TX </strong></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>




@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:url(images/skyBack.gif);
margin: 0; /* 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;
}

.menuBarLine{
margin-left:20px;
margin-right:20px;
}

.menu{
height:44px;
margin-left:20px;
margin-right:20px;
padding-left:25px;
margin-top:-13px;
}

.oneColFixCtrHdr #container {
width: 940px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #ffffff;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
border: 1px solid #d5e2f4;
}
.oneColFixCtrHdr #header {
background:url(images/skyBack.gif);
height:120px;
padding-left:60px;
padding-right:60px;


/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #ffffff;
margin-top:5px;
padding-left:35px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #d5e2f4;
text-align:center;
font-size:9px;
}
.subMainContent {
background:url(images/subBack.gif) no-repeat;
padding-top:45px;
padding-left:50px;

}
.subMainText{
float:right;
padding-left:250px;
padding-right:45px;
margin-top:-480px;
}
.Save{
font-size: 18px;
padding-left:175px;
}
#clickHereButton{
position:inherit;
display:block;
width:145px;
height:56px;
background-image:url("images/clickHereUp.gif") no repeat;
padding-left:340px;
padding-top:63px;

}
#clickHereButton:hover{
background-image:url("images/clickHereOver.gif");

}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

domedia
01-27-2011, 08:01 PM
a) On some browsers, images that are links will have a border. To turn it off, use CSS:
img {border: 0;}
(Specify browser it's happening on in the future, I almost ditched this until I checked in FF)

b) Most websites work like this on links. It's for accessibility. I never turn it off if I'm in reasonable control over the CSS.

c)Make it a link (which it's supposed to be, right?) and apply the :hover to the link. a:hover{}
Right now you have a hover on the whole box (paragraph), so it's doing exactly that.

johnMoss
01-28-2011, 01:37 PM
Thank you D...
On B & C above, I did an extensive amount of research last night and starting with the link issue, again those lines are following the actual shape of the image. The box is used to keep the entire navigator line from shifting as it was before, yet it is imperfect in terms of visual display as those lines are visible. Am I up a creek on this? Obviously I've some reading to do on the nuances of navaigation bars, any suggestions on where to visit?
The bulk of my research last night was spent on item c from above, which is now solely an IE hover gripe. The positioning issues are resolved, thank you for that, yet I'm still doing something wrong.

(I have IE 9) the hover link works fine in FF & Chrome, but no response in IE.

I've seen a variety of answers, most of which were ineffective. The one I haven't tried was converting the HTML to strict, which I'm leery of doing. Corrections posted below; link has been updated also; bound to be some simple oversight on my part, where am I going wrong? Thanx again!

I got rid of the paragraph, HTML below represents same placement in the HTML from above, just the line has changed.
http://www.lacruzconcierge.com/dreamWeaverTestFile/home.html


</ul>

<a class="clickHereButton" a href="" title="2 Minute Video"></a>

</div>
</div>



a.clickHereButton {
position:inherit;
display:block;
width:145px;
height:56px;
background-image:url("images/clickHereUp.gif");
margin-top:84px;
margin-left:340px;
}
a.clickHereButton:hover {
display:block;
background-image:url("images/clickHereOver.gif");
a:active;
}

domedia
01-28-2011, 02:06 PM
'a:active;' <- that does not belong in there. It's a pseudo selector, not a CSS declaration.

johnMoss
01-28-2011, 02:26 PM
That was one of those ineffectual solutions; it seemed harmless, so for the moment I left it there. I did try removing that, to no avail. I have removed it gain, reloaded the css page on the server, same problem, IE (9) hover inop... Did you per chance see anything else?

Corrosive
01-28-2011, 02:30 PM
Isn't IE9 still in Beta development?

domedia
01-28-2011, 04:03 PM
If it's not CSS, then the line needs to go.
Remove 'position: inherit' too, not sure why that is there.

DWcourse
01-28-2011, 06:12 PM
a:active would be used as the selector for a css new style rule (similar to a:hover) that would define the look of the link when you are actually clicking on it. It's not a property you would insert in another css rule.

Also consider combining the link and rollover images into one image and just changing the background position property on hover instead of subbing in a new image.

edbr
01-28-2011, 11:34 PM
Isn't IE9 still in Beta development?
its only for windows 7 asik

johnMoss
01-29-2011, 03:26 AM
I feel bad not responding in a timely manner to incoming assistance. I've come now to notice that I repetitively do not get email notifications of responses after the first two. This is normal or is it a glitch in the system?


Also consider combining the link and rollover images into one image and just changing the background position property on hover instead of subbing in a new image.


That is precisely what I was basing my original css on, i.e. a working position shift (-173 pixel change) of a single image. May have to go with that; my desired twist was to light up the font on the down image. I take it I have to delve into the mysteries of JQuery or Javascript for that one...


If it's not CSS, then the line needs to go.
Remove 'position: inherit' too, not sure why that is there.


a:active would be used as the selector for a css new style rule (similar to a:hover) that would define the look of the link when you are actually clicking on it. It's not a property you would insert in another css rule.


I am reminded of 'The Heart of Darkness' novel, or perhaps was it another of similar genre, where the illiterate native witchdoctor would go into a profuse diatribe of 'repair' incantations when the diesel water pump would quit... Bits & pieces I picked up off the net last night in looking for a solution proved fruitless, yet harmless in most cases so I didn't get in a hurry to get rid of them just yet... A corporal status does grant one some license (I hope...)

Problem still stands, so in this particular instance, given it's position and in the absence of javascript to the rescue, am I dead in the water on two images for this button for I.E. ?

DWcourse
01-29-2011, 03:33 AM
the point was that a:active where you have it could possibly break the css in some browsers. Also that a:cative used correctly as a selector could help with your border when the link is clicked issue.

Also it's possible for a link to have a background and still be text. Then you can use the a:hover pseudo-selector to change the background the text or both.

johnMoss
01-29-2011, 04:14 AM
http://www.w3schools.com/css/pr_pseudo_active.asp

was why I took a shot at a:active, but your observation frankly carries more validity; a:active was useless in my case.

I did a google search on a:cative and literally found nothing. I certainly would like to try that on the menu; Where is it's proper placement and how used? (Better put, where can I learn more about it?)

johnMoss
01-29-2011, 01:02 PM
oops... walk away from the computer... walk away...

Corrosive
01-29-2011, 01:54 PM
I did a google search on a:cative and literally found nothing.

I wonder why...? :wink: You need a break I think John!

johnMoss
01-29-2011, 08:07 PM
new rules...

.tequila {
scripting: "don't";
}