SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member Cyber Null's Avatar
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image positioning

    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:
    Code:
    <!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:
    Code:
    		/*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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    Are you talking about this image:
    Code:
    <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. #3
    SitePoint Member Cyber Null's Avatar
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for welcome message. Umm, no, I don't have online link for but I can give you uploaded all files:
    https://mega.co.nz/#!h4dGgACZ!IaAN0j...Z5ZT_OGC-Un5G4
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    #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. #5
    SitePoint Member Cyber Null's Avatar
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that worked out just perfectly. Thank you a lot!


Bookmarks

Posting Permissions

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