Jump to content

Cant Display Text Box Accurately In Firefox

madsovenielsen

By madsovenielsen
in JavaScript

Recommended Posts

madsovenielsen Member

madsovenielsen

Posted
Posted

Hello all. im having trouble displaying a text boubble in firefox. here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>Conforming XHTML 1.0 Transitional Template</title>		<style type="text/css">		body {		font-family: verdana;		margin-left: 150px;		}		#main {		border-left: solid 1px #A8A8A8;		border-right: solid 1px #A8A8A8;		border-top: solid 1px #A8A8A8;		font-size: 0.8em;		width: 700px;		}		.button {		vertical-align: middle;		}		.light {		background-color: #ECECEC;		padding: 4px;		}		.dark {		background-color: #D9D9D9;		padding: 4px;		}		#version {		font-size: 0.7em;		margin-top: 5px;		width: 700px;		text-align: right;		}		#menu {		padding-top: 5px;		padding-left: 4px;		border-top: solid 1px #D9D9D9;		}		.sum {		margin-left: 15px;		}		.md5 {		text-align: right;		}		#current_dir {		font-size: 0.8em;		margin-bottom: 7px;		width: 700px;		}		#bubble {		display: none;		background-color: url("");		width: 268px;		height: 150px;		padding-left: 20px;		padding-right: 20px;		padding-top: 18px;		position: absolute;		top: 325px;		left: 50px;		font-size: 0.8em;		}		</style>		<script type="text/javascript">			function bubble() {				newImage = "url(\"bubble.png\")";				document.getElementById('bubble').style.backgroundImage= newImage;				document.getElementById('bubble').style.display= "block";				document.getElementById('bubble').innerHTML = "Save the current directory list as...";				}			function bubble_new() {				newImage = "url(\"bubble.png\")";				document.getElementById('bubble').style.backgroundImage= newImage;				document.getElementById('bubble').style.display= "block";				document.getElementById('bubble').style.top= "325";				document.getElementById('bubble').style.left= "45";				document.getElementById('bubble').innerHTML = "Create a new directory list";				}			function bubble_saveas() {				newImage = "url(\"bubble.png\")";				document.getElementById('bubble').style.backgroundImage= newImage;				document.getElementById('bubble').style.display= "block";				document.getElementById('bubble').style.top= "325";				document.getElementById('bubble').style.left= "190";				document.getElementById('bubble').innerHTML = "Save the current directory list";				}			function bubble_options() {				newImage = "url(\"bubble.png\")";				document.getElementById('bubble').style.backgroundImage= newImage;				document.getElementById('bubble').style.display= "block";				document.getElementById('bubble').style.top= "325";				document.getElementById('bubble').style.left= "115";				document.getElementById('bubble').innerHTML = "Show the options related to the current directory list";				}			function bubbleout() {				document.getElementById('bubble').style.display= "none";				}		</script>	</head>	<body>		<h2>List Directory</h2>		<div id="current_dir"><b>Current Directory:</b> C:\Documents and Settings\111750\Skrivebord\</div>		<div id="main">			<div class="light"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div class="dark"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div class="light"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div class="dark"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div class="light"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div class="dark"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div class="light"><img class="button" src="select.png" /><span class="sum">/drive/folder/subfolder/file.ext</span></div>			<div id="menu"><img onmouseover="bubble_new();" onmouseout="bubbleout();" src="new.png" /> <img onmouseover="bubble_options();" onmouseout="bubbleout();" src="options.png" /> <img onmouseover="bubble_saveas();" onmouseout="bubbleout();" src="save.png" /></div>		</div>		<div id="version">Version 0.1</div>		<div id="bubble"></div>	</body></html>

The page in questionas you can see the "text boubble" dont display right in firefox. how do i fix this ? and please any suggestions for general code improvement is greately appriciated./mads/mads

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Your error console should be telling you that the browser cannot parse the value for the top and left coordinates. That means the values don't look right. Try adding units to your style values, like "325px".

Link to comment
Share on other sites
madsovenielsen Member

madsovenielsen

Posted
  • Author
Posted
Your error console should be telling you that the browser cannot parse the value for the top and left coordinates. That means the values don't look right. Try adding units to your style values, like "325px".
Ahh. of course!! thanks a lot. /mads
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...