I am facing an issue with the text position inside the box/button element on my website. The text appears correctly in Chrome, but in Firefox, it is positioned above the box, making it difficult to read.
Can someone assist me with fixing the CSS or identifying what I am doing wrong so that the text can be properly placed inside the box element?
<div class="contents grid_26 push_24">
<ul class="ca-menu">
<li>
<a href="#">
<div class="ca-content lft">
<h2 class="ca-main">Item 1<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content lft">
<h2 class="ca-main">Item 2<img src="images/image_1.png" width="22" height="22" class="arrow"></h2>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content lft">
<h2 class="ca-main">Item 3<img src="images/image_1.png" width="22" height="22" class="arrow1"></h2>
</div>
</a>
</li>
</div>
<style>
.ca-main{
font-size: 14px;
position: absolute;
top: -17px;
height: 80px;
width: 120px;
left: 70%;
margin-left: -88px;
opacity: 0.8;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
}
.container_24 .grid_26 {
margin-top: -20px;
}
.container_24 .push_24 {
margin-left: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.ca-menu{
padding: 0 0 0 48px;
margin: 62px auto;
width: 1020px;
cursor: pointer;
}
.ca-menu li{
top: 28px;
left: -140px;
width: 140px;
height: 28px;
border: 3px solid #333;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-left:-48px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
/* -webkit-border-radius: 125px; */
-moz-border-radius: 125px;
border-radius: 125px;
}
</style>