Jump to content

Cant Display Text Box Accurately In Firefox


madsovenielsen
 Share

Recommended Posts

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

Edited by madsovenielsen
Link to comment
Share on other sites

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...