PDA

Click to See Complete Forum and Search --> : IE and Firefox Problems

Slickwilly9
04-24-2005, 06:40 PM
For some reason I cannot get my templates to look the same in IE as it does in Firefox.

<html>

<meta>
</meta>

<script language="javascript" type="text/javascript">
<!--
{
img1on = new Image();
img1on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-actglow.jpg";

img1off = new Image();
img1off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-actlink.jpg";

img2on = new Image();
img2on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-parklayglow.jpg";

img2off = new Image();
img2off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-parklaylink.jpg";

img3on = new Image();
img3on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-resglow.jpg";

img3off = new Image();
img3off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-reslink.jpg";

img4on = new Image();
img4on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-locintglow.jpg";

img4off = new Image();
img4off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-locintlink.jpg";

img5on = new Image();
img5on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-ratesglow.jpg";

img5off = new Image();
img5off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-rateslink.jpg";

img6on = new Image();
img6on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-directglow.jpg";

img6off = new Image();
img6off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-directlink.jpg";

img7on = new Image();
img7on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-contactglow.jpg";

img7off = new Image();
img7off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-contactlink.jpg";

img8on = new Image();
img8on.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-homeglow.jpg";

img8off = new Image();
img8off.src = "http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-homelink.jpg";
}
// Function to 'activate' images.


function imgOn(imgName) {


if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
// Function to 'deactivate' images.


function imgOff(imgName) {


if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</script>


<style type="text/css">

body
{
text-align: center;
background-image:url('http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rcbkgrnd.jpg');
}
#wrap {
width:766px;
position:relative;
margin:auto;
}
ul, li {
list-style:none;
margin:0;
padding:0;
}
#navlist {
height:30px;
}
img {
display:block;
border:0;
}
#navlist li {
float:right;
}


</style>

</head>

<body>

<body>
<div id="wrap">
<div id="header">
<img style="float:left" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-interiorleft.jpg">
<img style="float:right" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-head.jpg">
</div>


<ul id="navlist">
<li><A href="facilities.htm" onmouseover="imgOn('img8')"onmouseout="imgOff('img8')"><img class="border" alt="Contact Us" name="img8" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-homelink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img7')"onmouseout="imgOff('img7')"><img class="border" alt="Directions" name="img7" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-contactlink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img6')"onmouseout="imgOff('img6')"><img class="border" alt="Local Interests" name="img6" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-directlink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img5')"onmouseout="imgOff('img5')"><img class="border" alt="Reservations" name="img5" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-rateslink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img4')"onmouseout="imgOff('img4')"><img class="border" alt="Park Layout" name="img4" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-locintlink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img3')"onmouseout="imgOff('img3')"><img class="border" alt="Park Layout" name="img3" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-reslink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img2')"onmouseout="imgOff('img2')"><img class="border" alt="Park Layout" name="img2" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-parklaylink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img1')"onmouseout="imgOff('img1')"><img class="border" alt="facilities" name="img1" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-actlink.jpg"></A></li>


</ul>


</div>


</html>
grailquester5
04-24-2005, 10:17 PM
Put shortly, the reason is that IE and FireFox use different engines to render the code - so the display ends up different depending on what sorts of defaults each engine is set to render.

At first glance, I noticed you didn't set a lot of margin, border and padding values manually. If you leave it up to the browser to render the defaults, the defaults are what you'll get (for example, IE might use a default 1px margin, FireFox might not - depending on if it is an img, p, ul element, etc.).

For more specifics, you'll need to identify what specifically isn't appearing the way you want it to or what difference you're seeing, and a URL would also help.
Fang
04-25-2005, 11:15 AM
Use a valid DTD (http://www.w3.org/QA/2002/04/valid-dtd-list.html)