# width=aprox. 300% on ie? wats going on?



## SLG (Feb 23, 2005)

hi,
I know a bit of html but I just get swamped in the amount i will show u in a sec.
Ive set all the cell widths so that they add to 100%, that table is in another frame thats 95% width, 

it works fine with firefox, however with ie. it shows up as aprox. width 300% (eg. theres a scroll)

well, heres the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a_)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; 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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('../UltimateSC_used2/home2.jpg','../UltimateSC_used2/General2.jpg','../UltimateSC_used2/Protoss2.jpg','../UltimateSC_used2/Terran2.jpg','../UltimateSC_used2/Zerg2.jpg','../UltimateSC_used2/Links2.jpg')">
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="../UltimateSC_used2/Horizontal_rule.gif" width="100%" height="16" ></td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr> 
<td height="69" colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> 
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
<td width="14%" height="50"><a href="Home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home_logo1','','../UltimateSC_used2/home2.jpg',1)"><img src="../UltimateSC_used2/Home.jpg" alt="Home" name="Home_logo1" width="100%" height="50" border="0" id="Home_logo1"></a></td>
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
<td width="14%" height="50"><a href="General.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('General1','','../UltimateSC_used2/General2.jpg',1)"><img src="../UltimateSC_used2/General.jpg" alt="General" name="General1" width="100%" height="50" border="0" id="General1"></a></td>
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
<td width="14%" height="50"><a href="Protoss.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Protoss_logo1','','../UltimateSC_used2/Protoss2.jpg',1)"><img src="../UltimateSC_used2/Protoss.jpg" alt="Protoss" name="Protoss_logo1" width="100%" height="50" border="0" id="Protoss_logo1"></a></td>
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
<td width="14%" height="50"><a href="Terran.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Terran1','','../UltimateSC_used2/Terran2.jpg',1)"><img src="../UltimateSC_used2/Terran.jpg" alt="Terran" name="Terran1" width="100%" height="50" border="0" id="Terran1"></a></td>
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
<td width="14%" height="50"><a href="Zerg.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Zerg_logo1','','../UltimateSC_used2/Zerg2.jpg',1)"><img src="../UltimateSC_used2/Zerg.jpg" alt="Zerg" name="Zerg_logo1" width="100%" height="50" border="0" id="Zerg_logo1"></a></td>
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
<td width="14%" height="50"><a href="Links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links_logo1','','../UltimateSC_used2/Links2.jpg',1)"><img src="../UltimateSC_used2/Links.jpg" alt="Links" name="Links_logo1" width="100%" height="50" border="0" id="Links_logo1"></a></td>
<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
</tr>
<tr> 
<td colspan="100%"><img src="../UltimateSC_used2/Horizontal_rule.gif" width="100%" height="16"></td>
</tr>
</table></td>
</tr>
<tr> 
<td width="18%"> </td>
<td width="64%"> </td>
<td width="18%"> </td>
</tr>
<tr> 
<td width="18%"> </td>
<td width="64%"> </td>
<td width="18%"> </td>
</tr>
<tr> 
<td width="18%"> </td>
<td colspan="2" rowspan="7" width="82%"> </td>
</tr>
<tr> 
<td> </td>
</tr>
<tr> 
<td></td>
</tr>
<tr> 
<td></td>
</tr>
<tr> 
<td></td>
</tr>
<tr> 
<td> </td>
</tr>
<tr> 
<td> </td>
</tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> 
<td width="100%"> </td>
</tr>
</table>
</body>
</html>

whew.. well i used dreamweaverMX

any help would be greatly apreciated_


----------



## NoReason (Nov 15, 2004)

might sound kinda stupid, but what are the sizes of the images?
it shows up fine for me...except I don't have the images. The tables are accurate on my ie browser.


----------



## SLG (Feb 23, 2005)

i thought they would mold themselves to the table?
wont they :sad:


----------



## NoReason (Nov 15, 2004)

not necessarily, no. Try resizing the images.


----------



## SLG (Feb 23, 2005)

well i was hoping for them to full the cell on any browser size,
if i change the size, i wont be able to do that any more will i?


----------



## Aeuzent (Sep 4, 2004)

I have another suggestion here


Why not make that entire mess one image then do a map to sort out all the different links.

You'd garuntee that everything would be the same size everywhere you go


----------



## NoReason (Nov 15, 2004)

when using %'s, things like the horizontal_rule.gif should stretch to fit the table.


----------



## SLG (Feb 23, 2005)

yea thats exactly what I wanted it 2 do, 100% of 17%(i think its 17)-17 is the table width,
ill try making it all one image with the link, thx for that, dont know how good i am at mapping though..

but thx anyway :smile:


----------



## Aeuzent (Sep 4, 2004)

post up here if you need help with it


----------



## chris59595 (Mar 9, 2005)

in order to make the images stretch all the way across on all browsers and resolutions you need to specify the width for the images with the links, and the ones in between should fill the rest in with % if you splice the images in the wrong places it wont stretch right making it wider than what it should be


----------



## SLG (Feb 23, 2005)

umm if i make the image one and then map it,
can i still use the roll over buttons aswell?


----------



## Aeuzent (Sep 4, 2004)

hmmmm

Not to any form of satisfaction. You could say have a different roll over image for each link but considering the size there's almost no point to it.


----------



## SLG (Feb 23, 2005)

ok... well a few instances have lead me to believe that it is the rollover image that is making the buttons bigger,
do I have to (and if so, how) do I choose/change the size of the 2nd(the second, rollover) button,

I dont know if this is correct or not, it is just a guess,
any ideas?

btw thx for the help so far


----------



## Bobrocks (Nov 7, 2004)

