Forum Moderators: not2easy
I have these divs positioned in a menu, in IE the divs always display spot on in the middle of the container. In firefox they display 10 pixels to the right (slightly out of the 640px table they are in). But SOMETIMES (argh!) they display correctly after a certain refresh or someting, they don't even consistently screw up, it's really frustrating.
So the page displays differently in the SAME BROWSER window sometimes, like when I resize the window it dsplays correctly, but ONLY SOMETIMES!?
This is how the divs look, they are all in a 640px table column, and theres about 6 of them in an include file (BUT when they aren't in the include file THEY DISPLAY CORRECTLY, even thought the code is IDENTICLE, like copied and pasted to the include file). They are offset 100 pixels so they display under a menu, but that doesn't affect the problem.
Thanks
-Jake
Is it ok to post heaps of code? if so...
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website - Assignment 1</title>
<link rel="stylesheet" href="includes/layout.css" type="text/css">
<script language="javascript" src="includes/menu.js"></script>
</head>
<body onload="hide();">
<center>
<!-- From here down to the next comment is the bit that stuffs up, but only if it's in a seperate included file! -->
<table cellpadding="0" border="0" cellspacing="0">
<tr>
<td class="leftshadow"></td>
<td width="640">
<center>
<div id="Info1" style="position: absolute; width:640px; height:34px; z-index:1; top: 100px; background: url('images/topback.png'); border-style: none; color:rgb(64,112,165); text-align:right;">About the website...</div>
<div id="Info2" style="position: absolute; width:640px; height:34px; z-index:1; top: 100px; background: url('images/topback.png'); border-style: none; color:rgb(64,112,165); text-align:right;">About the website...</div>
<div id="Info3" style="position: absolute; width:640px; height:34px; z-index:1; top: 100px; background: url('images/topback.png'); border-style: none; color:rgb(64,112,165); text-align:right;">About the website...</div>
<div id="Info4" style="position: absolute; width:640px; height:34px; z-index:1; top: 100px; background: url('images/topback.png'); border-style: none; color:rgb(64,112,165); text-align:right;">About the website...</div>
<div id="Info5" style="position: absolute; width:640px; height:34px; z-index:1; top: 100px; background: url('images/topback.png'); border-style: none; color:rgb(64,112,165); text-align:right;">About the website...</div>
</center>
<div id="header">
<img src="images/banner.jpg" alt="Website" />
</div>
<div id="navigation">
<img src="images/menu.jpg" width="200" height="20" name="menu" border="0"
><a href="index.shtml" onmouseover="menu1.src='images/bAboutOver.jpg';visible('1');" onmouseout="menu1.src='images/bAbout.jpg';hide();" style="border-bottom: none;"><img name="menu1" src="images/bAbout.jpg" width="80"height="20" border="0"
/></a><a href="index.shtml" onmouseover="menu1.src='images/bAboutOver.jpg';visible('1');" onmouseout="menu1.src='images/bAbout.jpg';hide();" style="border-bottom: none;"><img name="menu1" src="images/bAbout.jpg" width="80"height="20" border="0"
/></a><a href="index.shtml" onmouseover="menu1.src='images/bAboutOver.jpg';visible('1');" onmouseout="menu1.src='images/bAbout.jpg';hide();" style="border-bottom: none;"><img name="menu1" src="images/bAbout.jpg" width="80"height="20" border="0"
/></a><a href="index.shtml" onmouseover="menu1.src='images/bAboutOver.jpg';visible('1');" onmouseout="menu1.src='images/bAbout.jpg';hide();" style="border-bottom: none;"><img name="menu1" src="images/bAbout.jpg" width="80"height="20" border="0"
/></a><a href="index.shtml" onmouseover="menu1.src='images/bAboutOver.jpg';visible('1');" onmouseout="menu1.src='images/bAbout.jpg';hide();" style="border-bottom: none;"><img name="menu1" src="images/bAbout.jpg" width="80"height="20" border="0"
/></a>
</div>
<!-- END INCLUDE FILE -->
<div id="main">
<h1>> ABOUT THIS WEBSITE</h1>
<div id="block">
<div id="date">How the Wesite was Made</div>
</div>
</td>
<td class="rightshadow"></td>
</tr>
</table>
</center>
</body>
</html>
Browsers cannot tell if code came from an include or was native to the document -- because includes happen on the server, before the page gets sent.
If you never see the rendering problem from a "flat" file, then something about the code that is delivered with an include must not be identical. I would take another look at the two html documents -- either something IS different, or both of them are creating the problem.
