Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking.
Below is the initial piece of code with working CSS implementation:
<div class="subTopHolder">
<ul class="language">
<li><a href="#" title="Türkçe">TR</a></li>
<li>EN</li>
</ul>
The issue arises when I try to turn 'EN' into a hyperlink. The resulting code looks like this:
<div class="subTopHolder">
<ul class="language">
<li><a href="#" title="Türkçe">TR</a></li>
<li><a href="#" title="English">EN</a></li>
</ul>
In this scenario, instead of appearing next to each other with a margin, they end up stacked vertically.
The accompanying CSS code is as follows:
div.subTopHolder
{
width:1002px;
height:201px;
margin:auto auto;
padding:0 12px;
position:relative;
overflow:hidden;
background:url(../images/bck-bannerHolder.jpg) no-repeat center top;
}
ul.language
{
float:right;
clear:left;
padding:2px 0;
margin-bottom:4px;
cursor:default;
}
ul.language li
{
display:inline;
background:#f8c180;
padding:2px 4px;
font-size:10px;
cursor:default;
text-shadow:0 1px white;
border-radius:2px;
}
ul.language li a
{
font-size:10px;
display:block-inline;
background:#fff;
color:#000;
text-decoration:none;
margin:-2px -4px;
padding:2px 4px;
border-radius:2px;
transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
}
ul.language li a:hover
{
box-shadow:1px 1px 8px 0px black;