|
JavaScript - Main Menu Slow - Javascript Issue?
The left-hand (main) menu for my website (www.displaycentre.co.uk) is extremely slow on IE8 on some PCs yet fine on others. No problems with other browsers at all.
I know that the menu is huge but cannot understand why the speed is fine on some (even low spec) PCs and yet it is painfully slow on others. It is slow on all of my work PCs (some with 512Mb RAM others have 2GB!) and also my PC at home (which is brand new this weekend, 2Gb RAM and only Windows XP + all updates loaded so far). Any body out there got any ideas? My developer is simply putting it down to the way in which IE8 copes with such huge menus? Thanks in anticipation. Chris Similar TutorialsHello guys, The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE. Take a look here - the menu is called "Produkter" Thanks in regard I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); So I am trying to create a scrolling device that will allow you to scroll tables left and right. Here is a link: http://thecaligarmo.com/test/work/move.html I have it working and it works pretty well, but I can't seem to get it to speed up. I want to be able to control the amount of time it takes, but I can't seem to make it take less than 10 seconds. The core of the moving js is: Code: var maxMove = 820;// Width of Table + margin on table 2
var duration = 1; // seconds
var mssTime = duration * 1000 / maxMove;
var mssLeft = (moveLeft)?0:(maxMove*-1);
function mssMoveDiv(){
moveDiv();
function moveDiv(){
if(mssLeft > 0 || mssLeft<maxMove*-1){finishMove(); return;};
if(moveLeft){mssLeft -= 1;} else {mssLeft += 1;}
divIn.style.left=mssLeft+'px';
setTimeout(moveDiv,mssTime);
}
function finishMove(){
document.getElementById('pagingTable').parentNode.removeChild(document.getElementById('pagingTable'));
divIn.style.left='0px'
newTable.id='pagingTable';
}
}
(Note that some parts have been left out [such as table generation and stuff] but all details can be found on the site link posted above) If you need more details/js/css/html just go to the link above to look at the whole thing. It was a lot so I didn't want to burden you all with EVERYTHING. Here are the links to the files: HTML: http://thecaligarmo.com/test/work/move.html JS: http://thecaligarmo.com/test/work/paging.js CSS: http://thecaligarmo.com/test/work/paging.css Hi. I am using a mouseover dropdown menu within a rather large table. The script is only 1.6kb so I don't understand why it is going so slow. Mind you this effect is instant in Firefox, Chrome, Safari, Opera. However, in IE 7 it takes about 3-4 seconds. Any advice on how to get this time down in IE 7? Here is a quick sample of the code.
Code: var DDSPEED = 10;
var DDTIMER = 15;
// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}
// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
further reference: http://problemcorrected.com Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="left"><div class="right"></div></div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
//]]>
</script>
<style type="text/css">
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li
{
background-color:Gray;
float:left;
width:120px;
height:40px;
line-height:40px;
border:solid 1px black;
position:relative;
}
#navMenu li a {
z-index:20;
display:block;
height:40px;
position:relative;
color:Black;
}
#navMenu li .left {
background-color:Green;
position:absolute;
width:20px;
height:40px;
top:0px;
z-index:0;
display:none;
}
#navMenu li .right {
background-color:Red;
position:absolute;
width:100px;
height:70px;
top:0px;
z-index:0;
display:none;
}
#navMenu li.selected {
background-color:Blue;
}
</style>
</head>
<body>
<ul id="navMenu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</body>
</html>
I would appreciate any help given! Thanks Hi all, I'm having an issue with a slide out menu and would appreciate some assistance. I feel like its most likely an easy fix which has escaped me over the last couple of days. Basically, I'm using tabbed navigation panes in the center column of a 3-column CSS layout. I'm wanting to place a functional slide out menu in EACH tab. As of now, I have one working perfectly in the intial tab, but I'm unable to achieve the same functionality in the remaining tabs. I can get the content loaded, but it is completely expanded...losing the collapsing/slide out action(s). I have added code for the content to be loaded into the 2nd tab, but have left the rest blank. I figure if the issue for tab 2 is resolved, I can apply it to the rest of the tabs. I am 99% sure the issue resides in the slide-out-menu-new.js file, but I can't seem to figure out where the functionality is being lost. Please assist if you would like. It would be GREATLY appreciated...this is the last hurdle I have before adding real content to the site. Please find the zip file containing all associated code/files by visiting the link below (a quick page posted for storage purposes only). http://www.truckerslifeline.com/siteHelp Thanks! Hi, I'm having troube closing the main Internet Explorer window using a script called from a right click menu. The code I'm using is: Code: <script language="JavaScript"> var oWindow = window.external.menuArguments; oWindow.close(); </script> When the script calls, windows prompts to close the window, but when 'yes' is clicked the Alert sound sounds and the window remains open! If the script is called from a button on the page it will close, but I want to close any page on the internet using a right click! All help will be gratefully received. Dave. Heya guys. My gallery javascript is running very laggy in IE8. Here's an example: www.amex-trading.dk/pizzaovne.php It works fine in chrome, but it's slow when using IE. Any suggestions? hi guys I am looking at this template: http://www.csstemplatesfree.org/prev...ero/index.html I think the sliding at the top happens way too frequently. How can I slow it down? I think it would be better if the slides change once every 6 seconds. I heard that when we put javascript in website, then site takes time to open, is it correct ? If yes then which script is good for website.
Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?
New to Javascript and been reading a lot of tutorials on the various things im trying to do with my website. One thing i cant figure out is my my menu doesnt dropdown as I want to have sublinks. I know this all has to do with my style.css. Here is the code I have, cant figure out where I got this wrong. [CODE] .menu {width:100%; height:67px; background:url(images/tail-menu.gif) 0 0 repeat-x #f00;} .menu li {float:left; font-size:1.333em; line-height:1.5em; text-transform:uppercase;} .menu li a {display:block; padding:21px 27px 22px 27px; color:#818080;} .menu li .active, .menu li a:hover {color:#fffefe; background:#f31301;} .menu .last-item a {padding:21px 32px 22px 27px; } .menu li span {width:100%; height:67px; background:url(images/tail-menu.gif); no-repeat center top;float: left} .menu li span.subhover {background-position: center bottom; cursor: pointer;} .menu li ul.subnav {list-style: none; position: absolute; left:0; top:35px; background:#f31301; margin:0; padding:0; width:170px;float:left; display:none; border: 1px solid #111} .menu li ul.subnav li{margin:0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 100%;} [CODE] Any help is greatly appreciated. Can someone explain to me why my dropdown menu works on all my subpages but not on my home page? Just about done with this site to present to my client and need to get this working asap. PM me and I'll give you the URL. Thanks in advance! Respectfully, Len Hi there, My last 2 little annoyances are related to my Cufon main menu. I could use some assistance. http://www.lyricoperala.org/index3.html Sub-menu items are spaced too far apart. I've tried to set the top padding to 0px, but that doesn't seem to have made a difference. Finally, the last item is a CSS issue, but I'll mention it here just in case you, my code savior, happen to know the answer. I guess it's a z-index thing, but I haven't mastered this yet. My sub-sub-menu items are appearing UNDER the ticket image. I'd prefer that they show up above it, obviously. Thanks so much in advance! Best forum helpers EVER here! ~Laura Hi all I'm a real newbie to Java script, I've literally been teaching myself for about 2 days now, but I've come across a bit of a problem which I'm sure is easy to fix so I was hoping for some pointers. Heres the problem: What I'm trying to do is create a document which allows you to select a size of box from a drop down menu, and then select a size of product to go into the box on a second drop down. The products on the second drop down menu will be allocated based on the box size that you've selected to make sure that you can only choose products which will fit in the box you've selected. In order to do this I've set up a 2D array, which lists each product and which boxes they will fit in using 0 for no and 1 for yes. When you select a box size from the drop down a value appears in a text box next to it (1, 2, 3, or 4) and what I need to do is use the number which appears in this text box to pull data from the array to populate the next drop down list. i.e. If option 2 appears from the first drop down selection then the second drop down should be populated with data from column 2 of array (In this example 1212, 1515, and 2020 would be shown in the second drop down) Im having trouble with the Java script to pull the values from the html text box in order to manipulate the array. If you look at the function 'top_biochill_addOption_list()' you will see that the second drop is populated here from row [itop2][3] of the array, which means the second drop down is permenantly populated as if option 3 had been selected from the first drop down. I need to get the value selected from the first drop down as a variable and replace the '3' in the above statement with that variable to get this to work but I have no idea how to go about that. Hopefully all will become clear when you see the code. As I say, I am very new to Javascript so I'm sure this code is probably messy and inefficient, but with that in mind I'd appreciate replies being in simplified terms so I can understand what you're getting at, or if anything gets re-written then a brief explaination of whats going on would be handy so I can understand what the code is actually doing! Thanks Code:
<html>
<head>
<script type="text/javascript">
var linebreak = "<br />";
//Code to prints out the current product matrix
function print_top_biochill_list(){
var topx=0
var topy=0
for (topi=0;topi<top_biochill.length;topi++)
{
document.write(top_biochill[topx][topy]+" "+top_biochill[topx][topy+1]+" "+top_biochill[topx][topy+2]+" "+top_biochill[topx][topy+3]+" "+top_biochill[topx][topy+4]+"<br />");
var topx=topx+1;}}
//Code to create Drop Down Menu to select top Biochill
function top_biochill_addOption(selectbox,text,value ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);}
//Code to populate Top Biochill Drop Down Menu based on which size EPS is selected
function top_biochill_addOption_list(selectbox){
var itop2=0
for (var itop=0; itop < top_biochill.length;++itop){
if (top_biochill[itop2][3]==1){
top_biochill_addOption(document.top_biochill_drop_list.top_biochill_list, top_biochill[itop][0], top_biochill[itop][0]);
itop2=itop2+1
}}}
function addtop_biochill(){
}
</script>
</head>
<body onLoad="addtop_biochill();top_biochill_addOption_list()";>
<script type="text/javascript">
//Creates an array to describe top biochill
var top_biochill = new Array();
{
//0=Name, 1=EPS10, 2=EPS15, 3=EPS30, 4=EPS45
top_biochill[0] = new Array(1212,1,1,1,1 );
top_biochill[1] = new Array(1515,1,1,1,1 );
top_biochill[2] = new Array(2020,0,1,1,1 );
top_biochill[3] = new Array(3015,0,0,1,1 );
top_biochill[4] = new Array(3020,0,0,0,1 );
top_biochill[5] = new Array(3040,0,0,0,1 );
}
//Runs the prints the matrix code
print_top_biochill_list();
</script>
<!--Select EPS Size Drop Down Menu-->
<form name="box_size" onsubmit="CheckForm()">
<select name="box_size_jump_menu" onchange="document.box_size.EPSshowvalue.value=this.value">
<option value=0>Please select a Box Size</option>
<option value=1>EPS 10</option>
<option value=2>EPS 15</option>
<option value=3>EPS 30</option>
<option value=4>EPS 45</option>
</select>
<input type="number" name="EPSshowvalue">
<script type="text/javascript">
top_biochill_addOption_list();
</script>
</form>
<!--Select Top Biochill Drop Down Menu-->
<FORM name="top_biochill_drop_list" onsubmit="CheckForm()">
<SELECT NAME="top_biochill_list" onchange="document.top_biochill_drop_list.top_biochill_showvalue.value=this.value">
<Option value="" >Select Biochill</option>
</SELECT>
<input type="text" name="top_biochill_showvalue"><br>
</form>
</body>
</html>
Hello all! I hope everyone had a great Holiday I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? Good Morning Everyone, My first post here so hope i get the format right The problem I have a menu on a new website im developing. The menu is going to be within a PHP include file. I need a way of (using JS) the current page having its menu item with a different image to the others e.g. a "selected" image. The code im experimenting with, and which may shed a bit more light on what im trying to achieve is as follows: Code: var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if (filename = 'about.php')
{
$('#about').attr('src', 'images/Nav/about_selected.png')
}
else
{
$('#about').attr('src', 'images/Nav/about_over.png')
}
I am using jQuery for this project thus the jQuery code being thrown in there. The logic of the code iv made is, IF the page is 'About' then the 'About' menu button should display 'about_selected.png'. I hope this makes sense and a solution would be much appreciated. Thanks! Hello I have several issues with my multilevel drop down menu The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does This clearly means that the menu is not coming out of the iframe Please help me bring it on top of everything of the page Note: i have placed the menu in one iframe and a page opens below it in another iframe. The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should be there and hence he/she can edit it And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they see the page their way. For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100 go to tweetup.com Please help me, it will be really appreciable. Thank you very much in advance! I'm trying to slow this image rotator down. I thought I would just change the setInterval part. But it's not working. Quote: $(function() { setInterval( "nextPage()", 7000 ); }); Below is the full script. Am I missing something? Code: // Global variable that controls billboard image rotation
var $rotate = 1;
// Load this script when page loads
$(document).ready(function(){
// Set up a listener so that when anything with a class of 'bbtab'
// is clicked, this function is run.
$('.bbtab').click(function () {
// Turn off autorotation.
$rotate = 0;
// Remove the 'bboard_page_active' class from the visible tab contents.
$('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the associated tab contents.
$(this.rel).addClass('bboard_page_active');
return false; //stop the links default action
});
});
function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
// Remove the 'bboard_page_active' class from the active page.
$('#'+$active_page).removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the next page.
$('#bbpage'+$next_page).addClass('bboard_page_active');
// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}
$(function() {
setInterval( "nextPage()", 7000 );
});
Hi All, I am using a script that hides / shows a cell row depending on whether a form checkbox has been ticked. The HTML, CSS and JS code is below: CSS & HTML (simplified and normally in head / body tags etc.): Code: #lastRow { display: none;}
<table>
<tr>
<td>Events Xtra:</td>
<td><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"></em></td>
</tr>
<tr id="lastRow">
<td>Xtra Description:</td>
<td><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td>
</tr>
</table>
JS: Code: function showHideRow(obj){
oLastRow.style.display = (obj.checked)? 'block' : 'none';
}
window.onload=function(){
var oChkBox = document.getElementById('upcoming');
oLastRow = document.getElementById('lastRow');
oChkBox.onclick=function(){showHideRow(this);}
showHideRow(oChkBox);
}
Now, the above works absolutely perfectly in Internet Explorer - when the checkbox is ticked, it displays the bottom row exactly as I want it to - i.e. as the next row in the table. However, in Chrome, Safari and Firefox it seems to display the whole row as a cell on it's own so distorting the entire table structure. I suspect it is something to do with the use of the id="lastRow", but I am not sure. The strange thing is that the HTML source is of course the same for both. Can anyone shed any light here? For convenience I have uploaded two images: IE (working fine): Firefox (distorting across page) Regards, Neil |
|||||||