For some reason Opera adds extra space to positioning (about 2-3px) when I change font-size. You can see that on #logo (just change the font-size to 36px or higher), or on #nav, for a smaller font-size value. Everything works fine in Chrome and Firefox, so why is Opera doing this? Since my code is messy and there's a ton of it I've uploaded it here: http://www.filedropper.com/site_5, so can someone please check it out?

Here's my code as well, but I warn you, it' quite messy:
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>
<style type="text/css">
@import "stil.css";
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="reel.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savic</title>
</head>

<body>
<div id="container">
   <div id="header">
   <div id="menu">
   <p id="tek"> Samostalna Zanatska Radnja</p>
   <a id="logo" href="index.html">Savić</a>
   <div id="darrow">
   </div>
    <div id="darrow2">
   </div>
   <ul id="nav">
   
   
   <li><a class="link" href="#">Početna</a></li>
   <li><a class="link" id="izb" href="#">Izrada</a></li>
   <li><a class="link" id="ugb" href="#">Ugradnja</a></li>
   <li><a class="link" href="#">Galerija</a></li>
   <li><a class="link" href="#">Kontakt</a></li>
   </ul>
   <ul id="izd">
   <li><a href="www.goog">Ograda</a></li>
   <li><a href="#">Kapija</a></li>
   <li><a href="#">Gelendera</a></li>
   <li><a href="#">Čelične konstrukcije</a></li>
   <li><a href="#">Garažnih vrata</a></li>
   </ul>
   <ul id="ugd">
   <li><a href="#">Kupatila</a></li>
   <li><a href="#">Vodovoda</a></li>
   <li><a href="#">Kanalizacije</a></li>
   <li><a href="#">Grejanja</a></li>
   <li><a href="#">Servis pumpi za vodu</a></li>
   </ul>
   </div>
  
   </div>
   <div id="body">
<!-- ALL STUFF GOES HERE -->
<div id="holder">


<!-- LEVI DIV -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="left">
<div id="portfolio_cycler" class="shadow roundbox">

<img class="active" src="images/reel1.jpg"  />
<img src="images/reel2.jpg" />
<img src="images/reel3.jpg" />
<img src="images/reel4.jpg" />		
<img src="images/reel5.jpg" />	
<img src="images/reel6.jpg" />	

</div>
<img id="horg" src="images/horg.jpg" />
<div id="topt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque semper ligula at volutpat. In hac habitasse platea dictumst. Nam ultrices diam eu dolor cursus in semper ligula faucibus. Nulla mattis tortor vel nunc rutrum convallis. Maecenas egestas diam sit amet odio mattis sit amet pellentesque orci bibendum. Ut sodales fringilla sem, nec volutpat mi scelerisque non. Phasellus luctus laoreet nunc, eget tincidunt massa egestas vel. Phasellus id sapien ante. Fusce vulputate, urna quis condimentum molestie, erat sapien porttitor dui, eu pulvinar orci enim non massa. Mauris in cursus mauris. Sed tortor justo, placerat tristique blandit at, rutrum quis nisi.</p>
</div>
<div id="tri">
<div>
<h4>Proizvodnja:</h4>
<img src="images/proizvodnjat.jpg" />
<p>Etiam ultricies gravida ullamcorper. Nunc faucibus posuere massa sed sagittis. Ut blandit sodales est ut lacinia. Maecenas ac turpis dui, quis lobortis quam. Proin elementum porttitor sem, sit amet congue enim tincidunt et. Fusce sed sem nunc, id adipiscing arcu. Mauris sagittis magna et felis commodo sed ullamcorper est venenatis.</p>
</div>
<div>
<h4>Ugradnja:</h4>
<img src="images/ugradnjat.jpg" />
</div>
<div>
<h4>Galerija:</h4>
<img src="images/galerijat.jpg" />
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- LEVI DIV KRAJ -->


</div>
<!-- ALL STUFF ENDS HERE -->
    </div>
   <div id="footer"></div>
</div>
</body>
</html>
Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/*NEOPHODNO ZA FOOTER */
/*<div id="container">
   <div id="header">
   <div id="menu">
   </div>
   </div>
   <div id="body">
   Sve stavljati u body, kao i margin: 0 auto, ne treba wrap div
    </div>
   <div id="footer"></div>
  
</div>
*/
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
body{
	   /* mora da se stavi deafault ovako jer je Opera DJUBRE i to ne sme da se menja nigde ispod */
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:url(images/background.jpg) repeat-x;
   height:100px;
}
#body {
	width:980px;
	margin:0 auto;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:25px;   /* Height of the footer */
   background:url(images/footer.jpg) repeat-x;
}
#wrap{
	width:980px;
	margin:0 auto;
	background:#000;
	height:100px;
}
/* FOOTER PODESAVANJA */

#menu{
	width:980px;
	margin:0 auto;
	position:relative;
	top:2px;
	height:98px;
	background:url(images/header2.jpg) 0px 0px;
}
#holder{
	width:960px;
	position:relative;
	left:10px;
	top:10px;
}
#menu p{
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFF;
}
#menu p{
	font-size:12px;
	left:55px;
	top:10px;
	width:200px;
}
#logo{
	font-size:35px;
	top:16px;
	left:80px;
	text-decoration:none;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFF;
}
#tek, #logo{
	position:absolute;
	z-index:4;
}

#nav ul{
}
#nav {
margin: 0;
padding: 0;
position:absolute;
height:25px;
top:75px;
width:400px;

}
#nav li {
/* use this instead of display:inline */
display:inline; /* float left i display:block su tu da bi lista isla u redu jer OPERA zeza sa display inline */
}
#nav a{
font-size:12px;	
}
.link{
text-decoration:none;
font:Arial, Helvetica, sans-serif;
padding-top:5px;
padding-bottom:5px;
background:#0f0;
padding-left:15px;
padding-right:15px;

}


#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
 
#izd{
	width:130px;
	background:#48a9c4;
	position:absolute;
	z-index:5;
	font-size:12px;
	text-align:center;
	top:98px;
	left:60px;
	height:120px;
}
#ugd{
	width:130px;
	background:#48a9c4;
	position:absolute;
	z-index:5;
	font-size:12px;
	text-align:center;
	top:98px;
	left:146px;
	height:120px;
}
#izd li, #ugd li{
	list-style:none;
	padding-top:3px;
	padding-bottom:5px;
}
#izd a, #ugd a{
	text-decoration:none;
	display:block;
	width:130px;
}
#izb{
	visibility:visible;
}
#darrow{
	position:absolute;
	left:120px;
	top:80px;
	background:url(images/darrow.png) no-repeat;
	width:10px;
	height:12px;
	z-index:5;
}
#darrow2{
	position:absolute;
	left:195px;
	top:80px;
	background:url(images/darrow.png) no-repeat;
	width:10px;
	height:12px;
	z-index:5;
}
#horg{
	position:relative;
	top:277px;
}
#topt{
	position:relative;
	width:770px;
	top:283px;
	text-align:justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
#tri{
	position:relative;
	top:300px;
	width:770px;
	height:200px;
}
#tri div{
	width:202px;
	float:left;
	margin-right:25px;
	margin-left:25px;
}
#tri div img{
	position:relative;
	top:0;
	margin:0;
	padding:0;
}
#tri h4{
	text-align:center;
}