I have a problem with unordered lists in WebKit browsers. This code is injected into a page that I don’t have, so I cannot use CSS reset, but I cannot understand what is causing my problem.
<div class='instruct'>
<ul>For best results please make sure:
<li>Your entire face including your eyebrows and chin are visible in the frame</li>
<li>Your face is well lit but please avoid excessive backlighting</li>
</ul>
</div>
CSS:
.instruct {
display: inline;
font-size:14px;
text-align:center;
padding-top: 10px;
padding:0px;
margin: 0px;
}
.instruct ul {
position: relative;
left: 30px;
width: 320px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style: none;
}
.instruct ul li {
font-weight: normal;
text-align: left;
text-indent: 0px;
padding: 0px;
padding-top: 10px;
margin: 0px;
}
The result that I am currently getting in IE / FF is that all the list items are correctly aligned on the left side of the UL content window. However, Chrome and Safari have a space of about 20 pixels between the left side of the UL content field and each of the LI content fields.
When checking an item in the Chrome Developer Console, the window highlighting effect is clearly 20 pixels from the left side of the left side of the UL. This is like 20 pixels of indentation or margin, from somewhere from somewhere.
, UL LI , .
.
EDIT:
:
