Here is some HTML code:
<div class="wrapper">
<div class="LItms">
<div class="clr">
</div>
<span>text con</span>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
This is the CSS for the elements:
Without position relative:
.clr {
color: red;
display: list-item;
list-style-type: square;
font-size: 40px;
height: 16px;
width:16px;
margin-bottom: 17px;
margin-left: 23px;
}
With position relative:
.clr {
color: red;
display: list-item;
list-style-type: square;
font-size: 40px;
height: 16px;
width:16px;
margin-bottom: 17px;
margin-left: 23px;
}
After trying both versions of the CSS, there seems to be an issue. It works fine in Firefox, but in Chrome and Internet Explorer, the size of the bullet for the div is smaller than in Firefox. Additionally, the space between the bullet and the span next to the div with class .clr is greater when compared to Firefox. I am looking for a solution to ensure consistency across all browsers. Any suggestions on how to align them the same way in all browsers would be greatly appreciated.