Entrar Ainda não tem acesso?
3
respostas

Design de telas

por Marcel Murias Sacute
| 16.4k xp | 16 posts

Bom dia

Estou montando um projeto de um sistema web, e me deparei com um problema peculiar.

Minha aplicação consiste em uma MasterPage, uma Nested MasterPage (aninhada a Master original) e as páginas de conteúdo (aninhadas à Nested)

Venho fazendo os testes normalmente com o Google Chrome e tudo parece estar rodando perfeitamente.

Porém hoje tentei abrir a aplicação no FireFox para ver como os estilos se comportariam e percebi que a formatação de algumas telas está diferente. Dependendo da tela, alguns TextBox que estão alinhados verticalmente entre si aparecem completamente desalinhados dependendo do navegador que estou utilizando. Até mesmo a cor do texto dos TextBox apareceu diferente quando aberto com o IE.

Abaixo alguns prints para demonstrar o problema.

Alguem já passou por essa situação? Alguma dica de como resolver isso?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Obrigado

3 respostas
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Marcel, tudo bem?

Muitos podem ser os motivos para essa incompatibilidade, que é bastante comum entre os navegadores e suas versões. Para termos um projeto que se adapte em diversos browsers, é necessário fazer uma série de adaptações em nosso CSS, para que ele se comporte de maneira adequada em ambientes diferentes. Mas ainda assim, é difícil mapearmos essa incompatibilidade para corrigí-la.

Uma das adaptações necessárias, seria acrescentando o arquivo reset.css ao projeto. Você poderia verificar se está utilizando esse arquivo? Se não estiver, você poderá baixar o zip aqui.

Caso esteja utilizando, verifique se ele está sendo aplicado de maneira correta no código.

Após baixar, coloque o arquivo em uma das pastas do seu projeto (ele costuma ficar junto com os outros estilos). Em seguida, passe o caminho do reset.css dentro da tag <head>, assim como fez com o style.css. Veja o exemplo abaixo:

    <head>
        <meta charset="UTF-8">
        <title>Nome do projeto</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

    </head>

Atenção, é essencial que o arquivo reset.css esteja escrito antes do style.css, assim como foi feito no exemplo acima.

Se quiser aprender mais sobre incompatibilidades, vale a pena a leitura:

Aguardo para saber se deu certo, abraços!

por Marcel Murias Sacute
| 16.4k xp | 16 posts

Olá Beatriz, muito obrigado pela agilidade na resposta.

Realmente não tenho esse reset.css em meu projeto.

Vou dar uma olhada nesse material que você me passou, e também baixar e aplicar o reset no projeto.

Obrigado.

por Marcel Murias Sacute
| 16.4k xp | 16 posts

Bom dia.

Realmente utilizar o reset.css não surtiu tanto efeito. O problema persiste da mesma maneira.