Recently, I implemented a new widget on my blog called , which functions as a menu using the "Add HTML/Script" feature. Below is the HTML/CSS code for the widget:
.menukadn {
line-height: 1;
}
a.limeka, a.limeka:visited, a.limeka:active {
font-family: 'Maven Pro', sans-serif;
font-size: 30px;
font-weight: bold;
color: #bbb;
text-decoration: none;
text-transform: uppercase;
transition: color 150ms linear;
letter-spacing: -0.090em;
}
a.limeka:hover {
color: #21a97e;
transition: color 150ms linear;
}
Here is the code for the widget itself:
<div class="menukadn">
<a href="https://www.facebook.com/Kadnnn" class="limeka" title="" target="_blank">Facebook</a>
<br/>
<a href="http://instagram.com/kasperikoski" class="limeka" title="" target="_blank">Instagram</a>
</div>
When attempting to apply positioning, such as:
.menukadn {
line-height: 1;
position: fixed;
}
or directly to the widget DIV#HTML1:
#HTML1 {
position: fixed;
}
The positioning works correctly in Mozilla Firefox, but in Chrome, my widget #HTML1 is positioned approximately 800px to the right of where it should be (next to the left border of the inner body). Could there be a conflicting code causing this discrepancy?