Ir para conteúdo

POWERED BY:

Arquivado

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

Tuk

[Resolvido] Cantos arredondados firefox

Por , em Desenvolvimento frontend

Recommended Posts

Tuk    0

Tuk
Postado

Bem, criei um layout com imagens com cantos arredondados, pensei que ao aplica-lo em html/css o maior problema seria o IE, porém vem sendo diferente, até agora consegui fazer funcionar em todos os navegadores menos o FF.

 

Para arredondar no IE utilizei Jquery.

Para arredondar no Chrome utilizei -webkit-border-radius:7px;

 

Tentei utilizar -moz-border-radius:7px; para arredondar no FF , mais parece que ele só aceita essa propriedade para bordas de imagens e divs, ele não arredonda os cantos da imagem. Sabem como resolver isso.

 

 

Link : www.gcr.6te.net

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gebezin    0

Gebezin
Postado

Bom, você quer fazer uma borda sem hover, arredondada?

Se sim, tenta isso:

-moz-border-radius:7px;border: 1px solid white; /*A mesma cor do fundo */

Caso contrário, não sei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tuk    0

Tuk
Postado

tipo, isso funciona com divs, mais não com imagens. Eu queria saber um modo de fazer com imagens, já consegui em todos os navegadores menos o FF

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gebezin    0

Gebezin
Postado

jquery não é uma alternativa? xD

 

Dei uma pequena googlada: http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/

 

Não sei se funciona como quer, por o seu real problema é a grossura da borda, se a borda fosse 1 ou 2 isso não estaria acontecendo..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara... usa jQuery para todos... não use as regras proprietárias.. apenas use jQuery para arredondar em todos os navegadores.

 

mostre como você tentou fazer, que 'só funcionou jQuery no IE'

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tuk    0

Tuk
Postado

http://www.malsup.com/jquery/corner/

 

utilizei esse plugin para arredondar

 

No código existe essa linha

noBottomFold = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8),

não foi resolvido

 

então pessoal , só falta isso pra mim terminar o site.

 

Preciso conseguir arrendondar os cantos de uma <img> no Firefox, já consegui em todos os outros navegadores. Estou a procura de uma solução Jquery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Caxito    0

Bruno Caxito
Postado

Eu tive esse problema uma vez, depois de pensar um pouco eu fiz o seguinte.

Criei uma tabela de 3 colunas e 3 linhas e coloquei imagens de fundo em cada uma delas.

 

tá aqui o codigo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Exemplo de conteiner com bordas arredondadas.</title>
</head>

<body style="background-color: #069;">
 <table style="border-collapse: collapse; margin: 5px 0px 0px 0px;">
 	<tr>
        <td style="width: 25px; height: 28px; background-image: url(esquerda_cima.png);"></td>
        <td style="background-image: url(cima.png);"></td>
        <td style="width: 28px; background-image: url(direita_cima.png);"></td>
	</tr>
 	<tr>
        <td style="background-image: url(esquerda.png);"></td>
        <td style="background-image: url(centro.png); padding: 0px; width: 500px; text-align: justify;">
           'Afirmações extraordinárias requerem evidências extraordinárias'*. Por
            exemplo, se eu digo que estou escrevendo este glossário usando um teclado
            bege, poucos pedirão evidência desta afirmação nada extraordinária. Mas se
            eu disser que estou escrevendo este glossário através de telepatia, qualquer
            pessoa normal duvidará e pedirá evidência extraordinária. É um mandamento de
            bom-senso, e contrapõe um argumento comum dos crédulos de que os céticos
            duvidam de tudo.
        </td>
        <td style="background-image: url(direita.png);"></td>
 	</tr>
 	<tr>
        <td style="height: 28px; background-image: url(esquerda_baixo.png);"></td>
        <td style="background-image: url(baixo.png);"></td>
        <td style="background-image: url(direita_baixo.png);"></td>
	</tr>
 </table>
</body>
</html>

Aqui você pode baixar meu exemplo com as imagens, assim você pode ver como ficou

http://rapidshare.com/files/423162439/Bordas_imasters.rar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tuk    0

Tuk
Postado

Alkaeda, eu quero as imagens arredondadas, não só a borda delas, se você der uma olhada no link utilizando IE8 ou Chrome verá qual o meu objetivo.Nos outros navegadores está perfeito, só não funcionou no FF, e é essa solução que estou esperando.

 

Link : www.gcr.6te.net

 

Bruno Caxito

 

Já pensei nessa solução também, mais utilizar divs com background-images puxando as imagens de um banco de dados não me parece muito semantico.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Randal, acho que me expressei mal. Quando falei borda, estava me referindo ao extremo da imagem.

 

Olha o teste que fiz http://img716.imageshack.us/img716/3831/testeround.jpg . Nele, no evento mouseover parece estar certo a configuração, pois a borda está interna, então quem está recebendo o canto arredondado é a imagem mesmo. Por isso disse para reler o seu código, pois parte dele está funcionando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

O Firefox NÃO ARREDONDA cantos de imagens, apenas o chrome atualmente faz isso.

Já tentei todas as gambiarras possíveis, como overflow: hiden, mas nada funciona...

 

O jeito é apelar para o Javascript mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Boa tarde,

 

Olha eu testei o plugin (jQuery Corner) em vários navegadores (Firefox, Internet Explorer (6,7,8), Chrome, Safari e Ópera) e todos corresponderam ao esperado, ou seja, cantos arredondados na imagem.

 

O código que utilizei foi este:

 

Links para o Jquery e para o Jquery Corner

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>

<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.06">
</script>

Javascript (Jquery)


<script type="text/javascript">

$.fn.corner.defaults.useNative = false;

$(document).ready(function(){
        $("#imgBox").corner("10px");
    });

</script>

CSS

<style type="text/css">

#imgBox, #imgBox img { width:276px; height:135px; margin:0;padding:0; }

</style>

XHTML

<div id="imgBox">
  	<img src="imagem.jpg" width="276" height="135" alt="foto" />
</div>

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tuk    0

Tuk
Postado

Valeu galera! Resolvido!

 

faltava essa linha no meu js

$.fn.corner.defaults.useNative = false;

Adicionei ela, acertei meu css e ficou perfeito.

Obrigado a todos

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