Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jonathantts

Diferença entre Navegadores

Por , em Desenvolvimento frontend

Recommended Posts

Jonathantts    0

Jonathantts
Postado

Olá Colegas

 

Tenho pouco cnhecimento em HTML e CSS, mas o que tenho e o que eu aprendo por curiosidade na web consigo montar algo. Recentemente me deparei com um problema que a maioria de nós costumamos ter, a compatibilidade entre os navegadores. Construo o site com base no navegador Google Chrome, sei que preciso adaptar a todos, porém, por não saber muito de CSS e HTML e também ter visto algumas pessoas comentarem sobre a compatibilidade dos navegadores. Quero deixar meu site compativel apenas para com o Google Chorme (Versão Atual), IE (Versão 8 e 9), Firefox (Versão Atual). Gostaria muitissimo da ajuda de vocês!

 

Estou com um pequeno problema em uma box flutuante, onde no IE e Firefox eles ficam fora de linhamento. E aproveitanto utilizo o script "jquery.liquidcarousel.js" e "jquery-1.4.2.min.js" que no Internet Explorer não funciona, gostaria de saber como eu poderia resolver, colocando um aviso, quando um cliente visitar meu site com IE, para que ele instale tal java no IE ou posso adaptar?

 

Meu site bookyn.6serve.com/

 

Segue Código do CSS da Box Flutuante

 


*{margin:0px; padding:0px;}

#work {
list-style:none;
margin:0;
padding:0;
}
#work li {
float:left;
background:none;
display:inline;
}
#work li a {
border:none;
color:#4355F3;
}
#work p {
margin-bottom:0;
}

#work li .show{
display:inline-block 2px;
}
#work li .hide {
overflow:visible;
display:none;
background:gray;
position:absolute;
text-decoration:none;
}

.title {
text-align:center;
display:block;
overflow:visible;
text-decoration:none;
font-size:16px;
background:none;
text-shadow:none;
box-shadow:none;
margin:0;
padding:0;
}

.subtitle{
text-align:left;
left:auto;
display:block;
overflow:visible;
color:#999;
}

#work li:hover .hide .conetwork {
width:200px;
height:2px;
margin-top:10px;
display:block;
overflow:visible;
text-decoration:none;
color:#C30;
text-align:left;
}

#work li:hover .hide .network {
width:160px;
height:2px;
display:block;
overflow:visible;
text-decoration:none;
alignment-adjust:auto;
float:left;
margin:3px 3px;
padding-top:10px;
}

#work li:hover .hide{
height:155px;
padding:10px;
width:300px;
overflow:visible;
display: inline;
background:#FFF;
border:1px solid #CCC;
border-radius:2px;
box-shadow: 0 1px 5px #CCC;
-webkit-box-shadow: 1px 1px 7px #CCC;
-moz-box-shadow: 2px 3px 8px #CCCCCC;
top:184px;
margin-left:-190px;
}

#work li .hide::before {
content:url(../liquidcarousel/images/nav_marker_left.png);
display:inline-block;
width: 9px;
height: 17px;
position: absolute;
top:170px;
left:90px;
}

#work li:hover .show {
height: 0;
}

.botao {
padding: 6px 25px;
border: 1px solid #33F;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 3px;
background-color: #2D73F4 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2D73F4), color-stop(100%,#2D73F4)) !important;
background: -webkit-linear-gradient(top, #2D73F4, #2D73F4) !important;
background: -moz-linear-gradient(top, #2D73F4, #2D73F4) !important;
background: -ms-linear-gradient(top, #2D73F4, #2D73F4) !important;
background: -o-linear-gradient(top, #2D73F4, #2D73F4) !important;


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2D73F4', endColorstr='#2D73F4',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
font:bold "Arial,sans-serif" !important;
font-family:Arial, sans-serif;
font-style:normal;
font-variant:normal;
font-weight: bold;
vertical-align:top;
color: #FFF;
text-shadow: none;
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666;
cursor: pointer;
position: absolute;
margin-top: 105px;
opacity: 0.9;
}

.botao:hover {
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666;
background: -webkit-gradient(linear, left top, left bottom, from(#2D73F4), to(#2D73F4)) !important;
opacity:1.8;
}

.botao:active {
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666 !important;
}

.botaoepub {
padding: 20px 7px;
border: 3px solid #666;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 3px;
background-color: #999 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#999)) !important;
background: -webkit-linear-gradient(top, #999, #999) !important;
background: -moz-linear-gradient(top, #999, #999) !important;
background: -ms-linear-gradient(top, #999, #999) !important;
background: -o-linear-gradient(top, #999, #999) !important;


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#999',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
font:bold "Arial,sans-serif" !important;
font-family:Arial, sans-serif;
font-style:normal;
font-variant:normal;
font-weight: bold;
vertical-align:top;
color: #FFF;
text-shadow: none;
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666;
cursor: pointer;
position: absolute;
margin-top: 105px;
opacity: 0.9;
display:inline;
}

.botaoepub:hover {
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#999)) !important;
opacity:1.8;
}

.botao:active {
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666 !important;
}

.botaoPDF {
padding: 20px 7px;
border: 3px solid #CCC;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 3px;
background-color: #999 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#999)) !important;
background: -webkit-linear-gradient(top, #999, #999) !important;
background: -moz-linear-gradient(top, #999, #999) !important;
background: -ms-linear-gradient(top, #999, #999) !important;
background: -o-linear-gradient(top, #999, #999) !important;


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#999',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
font:bold "Arial,sans-serif" !important;
font-family:Arial, sans-serif;
font-style:normal;
font-variant:normal;
font-weight: bold;
vertical-align:top;
color: #FFF;
text-shadow: none;
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666;
cursor: pointer;
position: absolute;
margin-top: 105px;
opacity: 0.9;
display:inline;
}

.botaoPDF:hover {
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#999)) !important;
opacity:1.8;
}

.botao:active {
box-shadow: inset 0 0px 0px #fff, 0 0px 0px #666 !important;
}

 

Por favor Galera me ajudem, estou precisando muito!

 

Grato,

 

Jonathan Souza

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito