IE and Firefox Problems

Slickwilly9 · #1 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 Code:

<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 · #2 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** · #3 04-25-2005, 11:15 AM

Use a valid DTD

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)