Image positioning

HTML & CSS
1

Hello there, I am new when it comes to web coding and I am still learning ways to position things so sometimes I have some bugs on different browsers. Anyway, my problem is checkbox image I plan to position after input element. When I do in on chrome, everything is okay, but on firefox it’s not. Anyway here is the HTML page:

<!DOCTYPE HTML>
<html>
<title>Scientistic template</title>
<link rel="icon" href="Slike/favicon.ico" />
	<head>
			<link rel="stylesheet" type="text/css" href="stil.css">
		<meta name="author" content="Aleksandar Arsic" />
		<meta name="description" content="Template Srpske IT edukacije" />
		<meta name="keywords" content="Template,Srpska IT edukacija" />
		<meta charset="UTF-8" />
		<script type="text/javascript">
		var textBox = document.getElementById("name");
		var textLength = textBox.value.length;
		</script>
	</head>
	<body>
		<div id="header">
			<img src="Slike/erlenmajer.png">
			<p>Science<span>.org</span></p>
			<ul id="nav">
				<li><a href ="pocetna.html">Home</a></li>
				<li><a href ="projekti.html">Projects</a></li>
				<li><a href ="#">About us</a></li>
				<li><a href ="#">Contact</a></li>
			</ul>
		</div>
		<div id="contact">
		<table>
			<tr>
				<td style="text-align:right !important;padding-right:20pt;"><p>Name:</p></td>
				<td><input type="text" id="name"/><img src="Slike/checkmark-false.png" id="IME" style="vertical-align:middle;margin-left:10px;"></td>
				
			</tr>
			<tr>
				<td style="text-align:right !important;padding-right:20pt;"><p>Title:</p></td>
				<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
			</tr>
			<tr>
				<td style="text-align:right !important;padding-right:20pt;"><p>Email:</p></td>
				<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
			</tr>
			<tr>
				<td><input type="text" /></td>
			</tr>
		</table>
		</div>
		<div id="footer">
		<table id="foot">
		<tr>
			<td>
			<p>Social</p><br>
			<a href="#"><img src="Slike/facebook.png" id="fb" title="Facebook" onmouseover="this.src='Slike/facebook-hover.png'" onmouseout="this.src='Slike/facebook.png'" /></a>
			<a href="#"><img src="Slike/twitter.png" onmouseover="this.src='Slike/twitter-hover.png'" onmouseout="this.src='Slike/twitter.png'"/></a>
			<a href="#"><img src="Slike/youtube.png" onmouseover="this.src='Slike/youtube-hover.png'" onmouseout="this.src='Slike/youtube.png'"/></a>
			<a href="#"><img src="Slike/google+.png" onmouseover="this.src='Slike/google+-hover.png'" onmouseout="this.src='Slike/google+.png'"/></a>
			<a href="#"><img src="Slike/linkedIn.png" onmouseover="this.src='Slike/linkedIn-hover.png'" onmouseout="this.src='Slike/linkedIn.png'"/></a>
			<a href="#"><img src="Slike/mail.png" onmouseover="this.src='Slike/mail-hover.png'" onmouseout="this.src='Slike/mail.png'"/></a>
			</td>
			<td>
			<p>Partneri</p><br>
			<a href="#">Partner 1</a><br>
			<a href="#">Partner 2</a><br>
			<a href="#">Partner 3</a><br>
			<a href="#">Partner 4</a><br>
			<a href="#">Partner 5</a><br>
			</td>
			<td>
			<p>Copyright &copy; www.srpskaitedukacija.org</p>
			</td>
		</tr>
		</table>
		</div>
	</body>
</html>

And CSS general for all documents:

		/*Stilizovanje stranice*/
		
		
