Diferença entre Navegadores
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;
}float:left;
background:none;
display:inline;
}border:none;
color:#4355F3;
}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
Discussão (1)
Carregando comentários...