css duvida em firefox

Me and you

Power Member
alguem me pode explicar pk e que a propriedade width n funciona no firefox? acho isto muito esquisito.
exemplo:
a {width: 200px;background-color: #f00;padding: 4px;}
só me faz o padding, n poem o tamanho que lhe digo >(
se me poderem ajudar agradecia muito
 
alguem me pode explicar pk e que a propriedade width n funciona no firefox? acho isto muito esquisito.
exemplo:
a {width: 200px;background-color: #f00;padding: 4px;}
só me faz o padding, n poem o tamanho que lhe digo >(
se me poderem ajudar agradecia muito

Como é que raio queres definir o atributo width para um link? Isso não existe, dude ...
 
Testei esse código agora mesmo só para tirar a teima e no IE não dá. Revê lá as condições em que testaste o código porque realmente não funciona.
 
Não sei se é o que realmente queres fazer, mas adiciona lá a essas propriedades: display:block; a ver se faz o que queres... :\
 
Não sei se é o que realmente queres fazer, mas adiciona lá a essas propriedades: display:block; a ver se faz o que queres... :\

o problema é este mesmo, o link <a> é um elemento inline, ou seja é tratatdo como fosse texto, então width, height e outras propriedades não se aplicam ao mesmo.

Ao definires o <a> como display: block; indicas que ele não é simplesmente texto mas é um um bloco e neste sim, podes colocar width e height e muito mais e sabes que ele vai ter quebras de linhas antes e depois e que supostamente deverá ocupar a totalidade da linha onde se encontra.

http://www.w3.org/TR/REC-CSS2/box.html
 
fogo o não me dou mesmo bem com o firefox. olhem me este código
<html>
<head>
<style type="text/css">
ul {list-style-type: none;}
li {display: block;padding: 0px;margin: 0px;}
a
{
background-color: #c0c0c0;width: 130px;margin: 0px;display: block;padding: 4px 0px 4px 10px;border-bottom: 2px solid #000;font-style: italic;
font-family: times;font-size: 16px;text-decoration: none;border-left: 6px solid #808080;color: blue;
}
}
a:hover {border-left: 6px solid blue;text-decoration: underline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Omg</a></li>
<li><a href="#">Omg</a></li>
</ul>
</body>
</html>

funciona perfeitamente no ie mas no firefox não aparece o que kero em hover>(
ou tenho o firefox mal instalado ou sou mesmo noob em css
 
Dude, isso é mais incorrecto que eu sei lá. Estás a definir condições inválidas em quase tudo.

E esse código não funciona porque tens um } a mais, antes do a:hover.

Código que me parece fazer o que queres, mais ou menos:
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
}

li {
display: block;
padding: 0px;
margin: 0px;
background-color: #c0c0c0;
width: 130px;

}

li a {
margin: 0px;
padding: 4px 0px 4px 10px;
border-bottom: 2px solid #000;
font-style: italic;
font-family: times;
font-size: 16px;
text-decoration: none;
color: blue;
border-left: 6px solid #808080;
display: block;
}

li a:hover {
border-left: 6px solid blue;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Omg</a></li>
<li><a href="$">Omg</a></li>
</ul>
</body>
</html>
 
obrigado pela resposta ruimoura. pelo que percebi só posso então definir os "widths" nos "li"s.
já agr como posso saber que propriedades de css tem cada element? existe algum site?
 
Não se percebi a dúvida mas...

eis algumas coisas que gostava que me tivessem dito qd comecei:

- faz tudo certinho para o firefox, depois afina para o IE (por mais que te custe...)
- evita a propriedade inline sempre que possível, os browsers não aceitam mto bem (ainda) e dá as voltas q for preciso para isso.
- atribui id´s sempre q possível:
<li id="omg1">OMG1</li> no html
#omg1 {width:200px; float: left;} para css´s caso seja um menu horizontal.
Se for vertical, poe o ul dentro de uma div com 200px de width.
A parte do display:block é incontornável para o efeito hover.
- também é boa política por css´s num file à parte (identificas melhor os problemas)
- o Dreamweaver 9 (ou CS3) faz a validação de css´s. Identifica pelo menos os erros depois é preciso puxar pela cartola pra resolver.

Se queres mesmo dominar css´s e tens alguma pachorra (como eu), recomendo um livro que tira essas dúvidas todas num instante:
http://www.friendsofed.com/book.html?isbn=1590596145

Ou então, se não fores orgulhoso ou estiveres desesperado, saca o código daqui e não penses mais nisso...
http://www.dynamicdrive.com/style/csslibrary/category/C1/

Cheers.
 
eis algumas coisas que gostava que me tivessem dito qd comecei:
- evita a propriedade inline sempre que possível, os browsers não aceitam mto bem (ainda) e dá as voltas q for preciso para isso.

Tas engando, o display inline é bem aceite. Só que existem limitações para os atrubutos com esta caracteristica.

um link <a>, <strong>, <span>, <em> todos estes elementos são inline, são texto e são apresentados como texto seguindo o elemento anterior, seguindo o fluxo de renderização do HTML que geralmente é da esquerda pra a direita e de cima para baixo.

Agora em elementos inline, o width não funciona o height não funciona, os paddign e margin só funcionam para os lados (left, right)

- atribui id´s sempre q possível:

Mantem o código limpo e usa somente ID e CLASS se for mesmo preciso.

Se usares um titulo que se repete 5 vezes nas mesma página e 100 em todo o site convem usar CLASS e tens a vantagem de ao mudar esta class mudas em todo o site os elementos que pertecem a essa CLASS. Caso uma delas tenha uma particularidade então secalhar usas a mesma CLASS mas também lhe dás um ID, mas sabes que todas caracteirsticas que definires na CLASS vão ter efeito nesse tuitulo e com o ID podes definir mais caracteirsticas ou mesmo anular algumas definidas pela CLASS.

Penso que é uma questao de logica, e quantas mais CLASS usares provavelmente mais fácil sera gerir a apresentação do layout.

Imagina que atribuis a cada titulo anterior um ID cada página tinha 5 diferentes terias que os definir e mesmo que fossem só esses para o site todo já muito mais.

A parte do display:block é incontornável para o efeito hover.

Queres dizer que o hover só funciona com o display : block !!?
Tas enganado o hover funciona com inline e block e provavelmentes em outros "display" não suportado pela grande maioria dos browsers.

O ie é que só suporta essa a pseudo class "hover" para os links <a> seja estes inline (que são por default) ou blocks.
Mas FF, Opera e outros browsers suportam o hover nos <li>,<p>,<ol> em quase todos os outros elementos
 
Última edição:
Back
Topo