Strange characters in page view

Asked

Viewed 43 times

0

I am trying to replace my Javascript effects with CSS3. However, in the first positions of the page some strange characters are appearing. I’m also using Fontawesome

My CSS looks like this:

*{margin: 0; padding:0;}
.menu{width: 100%; height: 50px; background-color:#222; font-family:Arial, Helvetica, sans-serif;}
.menu ul{list-style:none; position:relative;}
.menu ul li{width: 150px; float:left;}
.menu a{padding: 10px; display:block; text-decoration:none; text-align:center; background-color:#222; color:#fff;}
.menu ul ul{position: absolute; visibility:hidden;}
.menu ul li:hover > ul{visibility: visible;}
.menu a:hover{background-color:#f4f4f4; color:#555;}
.menu ul ul li{float: none; padding-left:1px;  border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;}
.menu ul ul li a{background-color: #999;}
.menu ul li ul li { white-space: nowrap; }
.menu ul li ul li > a { display: inline-block; width: 100%; box-sizing: }
.menu ul li ul li > ul { display: inline-block;}
label[for="bt_menu"]{padding: 5px; background-color: #222; color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:30px; cursor: pointer; width: 50px; height:50px;}
#bt_menu{display: none;}
label[for="bt_menu"]{display: none;}

 @media(max-width: 800px) { 
 label[for="bt_menu"] { display: block; } 
 #bt_menu:checked ~ .menu{ margin-left: 0; } 
 .menu{ margin-top: 5px; margin-left: -100%; transition: all .4s; } 
 .menu ul li { width: 100%; float: none; } 
 .menu ul ul { position: static; overflow: hidden; max-height: 0; transition: all .4s; } 
 .menu ul li:hover ul { height: auto; max-height: 200px; } 

}

The HTML is like this:

<input type="checkbox" id="bt_menu">
<label for="bt_menu">&#9776;</label>
<nav class="menu">
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Ve&iacute;culos</a>
            <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Seminovos</a></li>
                <li><a href="#">F&amp;I</a></li>
            </ul>
        </li>
        <li><a href="#">Pe&ccedil;as</a>
            <ul>
                <li><a href="#">Balc&atilde;o</a></li>
                <li><a href="#">Oficina</a>
                    <ul>
                        <li><a href="#">Mec&acirc;nica</a></li>
                        <li><a href="#">Funilaria</a></li>
                        <li><a href="#">Acess&oacute;rios</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Servi&ccedilos</a>
            <ul>
                <li><a href="#">Adm da Oficina</a></li>
                <li><a href="#">Mec&acirc;nica</a></li>
                <li><a href="#">Funilaria</a></li>
                <li><a href="#">Acess&oacute;rios</a></li>
            </ul>
        </li>
        <li><a href="#"><i>Back Office</i></a>
            <ul>
                <li><a href="#">Finan&ccedil;as</a></li>
                <li><a href="#">Rec Humanos</a></li>
                <li><a href="#">Controladoria</a>
                <ul>
                    <li><a href="#">Contabilidade</a></li>
                    <li><a href="#">Tributos</a></li>
                    <li><a href="#"><i>Compliance</i></a></li>
                    <li><a href="#">Tecn Informaç&atilde;o</a></li>                                                             
                </ul>
                </li>
                <li><a href="#">Contabilidade</a></li>
                <li><a href="#">Tributos</a></li>
                <li><a href="#"><i>Compliance</i></a></li>
                <li><a href="#">Tecn Informaç&atilde;o</a></li>                                                             
            </ul>
        </li>
        <li><a href="#">Jur&iacute;dico</a></li>
        <li><a href="#">Sair</a></li>
    </ul>
</nav>

And the result in the browser is this:

inserir a descrição da imagem aqui

css3

  • Thanks for the reply Anderson, but the example is for an XML file and I have no idea how to use in HTML. I’ve searched the internet and found everything about BOM, except the syntax.

  • Can you put the whole code? It is likely that it is before the <body> tag the error.

  • Webster, it’s exactly the same thing. Just follow Guilherme’s hint in the answers that you will remove BOM from HTML in the same way.

1 answer

0


Open your HTML file on NOTEPAD++, go in Formatar -> Converter para UTF-8 (sem BOM).

This will remove any GOOD character.

  • I say use NOTEPAD++, because once was the only one that worked with me.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.