CODEWITHSUNDEEP
htmlcsswordpress
Ken
Ken

Reputation: 279

Positioning issue with chrome

http://www.gcfimoveis.com.br/

Text widget on bottom (CPFL) displays fine in IE and FF after I added:

 <ul style="position:relative; right:25px;">

to the list.

In Chrome, it is positioned too far to the left. I tried finding a way to correct it with a -webkit property, but couldn't figure it out.

Upvotes: 0

Views: 67

Answers (2)

ktm5124
ktm5124

Reputation: 12123

I see that you have a series of <div class="widget">

However in that one particular widget you use an unordered list, whereas in every widget above that you strangely omit the <ul> tag. For example,

<div class="textwidget">           
<li><a rel="nofollow" href="http://www.ribeiraopreto.sp.gov.br/daerp/jw04informacaoCadastral.htm" title="Informação Cadastral" target="_blank">» Informação Cadastral</a></li>
<li><a rel="nofollow" href="http://www.ribeiraopreto.sp.gov.br/daerp/jw04informacaoDebito.htm" title="Informação de Débito" target="_blank">» Informação de Débito</a></li>
<li><a rel="nofollow" href="http://www.ribeiraopreto.sp.gov.br/daerp/jw04segundaViaConta.htm" title="Segunda via da conta" target="_blank">» Segunda via da conta</a></li>
<li><a rel="nofollow" href="http://www.ribeiraopreto.sp.gov.br/daerp/jw04rdd.htm" title="Guia de arrecadação - RDD" target="_blank">» Guia de arrecadação – RDD</a></li>
<li><a rel="nofollow" href="http://www.ribeiraopreto.sp.gov.br/daerp/i04dc-indice.php" title="Dicas ao consumidor" target="_blank">» Dicas ao consumidor</a></li>
</div>

In this HTML, there is no <ul> to contain the <li> items. But in your problematic widget, you do have the <ul> tag.

Update: If you change that <ul> in the problematic widget to a <div>, and get rid of the relative positioning you added, they align perfectly.

Upvotes: 2

meewog
meewog

Reputation: 1740

First of all, when writing HTML code, try to follow best practices and recommendations. First thing which struck my mind was your <li> items weren't wrapped in <ul> tags. Although your web browser can interpret and understand what was meant by the coder, it's better to follow the standards.

Now to your main problem, each browser has different default CSS configurations and that's why people use CSS reset scripts to counter this. You need to add the following line to your CSS code to get the list-items working consistently:

li {
    list-style-position:inside;
}

you can see the possible values for list-style-position here

Hope I helped

Upvotes: 0

Related Questions