hi, is there any chance you can zip up and attach the images so we can get a visual idea of what it acually happening.


----------



## SLG (Feb 23, 2005)

yea ok, I left out the title as it takes up alot of space and not applicable, if u need it.. reply

its called stuff, jus done all my virus scans so shud b clean


----------



## NoReason (Nov 15, 2004)

the problem is your images:
general, general2, home, home2, links, links2, protoss, protoss2, terran, terran2, zerg, zerg2.
resize these proportionately to the height of 50px. --worked good on mine. The widths were different, so it will be slightly noticeable, if your looking hard.


----------



## SLG (Feb 23, 2005)

im not sure what you mean,
the pixel width and height are the same and document height/width as well as resolution,
do you mean the different ones eg. grouping home with home2 against general and general2?


----------



## NoReason (Nov 15, 2004)

Yes, your images general, and general2, are different widths than home, and home2. And because in your coding you're using 100%, you'll see a very slight difference between home and general. Nothing to worry about though. Noone will notice it unless they are scrutinizing the page.


----------



## SLG (Feb 23, 2005)

well does it show up wrong(huge scroll) on your ie browser guys?


----------



## NoReason (Nov 15, 2004)

yes, it did show up that big. Then I resized the images listed above and it came out nice.


----------



## Bobrocks (Nov 7, 2004)

Sorry I forgot about this thread.

Scottcamp has hit the nail on his head in his reply.

You needed to resize all the images to a height of 50px, this should be done anyway to decrease the image size.

I've attached your images resized to this reply, rar'd because I dont own winzip.

Also in your code you are showing the top image out side of the main table, this causes it to use different rules for resizing. I have moved it inside for you and added a comment. Remove the comment once you have read it. Code works fine in IE now. The menu looks nice, but in 1600x1200 it does look a bit stetched.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" 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('../UltimateSC_used2/home2.jpg','../UltimateSC_used2/General2.jpg','../UltimateSC_used2/Protoss2.jpg','../UltimateSC_used2/Terran2.jpg','../UltimateSC_used2/Zerg2.jpg','../UltimateSC_used2/Links2.jpg')">
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
	<!-- I moved your top line into the main table for the site, this is so when the page gets smaller than the cumulative size of your images your top border does not continue to shrink -->
	<tr>
		<td colspan="100%"><img src="../UltimateSC_used2/Horizontal_rule.gif" width="100%" height="16" ></td>
	</tr>
	<tr> 
		<td height="69" colspan="3">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr> 
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
				<td width="14%" height="50"><a href="Home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home_logo1','','../UltimateSC_used2/home2.jpg',1)"><img src="../UltimateSC_used2/Home.jpg" alt="Home" name="Home_logo1" width="100%" height="50" border="0" id="Home_logo1"></a></td>
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
				<td width="14%" height="50"><a href="General.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('General1','','../UltimateSC_used2/General2.jpg',1)"><img src="../UltimateSC_used2/General.jpg" alt="General" name="General1" width="100%" height="50" border="0" id="General1"></a></td>
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
				<td width="14%" height="50"><a href="Protoss.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Protoss_logo1','','../UltimateSC_used2/Protoss2.jpg',1)"><img src="../UltimateSC_used2/Protoss.jpg" alt="Protoss" name="Protoss_logo1" width="100%" height="50" border="0" id="Protoss_logo1"></a></td>
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
				<td width="14%" height="50"><a href="Terran.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Terran1','','../UltimateSC_used2/Terran2.jpg',1)"><img src="../UltimateSC_used2/Terran.jpg" alt="Terran" name="Terran1" width="100%" height="50" border="0" id="Terran1"></a></td>
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
				<td width="14%" height="50"><a href="Zerg.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Zerg_logo1','','../UltimateSC_used2/Zerg2.jpg',1)"><img src="../UltimateSC_used2/Zerg.jpg" alt="Zerg" name="Zerg_logo1" width="100%" height="50" border="0" id="Zerg_logo1"></a></td>
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
				<td width="14%" height="50"><a href="Links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links_logo1','','../UltimateSC_used2/Links2.jpg',1)"><img src="../UltimateSC_used2/Links.jpg" alt="Links" name="Links_logo1" width="100%" height="50" border="0" id="Links_logo1"></a></td>
				<td width="2%" height="50"><img src="../UltimateSC_used2/Verticle_rule.GIF" width="100%" height="50"></td>
			</tr>
			<tr> 
				<td colspan="100%"><img src="../UltimateSC_used2/Horizontal_rule.gif" width="100%" height="16"></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr> 
		<td width="18%"> </td>
		<td width="64%"> </td>
		<td width="18%"> </td>
	</tr>
	<tr> 
		<td width="18%"> </td>
		<td width="64%"> </td>
		<td width="18%"> </td>
	</tr>
	<tr> 
		<td width="18%"> </td>
		<td colspan="2" rowspan="7" width="82%"> </td>
	</tr>
	<tr> 
		<td> </td>
	</tr>
	<tr> 
		<td></td>
	</tr>
	<tr> 
		<td></td>
	</tr>
	<tr> 
		<td></td>
	</tr>
	<tr> 
		<td> </td>
	</tr>
	<tr> 
		<td> </td>
	</tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr> 
		<td width="100%"> </td>
	</tr>
</table>
</body>
</html>
```


----------



## SLG (Feb 23, 2005)

wow thx ill ceck this out :grin:


----------



## SLG (Feb 23, 2005)

ahh man, you dont know how much of a savior you are!
Thx X50

cheers guys, you really helped me out, Im sorry and gratefull for taking up your time

Finnally Problem solved

:grin: :smile: :grin: :smile: :grin: :smile: :grin:


----------

