Note that there are some explanatory texts on larger screens.

plurals
  1. POFont-size adds extra space when positioning text elements in Opera
    primarykey
    data
    text
    <p>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: <a href="http://www.filedropper.com/site_5" rel="nofollow">http://www.filedropper.com/site_5</a>, so can someone please check it out?</p> <pre><code>&lt;div id="menu"&gt; &lt;p id="tek"&gt; Samostalna Zanatska Radnja&lt;/p&gt; &lt;a id="logo" href="index.html"&gt;Savić&lt;/a&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Početna&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" id="izb" href="#"&gt;Izrada&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" id="ugb" href="#"&gt;Ugradnja&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Galerija&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; #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 { 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 */ } .link{ text-decoration:none; font:Arial, Helvetica, sans-serif; font-size:12px; } </code></pre> <p>I've also added .link because every a element in #nav has class .link. It works fine with default text-size value, but when I set it to 12px I get this strange extra space Only in Opera.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload