Jump to content
c.orelhas

Compatibilidade IE

Recommended Posts

c.orelhas

Bom dia,

Queria uma pequena ajuda para saber como resolver o problema de compatibilidade com o IE, visto ter o projeto todo pronto e apresentar um problema de compatibilidade com os icons colocando uma moldura em torno das mesmas.. Como posso resolver ?

Share this post


Link to post
Share on other sites
c.orelhas

body {
   background-color: #5c87b2;
   font-size: .85em;
   font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
   margin: 0;
   padding: 0;
   color: #696969;
}

img {

   border:0;
   outline:none;
}

a:link {
   color: #034af3;
   text-decoration: none;
}

a:visited {
   color: #034af3;
   text-decoration: none;
}

a:hover {
   color: #034af3;
   text-decoration: none;}

a:active {
   color: #034af3;
   text-decoration: none;
}

p, ul {
   margin-bottom: 20px;
   line-height: 1.6em;
}

header,
footer,
nav,
section {
   display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
   font-size: 1.5em;
   color: #000;
}

h1 {
   font-size: 2em;
   padding-bottom: 0;
   margin-bottom: 0;
}

h2 {
   padding: 0 0 10px 0;
}

h3 {
   font-size: 1.2em;
}

h4 {
   font-size: 1.1em;
}

h5, h6 {
   font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   border:0;
   outline:none;
}

header, #header {
   position: relative;
   margin-bottom: 0px;
   color: #000;
   padding: 0;
}

header h1, #header h1 {
   font-weight: bold;
   padding: 5px 0;
   margin: 0;
   color: #fff;
   border: none;
   line-height: 2em;
   font-size: 24px !important;
   text-shadow: 1px 1px 2px #111;
}

#main 
{
   clear: both;
   padding: 10px 10px 10px 10px;
   background-color: #fff;
   border-radius: 0 4px 0 0;
   -webkit-border-radius: 0 4px 0 0;
   -moz-border-radius: 0 4px 0 0;
}

footer, 
#footer {
   background-color: #fff;
   color: #999;
   text-align: right;
   font-size: .9em;
   padding: 0 10px 5px 0;
   border-radius: 0 0 4px 4px;
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;    
}

tfoot tr td hr
{
   width: 100%;
   color: #e8eef4;
}

/* TAB MENU   
----------------------------------------------------------*/
.menu {
   color: #fff; 
   padding: 10px 6px 10px 6px; 
   background-color: white; 
   position: relative; 
   text-align: right;
   -webkit-user-select: none;
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
}

.button  {
   color: #fff; 
   padding: 10px 6px 10px 6px; 
   background-color: white; 
   margin-right: 0px;
   position: relative; 
   -webkit-user-select: none;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}

.menu:active,
.button:active {
   position: relative; 
   top: 3px;
}

.menu:active:after,
.button:active:after {
   content: ""; 
   width: 100%; 
   height: 3px; 
   background: #fff; 
   position: absolute; 
   bottom: -7px; 
   left: 0;
}

.button.gradient,
.menu.gradient {
   color: #034af3;
   font-weight: bold;
   background-image: -webkit-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0.1, rgba(92,135,178,0.3)),
       color-stop(1, rgba(232,238,244,0.2))
   );
   background-image: -moz-linear-gradient(
       center bottom,
       rgba(92,135,178,0.3) 1%,
       rgba(232,238,244,0.2) 100%
   );
   background-image: gradient(
       center bottom,
       rgba(92,135,178,0.3) 1%,
       rgba(232,238,244,0.2) 100%
   );
}

.button.gradient:hover,
.menu.gradient:hover {
   background-image: -webkit-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0.1, rgba(92,135,178,0.45)),
       color-stop(1, rgba(232,238,244,0.3))
   );
   background-image: -moz-linear-gradient(
       center bottom,
       rgba(92,135,178,0.45) 1%,
       rgba(232,238,244,0.3) 100%
   );
   background-image: gradient(
       center bottom,
       rgba(92,135,178,0.45) 1%,
       rgba(232,238,244,0.3) 100%
   );
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
   border: 1px solid #ddd;
   padding: 0 1.4em 1.4em 1.4em;
   margin: 0 0 1.5em 0;
   background-color: #DEE9F2;
}

legend {
   font-size: 1.2em;
   font-weight: bold;
}

textarea {
   min-height: 75px;
}

input[type="text"], 
input[type="password"] {
   border: 1px solid #ccc;
   padding: 2px;
   font-size: 1.2em;
   color: #444;
   width: 200px;
}

select {
   border: 1px solid #ccc;
   padding: 2px;
   font-size: 1.2em;
   color: #444;
}

input[type="submit"] {
   font-size: 1.2em;
   padding: 5px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
   color: #ff0000;
}

.field-validation-valid {
   display: none;
}

.input-validation-error {
   border: 1px solid #ff0000;
   background-color: #ffeeee;
}

.validation-summary-errors {
   font-weight: bold;
   color: #ff0000;
}

.validation-summary-valid {
   display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
   margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
   margin: 0.5em 0 0 0;
}

.text-box {
   width: 30em;
}

.text-box.multi-line {
   height: 6.5em;
}

.tri-state {
   width: 6em;
}

/* MISC  
----------------------------------------------------------*/

.selectedrow 
{ 
   background-color: #EEEEEE; 
}

.clear {
   clear: both;
}

.error {
   color: Red;
}

nav, 
#menucontainer {
   margin-top: 10px;
   clear: both;
   float: left;
}

div#title {
   display: block;
   float: left;
   text-align: left;
}

#logindisplay {
   font-size: 1.1em;
   display: block;
   text-align: right;
   margin: 10px;
   color: White;
}

#logindisplay a:link {
   color: white;
   text-decoration: underline;
}

#logindisplay a:visited {
   color: white;
   text-decoration: underline;
}

#logindisplay a:hover {
   color: white;
   text-decoration: none;
}

div.row {
 margin-top: 0; 
 margin-right: 0; 
 margin-bottom: 10px; 
 margin-left: 0;
 padding: 0; 
 text-align: left; 
 width: 100%;
 border-top-width: 1px;
 border-top-color: #F8F8F8;
 border-top-style: solid;
}

div.rowMultiLines {
 margin-top: 0; 
 margin-right: 0; 
 margin-bottom: 10px; 
 margin-left: 0;
 padding: 0; 
 text-align: left; 
 width: 100%;
 height: 65px;
 border-top-width: 1px;
 border-top-color: #F8F8F8;
 border-top-style: solid;
}

div.label {
 float: left;
 width: 150px;
 text-align: right;
 margin-right: 10px;
}

.submitAdd, .submitDelete {
 text-align: center;
 margin: 5px 0 0 160px;
}

div.labelTab {
 float: left;
 width: 130px;
 text-align: right;
 margin-left: 100px;
 margin-right: 10px;
}

div.input {
 float: left;
 width: 650px;
 vertical-align: middle;  
}

div.output {
 width: 650px;
 text-align: left; 
 vertical-align: middle;  
 font-size: 1.2em;
 margin-left: 160px;
 color: #444;
}

div.output2 {
   border: 1px solid #ccc;
   padding: 2px;
   font-size: 1.2em;
   background-color: White;
   color: #444;
   margin-left: 160px;
   width: 400px;
}

div.output-table {

 width: 650px;
 text-align: left; 
 vertical-align: middle;  
 font-size: 0.9em;
}

.textbox 
{
   min-width: 454px;
}

.homeImg 
{
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.icon a:link 
{
   text-decoration: none; 
   vertical-align: middle;    
}

.icon a:visited 
{
   text-decoration: none; 
   vertical-align: middle;    
}

.icon a:hover 
{
   text-decoration: none; 
   vertical-align: middle;
}

.icon a:active 
{
   text-decoration: none; 
   vertical-align: middle;    
}

.right
{
   float: right;
}

/* jquery.ui.autocomplete.css class override */

.ui-autocomplete
{
   position: absolute; 
   cursor: default;
   max-height: 100px;
   overflow-y: auto;
   /* prevent horizontal scrollbar */
   overflow-x: hidden;
   /* add padding to account for vertical scrollbar */
   padding-right: 20px;
}

* html .ui-autocomplete
{
   width:1px;
   height: 100px;
}

É este o meu ficheiro CSS, já utilizo o "border:0" dentro do img mas em nada me alterou o meu problema..

Edited by Rui Carlos
Formatação do código.

Share this post


Link to post
Share on other sites
c.orelhas

Utilizo o IE 10, visto ser o que se encontra na empresa onde está o programa a funcionar. O programa nos outros browser funciona sem qualquer tipo desconfiguração nos botões, no IE é que apresenta sempre borders em cada botão..

Share this post


Link to post
Share on other sites
nelsonr

O que pode estar a acontecer é dependendo do encadeamento onde está a imagem, a border estar a ser sobreposta por outro estilo.

Num exemplo simples, funciona bem no IE10.

<html>
   <style>
       img
       {
           border:0;
           outline:none;
       }
   </style>
   <body>
       <a href="http://www.portugal-a-programar.pt">
           <img src="http://static.portugal-a-programar.org/images/banners/pap.png">
       </a>
   </body>
</html>

Edited by nelsonr

Share this post


Link to post
Share on other sites
c.orelhas

erroqe.jpg

Marquei com um traço vermelho o que acontece, faz aquele "border" em branco em torno do botão para efetuar o login.

Share this post


Link to post
Share on other sites
nelsonr

Experimenta por o border="0" diretamente no elemento da imagem (sem ser por CSS)

Share this post


Link to post
Share on other sites
c.orelhas

Caso coloque diretamente o border="0" no elemento da imagem, acaba por remover a imagem e coloca na mesma essa borda branca com um "x" lá dentro e a dizer: "Entrar".

Share this post


Link to post
Share on other sites
c.orelhas

Ora bom dia,

Após matar um pouco a cabeça para a resolução do problema que eu pensaria ser o que fiz de inicio "não era" devido a uns problemas dos computadores onde me encontro.

Resolvi o problema tão simples como:

No ficheiro CSS, inseri:

img {
  border:0;
  outline:none;
}

E resolvi desta forma o problema que antes aparecia, no entanto eu já tinha este pedaço de código mas os computadores desconfiguravam tudo, tal como até páginas como o público desconfiguram.

Obrigado a todos,

Cumprimentos

Share this post


Link to post
Share on other sites
nelsonr

Pois, o mais certo é que o IE estava a usar uma versão antiga do css, que estava em cache.

Normalmente forçando um refresh resolve (ctrl+F5)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.