Jump to content

Compatibilidade IE


c.orelhas

Recommended Posts

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..

Link to comment
Share on other sites

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="https://www.portugal-a-programar.pt">
           <img src="https://static.portugal-a-programar.org/images/banners/pap.png">
       </a>
   </body>
</html>
Link to comment
Share on other sites

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

Link to comment
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.