* {
padding:0;
margin:0;
}
@font-face {
	font-family:Header;
	src: url('Fonts/THEOREM.ttf');
}
body {
background-color:#dfdfdf;
}
#header {
position:relative;
line-height:200pt;
width:100%;
height:200pt;
background-color:#1a1a1a;
clear:both;
}
#header img {
margin-left:50pt;
vertical-align:middle;
}
#header p {
display:inline-block;
font-family:Header;
margin-left:10pt;
font-size:20pt;
color:#fff;
}
#header p span {
color:#84a3e8;
}
#nav {
margin-right:100pt;
float:right;
display:inline;
}
#nav li {
list-style-type:none;
display:inline-block;
padding-right:10pt;
padding-left:10pt;
}
#nav li a {
color:#fff;
font-family:Header;
font-size;:15pt;
text-decoration:none;
}
#nav li a:hover {
color:#84a3e8;
}
#container {
margin-top:50pt;
width:1000px;
margin-left:auto;
margin-right:auto;
margin-bottom:50pt;
}
#container td {
text-align:center;
}
#container td p {
font-family:Header;
font-size:14pt;
color:#000;
}
#footer {
width:100%;
height:200pt;
background-color:#fff;
border-top:1px solid #b4b4b4;
}
#foot {
width:1000px;
margin-left:auto;
margin-right:auto;
}
#foot td {
height:200pt;
text-align:center;
vertical-align:middle;
}
#foot p {
font-family:Header;
font-size:12pt;
color:#000;
}
#foot a {
text-decoration:none;
font-family:Header;
color:#84a3e8;
font-size:12pt;
}
#foot a:hover {
color:#333333;
}
#news {
width:100%;
height:500pt;
background-color:#e9e9e9;
border-top:1px solid #424141;
border-bottom:1px solid #c4c4c4;
}
#news table {
width:80%;
height:500pt;
margin-left:auto;
margin-right:auto;
}
#news table td {
font-family:Header;
font-size:12pt;
}
#text {
text-align:left !important;
text-indent:50px;
}
.container {
width:500px;
height:400px;
background-color:#fff;
border-bottom:15px solid #9c9c9c;
border-left:1px solid #9c9c9c;
border-top:1px solid #9c9c9c;
border-right:1px solid #9c9c9c;
}
#img1 {
opacity:0.7;
background-image: url('Slike/stock1.jpg');
background-repeat:no-repeat;
}
#img1:hover,#img2:hover {
opacity:1;
}
#img2 {
opacity:0.7;
background-image: url('Slike/stock2.jpg');
background-repeat:no-repeat;
}
#projects {
width:100%;
height:400pt;
background-color:#e0e6f4;
border-top:1px solid #424141;
}
#projects table {
height:400pt;
width:1000px;
margin-left:auto;
margin-right:auto;
}
#projects table td {
padding:10pt;
}
.projekat {
background-color:#fff;
width:100%;
height:100px;
border-left:10px solid #cdd4e6;
border-top:1px solid #cdd4e6;
border-right:1px solid #cdd4e6;
border-bottom:1px solid #cdd4e6;
text-align:center;
}
.projekat p{
font-family:Header;
font-size:10pt;
margin-top:5px;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
width:90%;
height:60px;
margin-top:10px;
}
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color:#7f91c0;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar  {
background-color:#7f91c0;
}
#contact {
width:100%;
height:400pt;
background-color:#5f0504;
border-top:1px solid #424141;
border-bottom:1px solid #340302;
}
#contact table {
height:400pt;
margin-left:18%;
}
#contact table td {
text-align:center;
}
#contact table td p {
color:#fff;
font-family:Header;
font-size:12pt;
}
input {
font-family:Helvetica;
font-size:10pt;
color:#fff;
width:300px;
height:40px;
background-color:#1d1d1d;
border:1px solid #6e0a0a;
}
2

Hi, Welcome to Sitepoint:)

Are you talking about this image:


<img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;">

What is wrong with it in Firefox as it looks the same in Firefox and chrome to me? Of course I don’t know what size the image is supposed to be as you have omitted the width and height attributes (which you should always include in the image tag for best rendering) so it may be a problem related to the size of the image.

However, I can’t see a difference locally. Do you have a link to the page?

3

Thanks for welcome message. Umm, no, I don’t have online link for but I can give you uploaded all files:

Just check the kontakt.html page . For me, the image I added is on firefox bellow the input box while on chrome is inline.

4

Hi,

Firefox and Chrome look the same in that zip unless you move the browser to a specific width and then the image drops below. It’s fine for 99% of the width.

You can try and force the whitespace to not wrap in that cell like this:


#contact table td +td{white-space:nowrap}

Note that the last row you only have one td and you should have 2 tds or at least use a colspan=“2” when you only want a single.

5

Wow, that worked out just perfectly. Thank you a lot!