How to fix a Three Pixel Text Jog on a Javascript script
Hi, I have a three pixel text jog alert on some javascript in my webpage. It applies to the script underneath the gallery loads comment. See code. I have put the hollyhack for IE at the top to apply to divs, but how can you apply it to javascript. Hope you can help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Description" content="your description goes here" />
<meta name="Keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Original design: Andreas Viklund - http://andreasviklund.com/" />
<link rel="stylesheet" type="text/css" href="satori.css" />
<title>Satori Creative : Branding Portfolio</title>
<!--[if IE]>
<style type="text/css">
#containerPort, #FrogJS { zoom: 1;}
</style>
<![endif]-->
<script type="text/javascript" src="scripts/prototype.js">
</script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects">
</script>
<script type="text/javascript" src="scripts/frog.js">
</script>
<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('navImages/brandingUp.png','navImages/graphicUp.png','navImages/websiteUp.png','navImages/portfolioUp.png','navImages/aboutUsUp.png','navImages/contactusUp.png','navImages/pricesUp.png','navImages/homeUp.png')">
<div id="containerPort">
<div id="bottomNav"></div>
<ul id="menuOuter">
<li id="menu1"><a id="menuLink" href="#" name="menuLink"></a>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<a href="Branding.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('branding','','navImages/brandingUp.png',1)"><img src="navImages/branding.png" name="branding" width="216" height="40" border="0" id="branding" /></a><a href="Design.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('graphic','','navImages/graphicUp.png',1)"><img src="navImages/graphic.png" name="graphic" width="172" height="40" border="0" id="graphic" /></a><a href="WebDesign.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('website','','navImages/websiteUp.png',1)"><img src="navImages/website.png" name="website" width="172" height="40" border="0" id="website" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','navImages/portfolioUp.png',1)"><img src="navImages/portfolio.png" name="portfolio" width="120" height="40" border="0" id="portfolio" /></a><a href="aboutSatori.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutUs','','navImages/aboutUsUp.png',1)"><img src="navImages/aboutUs.png" name="aboutUs" width="119" height="40" border="0" id="aboutUs" /></a><a href="ContactUs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactUs','','navImages/contactusUp.png',1)"><img src="navImages/contactus.png" name="contactUs" width="132" height="40" border="0" id="contactUs" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prices','','navImages/pricesUp.png',1)"><img src="navImages/prices.png" name="prices" width="91" height="40" border="0" id="prices" /></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','navImages/homeUp.png',1)"><img src="navImages/home.png" name="home" width="86" height="40" border="0" id="home" /></a>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<div id="FrogJS"></a> <a href="images/AbbotStat.gif" title="Richard Abbot Logo and Stationery Pack"><img src="images/AbbotStat_thumb.gif" alt="Richard wanted to refresh his existing logo for his Your Way Forward business. <br />This logo reflects Richards business of Personal Development and Tarot Reading." /></a>
<a href="images/Motherstat.gif" title="Mother and Baby Consultant Logo Design and Stationery"><img src="images/Motherstat_thumb.gif" alt="Jane wanted a logo to reflect her business as a Maternity Nurse. <br />She wanted a soft look using pinks and blues and was thrilled with the result. " /></a>
<a href="images/BingLogo.gif" title="BING - Business Improvement and Networking Group Branding"><img src="images/BingLogo_thumb.gif" alt="BING who are a networking group in Gloucestershire wanted a clean, <br />simple logo to portray a business feel." /></a>
<a href="images/Dawn.gif" title="Dawn Davies Holistic Therapist - Logo Design"><img src="images/Dawn_thumb.gif" alt="Dawn wanted to incorporate the Ds in her name with a holistic feel. <br />It also needed to be a logo which could be sewn onto T-shirts and caps." /></a>
<a href="images/JoHale.gif" title="Jo Anne Hale - Therapeutic Dance and Movement - Logo and Stationery"><img src="images/JoHale_thumb.gif" alt="Jo has many forms of Dance she teaches, so portraying all of them in one logo was difficult. This logo reflects the music, movement and fun, appealing to both men and women." /></a>
<a href="images/Premier.gif" title="Premier Pampering Branding and Stationery"><img src="images/Premier_thumb.gif" alt="Rebecca who is Beauty and Holistic Therapist needed a logo to reflect both of these skills. Using her favourite colour turqoise, we came up with an image that reflects her business." /></a>
<a href="images/SallyLogo.gif" title="Sally Rosemary of Escential Health - Logo Design"><img src="images/SallyLogo_thumb.gif" alt="Sally runs Escential Health Holistic Therapies and needed her logo updating to compliment her expanding business." /></a>
<a href="images/SarahLogo.gif" title="Sarah Holder, Shiatsu Practitioner - Logo Design"><img src="images/SarahLogo_thumb.gif" alt="I needed a logo to promote myself as a Shiatsu Practitioner. Being a Japanese therapy, <br />I felt drawn to using the Japanese symbol enso which embraces wholeness. <br />It is also the foundation of my Satori logo." /></a>
<a href="images/CrockettsCard.gif" title="Crockett Cresswell - Logo Design and Business Card"><img src="images/CrockettsCard_thumb.gif" alt="Crockett was looking for an image that showed how he worked as a healer with the energies within and around the body. He uses his logo to explain his techniques to clients." /></a>
<a href="images/springbankStat.gif" title="Springbank Healing Centre - Logo Design and Stationery"><img src="images/springbankStat_thumb.gif" alt="The logo needed to express the brightness and vitality of good health, and also something to make it stand out from other therapy centres." /></a></div>
<!-- BEGIN SCRIPT TO HIDE THUMBNAILS WHILE GALLERY LOADS -->
<script type="text/javascript">
//<![CDATA[
<!--
var ribbit = document.getElementById('FrogJS');
// Adds loading message to FrogJS DIV
ribbit.innerHTML += 'Please wait while gallery loads<br /><img src="images/loading.gif" />';
// Hides thumbnails while gallery loads
var anchors = ribbit.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
anchors[i].style.display = 'none';
}
-->
//]]>
</script>
<!-- END SCRIPT TO HIDE THUMBNAILS WHILE GALLERY LOADS -->
<div id="sideNav">
<ul>
<li><a href="Branding.html" title="Satori Logo Design"><span>Logo Design</span></a></li>
<li><a class="current" href="BrandingPort.html" title="Satori Branding Portfolio"><span>Branding Portfolio</span></a></li>
</ul>
</div>
</div>
<div id="footer">Copyright Satori Creative. All rights reserved | <a href="#">Home</a> | <a href="#">Sitemap</a> | <a href="#">XHTML</a> | <a href="#">CSS</a></div>
</body>
</html>
Pawel Witkowski
I read your question 4 times and still dont understand... where is that 3px jog ?? On what element? Can you give a link to work version ?
ASKER
Sorry for confusion, the 3px text jog is showing on the following script below <script type="text/javascript">
so it must be applying to FrogJS Div. I have attached the CSS file as well. If its impossible to sort out from just the code, I will upload the website.
<!-- BEGIN SCRIPT TO HIDE THUMBNAILS WHILE GALLERY LOADS -->
<script type="text/javascript">
//<![CDATA[
<!--
var ribbit = document.getElementById('F
// Adds loading message to FrogJS DIV
ribbit.innerHTML += 'Please wait while gallery loads<br /><img src="images/loading.gif" />';
// Hides thumbnails while gallery loads
var anchors = ribbit.getElementsByTagNam
for (var i=0; i<anchors.length; i++){
anchors[i].style.display = 'none';
}
-->
//]]>
</script>
<!-- END SCRIPT TO HIDE THUMBNAILS WHILE GALLERY LOADS -->
so it must be applying to FrogJS Div. I have attached the CSS file as well. If its impossible to sort out from just the code, I will upload the website.
<!-- BEGIN SCRIPT TO HIDE THUMBNAILS WHILE GALLERY LOADS -->
<script type="text/javascript">
//<![CDATA[
<!--
var ribbit = document.getElementById('F
// Adds loading message to FrogJS DIV
ribbit.innerHTML += 'Please wait while gallery loads<br /><img src="images/loading.gif" />';
// Hides thumbnails while gallery loads
var anchors = ribbit.getElementsByTagNam
for (var i=0; i<anchors.length; i++){
anchors[i].style.display = 'none';
}
-->
//]]>
</script>
<!-- END SCRIPT TO HIDE THUMBNAILS WHILE GALLERY LOADS -->
/* fix for IE<=6's 3-pixel gap bug */
* {
margin:0;
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 76%;
background-color: #FDFBE8;
background-repeat: repeat-x;
}
a {
color:#000000;
}
a:hover {
}
p {
color: #002318;
}
img {
}
/* Headers */
h1 {
color:#002318;
font-size:1.8em;
text-align:left;
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: .2em;
font-weight: normal;
}
h2 {
color: #002318;
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0px;
}
#containerHome {
color:#002318;
width:1024px;
background-image: url(im/SatBackv2.jpg);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
height: 800px;
background-position: center top;
}
#containerAbout {
color:#002318;
width:1024px;
background-repeat: no-repeat;
height: 800px;
background-position: center top;
position: relative;
margin-right: auto;
margin-left: auto;
background-image: url(im/SatAbout.jpg);
}
#containerPort {
color:#002318;
width:1024px;
background-image: url(im/SatPort.jpg);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
height: 800px;
background-position: center top;
position: relative;
}
#containerProcess {
color:#002318;
width:1024px;
background-image: url(im/Satprocess.jpg);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
height: 800px;
background-position: center top;
position: relative;
}
#circularMenu {
padding:0;
list-style:none;
position:relative;
height:600px;
background-image: url(circular/background.gif);
background-repeat: no-repeat;
margin-top: 150px;
width: 620px;
float: right;
}
#circularMenu li {
display:block;
width:150px;
height:150px;
position:absolute;
}
#circularMenu li.home {
left:180px;
top:2px;
background-image: url(im/aboutSat.png);
background-repeat: no-repeat;
background-position: center center;
background-image: url(im/aboutSat.png);
}
#circularMenu li.chat {
left:310px;
top:80px;
background-image: url(im/Identity.png);
background-repeat: no-repeat;
background-position: center center;
}
#circularMenu li.upload {
left:50px;
top:70px;
background-image: url(im/prices.png);
background-repeat: no-repeat;
background-position: center center;
}
#circularMenu li.email {
left:350px;
top:190px;
background-image: url(im/graphicDesign.png);
background-repeat: no-repeat;
background-position: center center;
}
#circularMenu li.address {
top:190px;
background-image: url(im/links.png);
background-repeat: no-repeat;
background-position: left center;
left: 50px;
}
#circularMenu li.shop {
left:300px;
top:310px;
background-image: url(im/websiteDes.png);
background-repeat: no-repeat;
background-position: center center;
}
#circularMenu li.search {
left:50px;
top:310px;
background-image: url(im/contactUs.png);
background-repeat: no-repeat;
background-position: center center;
}
#circularMenu li.delivery {
left:170px;
top:390px;
background-image: url(im/Port.png);
background-repeat: no-repeat;
background-position: center center;
}
#circularMenu li a b {
display:none;
}
#circularMenu li a {
display:block;
width:150px;
height:150px;
text-align:center;
}
#circularMenu li a:hover {
text-decoration:none;
}
#circularMenu li a:hover b {
position:absolute;
display:block;
width:200px;
height:200px;
font-size:16px;
color:#002318;
}
#circularMenu li a:hover b span {
display:block;
font-size:14px;
color:#002318;
font-weight:normal;
margin-top:16px;
}
#circularMenu li.home a:hover b {
left:-22px;
top:200px;
}
#circularMenu li.chat a:hover b {
left:-170px;
top:124px;
}
#circularMenu li.upload a:hover b {
left:63px;
top:64px;
}
#circularMenu li.email a:hover b {
left:-200px;
top:12px;
}
#circularMenu li.address a:hover b {
left:93px;
top:-11px;
}
#circularMenu li.shop a:hover b {
left:-150px;
top:-105px;
}
#circularMenu li.search a:hover b {
left:85px;
top:-85px;
}
#circularMenu li.delivery a:hover b {
left:-30px;
top:-185px;
}
/*button navigation*/
#menuOuter {
margin:0;
list-style:none;
width:190px;
position:absolute;
font-family:Arial, Helvetica, sans-serif;
left: 287px;
top: 15px;
padding: 0;
}
#menuOuter li#menu1 {
}
#menuOuter table {
border-collapse:collapse;
padding:0;
margin:0;
}
#menuOuter li#menu1 a#menuLink {
height:90px;
width:200px;
text-align:left;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
background-image: url(pngs/mainMenu.png);
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
display: block;
}
#menuOuter ul {
position:absolute;
left:190px;
list-style:none;
height: 0px;
overflow: hidden;
top: 1px;
}
#menuOuter li#menu1 a#menuLink:hover {
border:0;
background-image: url(pngs/mainMenu.png);
background-repeat: no-repeat;
z-index: 100;
}
#menuOuter li#menu1:hover > a#menuLink {
}
#menuOuter :hover ul {
position:relative;
list-style:none;
width:650px;
overflow: visible;
top: -75px;
margin: 0px;
padding: 0px;
}
#menuOuter :hover ul ul {
}
#menuOuter :hover ul li a {
display:inline;
color:#002318;
text-align:left;
cursor:pointer;
text-decoration:none;
}
#menuOuter :hover ul :hover {
color: #B8CC05;
}
#menuOuter :hover ul li:hover > a {
background-repeat: no-repeat;
background-position: left bottom;
}
#menuOuter :hover ul li {
float:left;
}
div#background {
}
/* IDs */
#bottomNav {
text-align: right;
padding-right: 0px;
padding-top: 10px;
}
#bottomNav li {
}
#bottomNav a {
padding-left: 30px;
padding-right: 30px;
}
#main {
width:710px;
float: right;
margin-top: 135px;
}
#mainRight {
margin-top: 60px;
padding-right: 5px;
}
#mainHeadings {
margin-top: 0px;
width: 700px;
float: left;
}
#mainWebHeading {
width: 700px;
float: left;
margin: 0px;
padding-bottom: 20px;
}
#mainRight p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
text-align: left;
color: #002318;
}
#main h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
letter-spacing: 1px;
color: #7ea60a;
margin-top: 14px;
margin-bottom: 1px;
}
#mainRight ul {
list-style-type: none;
}
#mainRight li a {
text-decoration: none;
font-size: 14px;
font-weight: normal;
letter-spacing: 1px;
font-family: Arial, Helvetica, sans-serif;
color: #002318;
line-height: 30px;
height: 30px;
display: block;
padding-left: 16px;
}
#mainRight li a:hover {
background-image: url(im/small.png);
background-repeat: no-repeat;
background-position: left center;
color: #77812d;
}
#mainRight h2 {
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin-bottom: 3px;
}
#main img {
float: left;
margin-bottom: 5px;
}
#mainPortfolio {
float:right;
width:600px;
padding-top: 0px;
margin-top: 20px;
}
#mainQuestions {
float: left;
line-height: 17px;
font-weight: normal;
margin-top: 130px;
text-align: right;
font-size: 12px;
width: 290px;
}
#maincredits {
font-size: .9em;
}
#FrogJS {
width: 730px;
margin-top: 20px;
float: right;
text-align: right;
}
#FrogJSCredit {
text-align: center;
font-size: 85%;
color: #002318;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#FrogJSCaption {
text-align: center;
line-height: 140%;
}
#basic-accordian {
z-index:2;
}
.accordion_headings {
padding:5px;
color:#002313;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}
.accordion_headings:hover {
background-color: #ECF1C0;
}
.accordion_child {
border-left-width: thin;
border-left-style: solid;
border-left-color: #ECF1C0;
padding-top: 6px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
line-height: 20px;
}
.header_highlight {
background-color: #EDF2C4;
background-repeat: no-repeat;
}
#footer {
text-align: left;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 10px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#footer a {
text-decoration: none;
}
#footer a:hover {
text-decoration: none;
color: #7ea60a;
}
.fltrt {
float: right;
}
.dateString {
text-align: right;
color: #002318;
padding-top: 10px;
padding-bottom: 10px;
}
/* Various classes */
.credits {
color:#002318;
margin-bottom:0;
}
.credits a {
color:#888;
}
#mainRight p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5em;
font-weight: normal;
text-align: left;
color: #002318;
margin-bottom: 10px;
}
#sideNav {
width: 255px;
margin-top: 290px;
text-align: right;
}
#sideNav h2 {
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
}
#sideNav ul {
list-style-type: none;
}
#sideNav li a {
text-decoration: none;
font-size: 14px;
padding-left: 16px;
font-weight: normal;
display: block;
letter-spacing: 1px;
font-family: Arial, Helvetica, sans-serif;
color: #002318;
text-align: right;
line-height: 35px;
}
#sideNav li a:link {
color: #002318;
}
#sideNav li a.current {
color: #002318;
font-weight: bold;
}
#sideNav li a:hover {
color: #7ea60a;
}
.sideNavHeader {
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
text-align: right;
padding-bottom: 50px;
}
.small {
font-size: 11px;
text-decoration: none;
letter-spacing: 1px;
color: #002318;
}
td {
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
}
#form {
padding-top: 20px;
}
.previousPage {
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
text-align: right;
padding-bottom: 130px;
}
Uploading website on some testserver would be really nice :)
ASKER
Hi, have uploaded the website, it is not finished as yet but I can see on the portfolio pages, the thumbnails are struggling to appear and work as the script that is affected is the loading thumbnails script.
Please click on graphic design from the home page then click graphic design portfolio and this will produce the portfolio script.
Website address: http://www.satoricreative.co.uk
Please click on graphic design from the home page then click graphic design portfolio and this will produce the portfolio script.
Website address: http://www.satoricreative.co.uk
Just delete those:
//<![CDATA[
<!--
and
-->
//]]>
Everything else looks ok for me, i'm a bit confused what effect you talk about - can you make screenshot and notice a problem on it ? Would be nice ;)
//<![CDATA[
<!--
and
-->
//]]>
Everything else looks ok for me, i'm a bit confused what effect you talk about - can you make screenshot and notice a problem on it ? Would be nice ;)
ASKER
Hi wilg32, I have attached a PNG screenshot of the branding portfolio, as you can see on the right the loading thumbnail is having problems bringing in the images. Also I have looked at the website in Internet Explorer 7 for Vista and it is really struggling (its not a very fast processor) and loads in the images very strangely, maybe I need a different way of showing the portfolio or have I got too much javascript on one page. Cheers for your help.
Picture-2.png
Picture-2.png
I really would help you if I would see the problem. In fact I never noticed this "loading" element in any browser (IE6, FF3, chrome, etc...) I saw only small one but on elements that When I clicked - they get bigger. :( In IE6 i saw javascript runtime errors but script working OK so.. uhh ..
ASKER
Ok thanks, I suppose the three pixel text jog problem is not really a problem. Will the runtime errors in IE6 be a problem. I think I must be paranoid just looking for things to go wrong in different browsers!! argh.
Those runtime errors are (I expect) the code that I spoke about before - try to remove it and we see what it does
ASKER
Hi wilq32, I have uploaded the portfolio pages where I have taken off the code you suggested. I am still getting the three pixel text jog comment on that same script (loading thumbnails), will this be a problem.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for your patience and putting my mind to rest.