 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
scottymcc
Joined: 03 May 2007
Posts: 6
|
 Posted: Wed Sep 24, 2008 6:51 am Roll over menu, image displays the wrong way |
 |
|
|
Hi.
I've been playing around with a menu for a revamp of a site. When I resized the image and changed the CSS to display the menu at the size I wanted the image went a little out.
I know it's probably just changing one value in the CSS, problem is which one and what do I change it too?
http://www.thegoanexperience.com/problem.html
Probably should have created the new directory first. Anyway, here's how it's meant to be displayed in full size (excuse the spaces where the rest of the menu's should be as I have no time to clean it up :=/) -
http://www.thegoanexperience.com/test/index
Number 3.
help! |
|
sticks464
Joined: 31 Dec 2006
Posts: 1282
|
| Posted: Wed Sep 24, 2008 9:57 am |
|
|
|
All you need is the original image which is 64px height. The one you are using is 32px height.
Edit
If you want to use the 32px height image you have now, you have to make the following changes to the css
| Code: |
#menu3 {
width: 111px;
margin: 10px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 18px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 2px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -18px;
padding: 2px 0 0 10px;
} |
Checked in Opera, Safari, IE6-7 and FF. |
|
scottymcc
Joined: 03 May 2007
Posts: 6
|
| Posted: Thu Sep 25, 2008 1:51 pm |
|
|
|
Thanks!
I tried it but had problems with displaying it on the site though. Something to do with the tables perhaps. Not sure. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1282
|
| Posted: Thu Sep 25, 2008 3:03 pm |
|
|
|
| You'll have to post your complete page code or give a live link for someone to help. |
|
scottymcc
Joined: 03 May 2007
Posts: 6
|
| Posted: Fri Sep 26, 2008 1:36 am |
|
|
|
Ok, this is the .dwt file code in dreamweaver. I'm posting this as it seems to be happening to all the pages. Some time after it came out I noticed in IE7 there's a small gap in between the top two images on the left. Could this have something to do with it?
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><link rel="Shortcut Icon" href="/favicon1.ico">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<meta name="description" content="Ayurvedic training in Goa India, offering the chance to visit the beautiful State of Goa while learning short term or long term Ayurveda courses.">
<meta name="keywords" content="Ayurvedic Training in Goa, Goan Experience, Goan, Ayurveda training, Ayurveda school, Ayurvedic education, residential course, Ayurveda education, Ayurveda massage techniques, Ayurveda cooking, beauty treatments, face treatments,training in ayurveda,ayurveda, training in Ayurveda, AHNC, Ayurvedic National Health Centre, philosophy of ayurveda, history of ayurveda, panchamahabhutas, shiroabhyanga, shadrasas, padabhyanga,tridoshas, astrology, dinacharya and ritucharya, back massage, prakruti parikshan, determination, panchakarma,abhyanga, medicinal herbs and spices, Ayurvedic oil massage, yoga,spice farm">
<link href="../text.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('../images/images_tmplte_main/leftSideButtons/down/AboutUsdown.jpg','../images/images_tmplte_main/leftSideButtons/down/linksdown.jpg','../images/images_tmplte_main/leftSideButtons/down/homeLeftDown.jpg','../images/images_tmplte_main/leftSideButtons/down/commentsdown.jpg','../images/images_tmplte_main/leftSideButtons/down/ContactDown.jpg','../images/images_tmplte_main/leftSideButtons/down/keraladown.jpg','../images/images_tmplte_main/leftSideButtons/down/distancelearningdown.jpg','../images/images_tmplte_main/leftSideButtons/down/accomdown.jpg')">
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="521" height="102" valign="bottom"><img src="../images/images_tmplte_main/top_1.jpg" alt="The Goan Experience" width="521" height="102" border="0" usemap="#Map6">
<map name="Map6">
<area shape="rect" coords="24,39,234,103" href="../index.htm">
<area shape="rect" coords="411,38,429,55" href="../index.htm" alt="The Goan Experience">
<area shape="rect" coords="473,36,499,57" href="../sitemap.html" alt="Sitemap">
<area shape="rect" coords="443,36,466,57" href="../ContactDetails.htm" alt="contact details">
</map> </td>
<td width="45" height="295" rowspan="2"><img src="../images/images_tmplte_main/topNavigation/home.jpg" alt="The Goan Experience" width="45" height="295" border="0" usemap="#Map"></td>
<td width="47" height="295" rowspan="2"><img src="../images/images_tmplte_main/topNavigation/trainingDetails.jpg" alt="Course in Goa India" width="47" height="295" border="0" usemap="#Map2"></td>
<td width="46" height="295" rowspan="2"><img src="../images/images_tmplte_main/topNavigation/schoolAyurveda.jpg" alt="School of Ayurveda" width="46" height="295" border="0" usemap="#Map8"></td>
<td width="44" height="295" rowspan="2"><img src="../images/images_tmplte_main/topNavigation/accommodation.jpg" alt="Accomodation in Goa" width="44" height="295" border="0" usemap="#Map4"></td>
<td width="63" height="295" rowspan="2"><img src="../images/images_tmplte_main/topNavigation/gettingThere.jpg" alt="Getting to Goa" width="63" height="295" border="0" usemap="#Map5"></td>
</tr>
<tr>
<td height="193" valign="top"><img src="../images/images_tmplte_main/top_2.jpg" alt="The Goan Experience" width="521" height="193" border="0" usemap="#Map7"></td>
</tr>
</tr>
<tr>
<td height="122" colspan="6"><table width="766" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="22" background="../images/images_tmplte_main/left_line.jpg"> </td>
<td valign="top"><table width="722" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="499" valign="top"><table width="499" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="32"><table width="499" height="32" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7"><img src="../images/images_tmplte_main/leftGrey.jpg" width="7" height="32"></td>
<td background="../images/images_tmplte_main/greyBG1.jpg"> </td>
<td width="7"><img src="../images/images_tmplte_main/rightGrey.jpg" width="7" height="32"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="168" valign="top"><table width="499" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="111" height="150" valign="top"><table width="111" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="31"><a href="../index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','../images/images_tmplte_main/leftSideButtons/down/homeLeftDown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/homeLeftup.jpg" alt="Ayurveda home" name="Home" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td height="31"><a href="../aboutUs.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','../images/images_tmplte_main/leftSideButtons/down/AboutUsdown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/AboutUsup.jpg" alt="About the staff" name="About Us" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td height="7"><a href="../Ayurveda-training.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Ayurvedic training in Goa India','','../images/images_tmplte_main/leftSideButtons/down/ayurvedictrainingdown.jpg',0)"><img src="../images/images_tmplte_main/leftSideButtons/on/ayurvedictrainingup.jpg" alt="Ayurvedic courses in Goa India" name="Ayurvedic training in Goa India" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td height="8"><a href="../Ayurvedic-training-Kerala.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Ayurveda in Kerala India','','../images/images_tmplte_main/leftSideButtons/down/keraladown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/keralaup.jpg" alt="Ayurveda courses in Kerala India" name="Ayurveda in Kerala India" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td height="16"><a href="../distance-Learning.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Distance Learning in Ayurveda','','../images/images_tmplte_main/leftSideButtons/down/distancelearningdown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/distancelearningup.jpg" alt="Distance Learning in Ayurveda" name="Distance Learning in Ayurveda" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td><a href="../accom.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Accommodation','','../images/images_tmplte_main/leftSideButtons/down/accomdown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/accommup.jpg" alt="Accommodation" name="Accommodation" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td height="15"><a href="../Comments.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Comments','','../images/images_tmplte_main/leftSideButtons/down/commentsdown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/commentsup.jpg" alt="Comments on courses by past clients" name="Comments" width="111" height="31" border="0"></a></td>
</tr>
<tr>
<td height="16"><p><a href="../ContactDetails.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contactUs','','../images/images_tmplte_main/leftSideButtons/down/ContactDown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/Contactup.jpg" alt="Contact Us" name="contactUs" width="110" height="31" border="0"></a><a href="../links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','../images/images_tmplte_main/leftSideButtons/down/linksdown.jpg',1)"><br>
</a></p> </td>
</tr>
<tr>
<td height="16"><p><a href="../links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','../images/images_tmplte_main/leftSideButtons/down/linksdown.jpg',1)"><img src="../images/images_tmplte_main/leftSideButtons/on/linksup.jpg" alt="Links to other sites you may find interesting" name="Links" width="111" height="31" border="0"></a></p> </td>
</tr>
</table> </td>
<td width="388" valign="top" background="../images/images_tmplte_main/lightGreyText.jpg"><table width="388" height="178" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="147" valign="top"><!-- TemplateBeginEditable name="EditRegion4" -->
<table width="388" border="0" cellspacing="0" cellpadding="10">
<tr>
<td height="90" valign="top"> </td>
</tr>
</table>
<!-- TemplateEndEditable --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="32"><table width="499" height="32" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7"><img src="../images/images_tmplte_main/leftGrey.jpg" width="7" height="32"></td>
<td background="../images/images_tmplte_main/greyBG1.jpg"> </td>
<td width="7"><img src="../images/images_tmplte_main/rightGrey.jpg" width="7" height="32"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="221" valign="top"><table width="499" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="494" height="219" valign="top"><!-- TemplateBeginEditable name="EditRegion5" -->
<table width="494" height="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td valign="top"> </td>
</tr>
</table>
<!-- TemplateEndEditable --></td>
<td width="4" background="../images/images_tmplte_main/middleDividerGrey.jpg"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="223" valign="top"><table width="223" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><table width="223" border="0" cellspacing="0" cellpadding="8">
<tr>
<td align="left" valign="top"><p><span class="textBold3">newsletter</span>
<style>
.signupframe {
border: 1px solid #ffffff;
background: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</p>
<form method=post action="http://app.icontact.com/icp/signup.php" name="icpsignup" accept-charset="UTF-8" onsubmit="return verifyRequired();" >
<input type=hidden name=redirect value="http://www.thegoanexperience.com/Thanks.htm" />
<input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" />
<script language=javascript>
function verifyRequired() {
if (document.icpsignup.fields_email.value == "") {
alert("The Email field is required.");
return false;
}
if (document.icpsignup.fields_fname.value == "") {
alert("The Name field is required.");
return false;
}
return true;
}
</script>
<div id="SignUp">
<table width="200" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign=top align=right> <span class="text1"><font size="2">*Email</font></span> </td>
<td align=left>
<input name="fields_email" type=text size="20" maxlength="50"> </td>
</tr>
<td valign=top align=right> <span class="text1"><font size="2">*Name</font></span> </td>
<td align=left>
<input name="fields_fname" type=text size="20" maxlength="40"> </td>
</tr>
<input type=hidden name="listid" value="103896">
<input type=hidden name="specialid:103896" value="WMAT">
<input type=hidden name=clientid value="57316">
<input type=hidden name=formid value="1917">
<input type=hidden name=reallistid value="1">
<input type=hidden name=doubleopt value="0">
<TR>
<TD> </TD>
<TD class="text1"><font size="1">*</font><font size="2">
= Required Field</FONT></TD>
</TR>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</div>
</form></p>
<p class="text1">Your details will not be disclosed to any other party without your prior consent</a>.</p></td>
</tr>
</table></td>
</tr>
<tr>
<td height="3" background="../images/images_tmplte_main/horizontalLine.jpg"><img src="../images/images_tmplte_main/horizontalLine.jpg" width="220" height="3" align="middle"></td>
</tr>
<tr>
<td align="center" valign="top"><table width="223" height="56" border="0" cellpadding="8" cellspacing="0">
<tr>
<td valign="top"><h3 class="textBold3">Image Gallery</h3>
<p><span class="textBold2">General Ayuveda Images</span><a href="http://www.thegoanexperience.com/cpg133/thumbnails.php?album=1"><br>
<img src="../images/images_tmplte_main/01_main_36.jpg" alt="Ayurveda Images" width="205" height="55" border="0"></a><span class="textBold2"><br>
Goa </span><a href="http://www.thegoanexperience.com/cpg133/thumbnails.php?album=2"><br>
<img src="../images/images_tmplte_main/01_main_35.jpg" alt="General Goa Images" width="205" height="57" border="0"></a><span class="textBold2"><br>
Ayurvedic Course training<br>
</span><a href="http://www.thegoanexperience.com/cpg133/thumbnails.php?album=3"><img src="../images/images_tmplte_main/studentPhotoGal.jpg" alt="Ayurvedic training images" width="200" height="54" border="0"></a></p>
<p> </p>
<p align="center"><font size="2"><img src="../images/images_tmplte_main/Bobbys.jpg" alt="Checking out the course program" width="205" height="141"></font></p>
<p class="small">Jackie Kearney (The Goan Experience UK) and John
McClements (The Goan Experience Goa) check out
the course program me.</p></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"></td>
</tr>
<tr>
<td height="3" valign="top" background="../images/images_tmplte_main/horizontalLine.jpg"></td>
</tr>
<tr>
<td height="125" valign="top"><!-- TemplateBeginEditable name="EditRegion6" -->
<table width="223" height="100%" border="0" cellpadding="10" cellspacing="0" class="text1">
<tr>
<td valign="top"> </td>
</tr>
</table>
<!-- TemplateEndEditable --></td>
</tr>
</table></tr>
</table></td>
<td width="22" background="../images/images_tmplte_main/right_Line.jpg"> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="6"><img src="../images/images_tmplte_main/copyright.jpg" alt="The Goan Experience" width="766" height="66"></td></br>
</td>
</tr>
<tr align="center">
<td colspan="6" class="text1"><p><font size="2"><a href="../disclaimer.html" target="_blank">Disclaimer</a></font></p> </td>
</tr>
</table>
<p>
<map name="Map4">
<area shape="rect" coords="3,4,39,101" href="../accom.htm" alt="Accomodation in Goa">
</map>
</p>
<map name="Map2">
<area shape="rect" coords="6,5,41,101" href="../Ayurveda-training.html" alt="Training details">
</map>
<map name="Map3">
<area shape="rect" coords="4,5,39,98" href="../schoolofAyurveda.html">
</map>
<map name="Map5">
<area shape="rect" coords="5,9,39,99" href="../gettingThere.htm" alt="Getting to Goa">
</map>
<map name="Map7">
<area shape="rect" coords="23,-6,236,79" href="../index.htm" alt="The Goan Experience">
</map>
<map name="Map">
<area shape="rect" coords="4,5,41,100" href="../index.htm" alt="The Goan Experience">
</map>
<map name="Map8"><area shape="rect" coords="2,7,43,97" href="../schoolofAyurveda.html" alt="School of Ayurveda">
</map>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4533619-2");
pageTracker._trackPageview();
</script>
</body>
</html> |
Edit in - forgot code tags |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
