The div "headerlinks" is supposed to float to the bottom left of the div "header", but sometimes it appears incorrectly positioned until I reload the page. It's unclear whether this issue is caused by my CSS or if it's a browser bug. For reference, I am using
Chrome 29.0.1547.62 (Official Build 219432) Mac OS X<div id="header">
<a href="/">
<img src="blackdiamondcraft.com/title.png" alt="Home"></a>
<div id="headerlinks">
<a class="boxlink" href="/nothing">Nothing</a>
<a class="boxlink" href="/nothing">Nothing</a>
<a class="boxlink" href="/nothing">Nothing</a>
<a class="boxlink" href="/nothing">Nothing</a>
<a class="boxlink" href="/nothing">Nothing</a>
</div>
</div>
CSS Styles:
.boxlink {
background-color: #cccccc;
border: solid #999999 1px;
padding: 5px;
}
#header {
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
border-radius: 10px;
padding: 3px;
border: solid 4px black;
margin: 4px;
}
#headerlinks{
float: right;
padding: 10px;
background-color: #66ffcc;
position: inherit;
border-radius: 7px;
border: solid #000 1px;
}