www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Intranet working in IE but not Firefox?

  1. #1
    Join Date
    Feb 2009
    Posts
    17

    resolved [RESOLVED] Intranet working in IE but not Firefox?

    Hey,
    I'm creating an Intranet site for the school I'm working at. So far I've been making changes based on how it appears in IE. Today I finished tackling some frustrating Javascript, and was enthusiastically telling a collegue about how pleased I was with it. I was, however, quite disappointed to find that one of <div> elements I had created was mysteriously out of place when viewed in Firefox.

    The code for this <div> is as follows:

    Code:
    <div id="content">
    
    	<div class="ssLinks1">
    
    		<b>Charities</b>
    
    		<br /><br />
    
    		The Tses School in Namibia <br />
    		and Joyce's International <br />
    		Nursery School in The Gambia <br />
    		are just two of the causes <br />
    		for which the LGS Charity <br /> 
    		Commitee raises money.
    
    		<br /><br />
    
    		<a class="bluLink" href="...">> Click Here For Information</a> <br />
    		<a class="bluLink" href="...">> Other Charity Work</a>
    
    	</div>
    
    	<div class="ssLinks2">
    
    		<img class="contentPic" src="images/queen.png" alt="The Queen" />
    
    		<b>Royal Visit</b>
    
    		<br /><br />
    
    		- 4th December 2008
    
    		<br /><br />
    
    		Attended by: <br />
    		The Queen & <br />
    		HRH Prince Philip
    
    		<br /><br /><br />
    
    		<a class="bluLink" href="http://www.leicestergrammar.org.uk/lgs.asp?s=rv&pg=intro">
    		> More Information</a> <br />
    
    		<a class="bluLink" href="http://www.leicestergrammar.org.uk/lgs.asp?s=rv&pg=gallery">
    		> View the Photos</a>
    
    	</div>
    
    </div>
    The CSS I've created is in a seperate file called 'master.css'. The code relating to these particular <divs> is:

    Code:
    #content
    {
    	background-color: white;
    	position: absolute;
    	left: 500px;
    	top: 435;
    	height: 194px;
    	width: 525px;
    }
    
    .ssLinks1
    {
    	position: absolute;
    	left: 25px;
    	top: 21px;
    }
    
    .ssLinks2
    {
    	position: absolute;
    	left: 290px;
    	top: 21px;
    	width: 220px;
    }
    The <div> in question is supposed to sit at the bottom of the page (as it does in IE), however in Firefox, for some reason it sits only a few pixels from the top (though it still sits in the same horizontal position). All the other <div>s I've created look correct in both browsers.

    Any ideas people?

    Cheers,
    Nic.

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Usually an intranet uses just the one web browser and so you'd just test in that one.

    When testing in multiple browsers you should always leave IE to last as it is the one most likelyt to need corrections from the standards.

    Do you have a valid and complete doctype as the first statement in the page so as to get IE to at least try to apply the standards?
    Stephen

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You will have to give the full html and css.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Feb 2009
    Posts
    17
    Hey, of course, the full HTML code is (<div> highlighted):

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    	<head>
    
    		<link rel=StyleSheet href="master.css" type="text/css" />
    
    		<title>LGS / LGJS - Intranet - Home</title>
    
    		<script language="javascript">
    
    			function background() {
    
    				var colour = new Array(12);
    
    				colour[0] = "url('images/themes/background01.png')";
    
    				colour[1] = "url('images/themes/background02.png')";
    
    				colour[2] = "url('images/themes/background03.png')";
    
    				colour[3] = "url('images/themes/background04.png')";
    
    				colour[4] = "url('images/themes/background05.png')";
    
    				colour[5] = "url('images/themes/background06.png')";
    
    				colour[6] = "url('images/themes/background07.png')";
    
    				colour[7] = "url('images/themes/background08.png')";
    
    				colour[8] = "url('images/themes/background09.png')";
    
    				colour[9] = "url('images/themes/background10.png')";
    
    				colour[10] = "url('images/themes/background11.png')";
    
    				colour[11] = "url('images/themes/background12.png')";
    
    				var today = new Date();
    
    				var index = today.getMonth();
    
    				document.body.style.backgroundImage = colour[index];
    
    			}
    
    			function sideBack() {
    
    				var colourS = new Array(12);
    
    				colourS[0] = "url('images/themes/sideBarBack01.png')";
    
    				colourS[1] = "url('images/themes/sideBarBack02.png')";
    
    				colourS[2] = "url('images/themes/sideBarBack03.png')";
    
    				colourS[3] = "url('images/themes/sideBarBack04.png')";
    
    				colourS[4] = "url('images/themes/sideBarBack05.png')";
    
    				colourS[5] = "url('images/themes/sideBarBack06.png')";
    
    				colourS[6] = "url('images/themes/sideBarBack07.png')";
    
    				colourS[7] = "url('images/themes/sideBarBack08.png')";
    
    				colourS[8] = "url('images/themes/sideBarBack09.png')";
    
    				colourS[9] = "url('images/themes/sideBarBack10.png')";
    
    				colourS[10] = "url('images/themes/sideBarBack11.png')";
    
    				colourS[11] = "url('images/themes/sideBarBack12.png')";
    
    				var todayS = new Date();
    
    				var indexS = todayS.getMonth();
    
    				document.getElementById('sideBar').style.backgroundImage = colourS[indexS];
    
    			}
    
    			function newsBack() {
    
    				var colourN = new Array(12);
    
    				colourN[0] = "url('images/themes/newsBack01.png')";
    
    				colourN[1] = "url('images/themes/newsBack02.png')";
    
    				colourN[2] = "url('images/themes/newsBack03.png')";
    
    				colourN[3] = "url('images/themes/newsBack04.png')";
    
    				colourN[4] = "url('images/themes/newsBack05.png')";
    
    				colourN[5] = "url('images/themes/newsBack06.png')";
    
    				colourN[6] = "url('images/themes/newsBack07.png')";
    
    				colourN[7] = "url('images/themes/newsBack08.png')";
    
    				colourN[8] = "url('images/themes/newsBack09.png')";
    
    				colourN[9] = "url('images/themes/newsBack10.png')";
    
    				colourN[10] = "url('images/themes/newsBack11.png')";
    
    				colourN[11] = "url('images/themes/newsBack12.png')";
    
    				var todayN = new Date();
    
    				var indexN = todayN.getMonth();
    
    				document.getElementById('news').style.backgroundImage = colourN[indexN];
    
    			}
    
    		</script>
    
    	</head>
    
    	<body onload="background(); sideBack(); newsBack()">
    
    		<div class="sLinks">
    
    			Welcome  &nbsp; || &nbsp;  Intranet > Main
    
    			<br /><br /><br /><br /><br />
    
    			<a href="...">Main</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    			<a href="...">Students</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    			<a href="...">Staff</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    			<a href="...">Subjects</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    			<a href="...">LGS Common Drive</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    			<a href="...">LGJS Common Drive</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    			<a href="http://eserver/exchange/">Email</a>
    
    		</div>
    
    		<div class="banner">
    
    			<script language="JavaScript" type="text/javascript">
    
    				var banner = new Array();
    
    				banner[0] = "<img src='images/banners/bannerBacks.png' alt='Banners' />";
    
    				banner[1] = "<img src='images/banners/bannerRugby1.png' alt='Banners' />";
    
    				banner[2] = "<img src='images/banners/bannerChoir.png' alt='Banners' />";
    
    				banner[3] = "<img src='images/banners/bannerSchool.png' alt='Banners' />";
    
    				var currentB = Math.floor(Math.random() * banner.length);
    
    				document.write(banner[currentB]);
    
    			</script>
    
    			<div id="sideBar">
    
    				<div class="favLinks">
    
    					<b>Resources</b> <br />
    
    					<img src="images/break.png" alt="Break" /> <br />
    
    					<a href="http://www.google.com/">> Google</a> <br />
    
    					<img src="images/break.png" alt="Break" /> <br />
    
    					<a href="http://en.wikipedia.org/wiki/Main_Page">> Wikipedia</a> <br />
    
    					<img src="images/break.png" alt="Break" /> <br />
    
    					<a href="http://www.bbc.co.uk">> BBC.co.uk</a> <br />
    
    					<img src="images/break.png" alt="Break" /> <br />
    
    					<a class="bluLink" href="...">> Student Resource Area</a>
    
    				</div>
    
    				<div class="senior">
    
    					<script language="JavaScript" type="text/javascript">
    
    						var banner = new Array();
    
    						banner[0] = "<img src='images/cKing1.png' alt='Chris King' />";
    
    						banner[1] = "<img src='images/cKing2.png' alt='Chris King' />";
    
    						banner[2] = "<img src='images/cKing3.png' alt='Chris King' />";
    
    						banner[3] = "<img src='images/cKing4.png' alt='Chris King' />";
    
    						var currentB = Math.floor(Math.random() * banner.length);
    
    						document.write(banner[currentB]);
    
    					</script>
    
    					Leicester Grammar <br /> 
    					School <br /><br />
    
    					<span class="greyTxt">
    					
    						Head: C.King <br /><br />
    
    					</span>
    
    					<a class="bluLink" href="http://www.leicestergrammar.org.uk/">
    					> Visit the Website</a>
    
    				</div>
    
    				<div class="junior">
    
    					<script language="JavaScript" type="text/javascript">
    
    						var banner = new Array();
    
    						banner[0] = "<img src='images/mRedfearn1.png' alt='Margaret Redfearn' />";
    
    						banner[1] = "<img src='images/mRedfearn2.png' alt='Margaret Redfearn' />";
    
    						banner[2] = "<img src='images/mRedfearn3.png' alt='Margaret Redfearn' />";
    
    						banner[3] = "<img src='images/mRedfearn4.png' alt='Margaret Redfearn' />";
    
    						var currentB = Math.floor(Math.random() * banner.length);
    
    						document.write(banner[currentB]);
    
    					</script>
    
    					Leicester Grammar <br /> 
    					Junior School <br /><br />
    					
    					<span class="greyTxt">
    
    						Head: M.Redfearn <br /><br />
    
    					</span>
    
    					<a class="bluLink" href="http://www.leicestergrammar.org.uk/home.asp?m=junior">
    					> Visit the Website</a>
    
    				</div>
    					
    
    			</div>				
    
    		</div>
    
    		<div id="news">
    
    			<div class="newsTxt">
    
    				<b>News</b>
    
    				<br /><br />
    
    				- 09 Feb 09 - Alex Schlindwein gets bronze<br />
    
    				- 31 Jan 09 - BPhO Success For LGS Physicists <br />
    
    				- 26 Jan 09 - Oxbridge News <br />
    
    				- 23 Jan 09 - Music News <br />
    
    				- 09 Dec 08 - Music News
    
    				<br /><br />
    
    				<a class="bluLink" href="http://www.leicestergrammar.org.uk/news.asp?nType=general">
    				> View More News</a>
    
    			</div>
    
    		</div>
    
    		<div id="content">
    
    			<div class="ssLinks1">
    
    				<b>Charities</b>
    
    				<br /><br />
    
    				The Tses School in Namibia <br />
    				and Joyce's International <br />
    				Nursery School in The Gambia <br />
    				are just two of the causes <br />
    				for which the LGS Charity <br /> 
    				Commitee raises money.
    
    				<br /><br />
    
    				<a class="bluLink" href="...">> Click Here For Information</a> <br />
    				<a class="bluLink" href="...">> Other Charity Work</a>
    
    			</div>
    
    			<div class="ssLinks2">
    
    				<img class="contentPic" src="images/queen.png" alt="The Queen" />
    
    				<b>Royal Visit</b>
    
    				<br /><br />
    
    				- 4th December 2008
    
    				<br /><br />
    
    				Attended by: <br />
    				The Queen & <br />
    				HRH Prince Philip
    
    				<br /><br /><br />
    
    				<a class="bluLink" href="http://www.leicestergrammar.org.uk/lgs.asp?s=rv&pg=intro">
    				> More Information</a> <br />
    
    				<a class="bluLink" href="http://www.leicestergrammar.org.uk/lgs.asp?s=rv&pg=gallery">
    				> View the Photos</a>
    
    			</div>
    
    		</div>
    
    	</body>
    
    </html>
    And the Style Sheet:

    Code:
    html, body
    {
    	background-repeat: no-repeat;
    	overflow: hidden;
    	font: 11px, microsoft sans serif;
    }
    
    .sLinks
    {
    	position: absolute;
    	left: 55px;
    	top: 8px;	
    }
    
    a
    {
    	color: #222222;
    	text-decoration: none;
    }
    
    a.bluLink
    {
    	color: #0099FF;
    }
    
    .logo
    {
    	position: absolute;
    	left: 920px;
    	top: 6px;
    }
    
    .banner
    {
    	position: absolute;
    	left: 0px;
    	top: 95px;
    }
    
    #sideBar
    {
    	position: absolute;
    	left: 0px;
    	top: 170px;
    	height: 364px;
    	width: 220px;
    }
    
    .favLinks
    {
    	position: absolute;
    	left: 30px;
    	top: 13px;
    }
    
    .senior
    {
    	position: absolute;
    	left: 10px;
    	top: 158px;
    }
    
    .junior
    {
    	position: absolute;
    	left: 10px;
    	top: 260px;
    }
    
    .senior img
    {
    	float: left;
    	margin-right: 5px;
    }
    
    .junior img
    {
    	float: left;
    	margin-right: 5px;
    }
    
    #news
    {
    	position: absolute;
    	left: 220px;
    	top: 435px;
    	height: 194px;
    	width: 280px;
    }
    
    .newsTxt
    {
    	position: absolute;
    	left: 25px;
    	top: 21px;
    }
    
    #content
    {
    	background-color: white;
    	position: absolute;
    	left: 500px;
    	top: 435;
    	height: 194px;
    	width: 525px;
    }
    
    .ssLinks1
    {
    	position: absolute;
    	left: 25px;
    	top: 21px;
    }
    
    .ssLinks2
    {
    	position: absolute;
    	left: 290px;
    	top: 21px;
    	width: 220px;
    }
    
    img.contentPic
    {
    	float: right;
    }
    
    span.greyTxt
    {
    	color: #777777;
    }
    I would have built it in Firefox first, but 98&#37; of the users will be viewing it in IE. I'm just a bit baffled by it at the mo...
    Last edited by drnic010; 02-24-2009 at 03:24 AM. Reason: Added highlights

  5. #5
    Join Date
    Feb 2009
    Posts
    17
    Hey guys,
    Sorry to double post, I've just realised why my box wasn't compiling properly in Firefox.

    Wrote 'top: 435;' instead of 'top: 435px;' in my CSS.

    Ah, why is it always the stupidest mistakes that take the longest to correct...

    Thanks anyway guys
    Much appreciated!

    Nic.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles