...

View Full Version : Image percent query- (Safari vs. Firefox)



Industries
02-23-2009, 02:50 AM
So I recognize the misgivings about using percent as opposed to pixels but for this particular rollover image I would like it to be slightly smaller than the screen size. I thought I would employ the percent tag in my text. This seems to work quite nicely in Safari but not at all in Firefox. Could anyone tell me if this is user error or just something I'll have to accept as differences in the software. Thanks guys!

website is http://www.schechter-industries.com

[what i assume to be the relevant] source is....




<body onload="MM_preloadImages('images/misc/intro2.png')">
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="52%"></td>
<td width="1%">&nbsp;</td>
<td width="47%" ><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/misc/intro2.png',1)"><img src="images/misc/intro1.png" name="Image2" width="*" height="85%" border="0" align="right" id="Image2" /></a></td>
</tr>
<tr>

</tr>
</table>
</body>

</html>

Excavator
02-23-2009, 02:59 AM
Hello Industries,
FF3 at least shows an image here, hover over it and some red text shows up.
IE8 and IE7 show nothing.

Industries
02-23-2009, 03:05 AM
Looking at your links I see the "why tables are bad" info. Could my problem be the table?
Thanks for your help!

Excavator
02-23-2009, 03:26 AM
Looking at your links I see the "why tables are bad" info. Could my problem be the table?
Thanks for your help!

It very well could be. There is no need for a table there, that's for sure

Excavator
02-23-2009, 03:41 AM
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#rollover {
width: 480px;
height: 782px;
margin: 20px;
}
#rollover a:link, #rollover a:visited, #rollover a:active {
width: 480px;
height: 782px;
display: block;
background: url(http://www.schechter-industries.com/images/misc/intro1.png) no-repeat;
}
#rollover a:hover {
background: url(http://www.schechter-industries.com/images/misc/intro2.png) no-repeat;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rollover">
<a href="">link</a>
<!--end rollover--></div>
<!--end wrap--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum