bug no ie quando misturamos span + border + padding

[bah 0]

ola galera,

colokem esse codigo pra testar:

 

 

<span style="border: 1px solid #808080;padding: 4px 8px 4px 9px;width: 10px;margin: 3px;font-weight: bold;background:white;">2</span>

e abram no internet explorer o teste...

não vai aparecer a linha superior

ff aparece certinho...agora na porcaria do internet explorer da errado

porq?

alguem tem uma solução pra isso?

se tiver, agradeço

abraços

[Giovani 104]

Se você tiver um link ai com todo o seu site fica mais fácil.

[bah 0]

link eu nao tenho porq eh localhost

mas tirei print do pedaço q ta dando problema:

[Giovani 104]

Algumas sugestões:1 - Não trabalhe com o css inline, faça um arquivo externo.2 - Crie uma div que englobe isso que você quer fazer e adicone um padding nela.3 - Isso tá com cara de menu, então você pode usar uma lista não ordenada para fazer.Qualquer dúvida, volte a postar![]´s

[bah 0]

opa amigo valew as dicasmas eh o seguinteo css ta externo...eu apenas colokei no style porq ficava mais facil, postava uma coisa sohe nao eh menumas pode ser consideradouma lista não ordenada ou uma div ficaria um por linha neh?daih f%$# tudotinha q ficar na verticaltentei colocar position absolute nelas mas daih ia da muito trampo pra por os left e ir contando e talz..pensei em algo mais facil...se alguem tiver uma solução..abraços...

[Giovani 104]

Sem querer, mas já sendo, chato, vamos evitar palavrões aqui no fórum, ok?

[Poe 0]

e nao eh menu

mas pode ser considerado

uma lista não ordenada ou uma div ficaria um por linha neh?

daih fode tudo

tinha q ficar na vertical

O que você está fazendo, no caso, não é um menu, mas é uma lista sim. E pelo que eu to vendo é uma lista de paginação.

 

Você pode colocar assim:

 

<div id="paginacao">
<ul>
<li><a href="1" title="página 1"><span class="none">Página</span> 1</a></li>
<li><a href="2" title="página 2"><span class="none">Página</span> 2</a></li>
<li><a href="3" title="página 3"><span class="none">Página</span> 3</a></li>
<li><a href="4" title="página 4"><span class="none">Página</span> 4</a></li>
<li><a href="5" title="página 5"><span class="none">Página</span> 5</a></li>
</ul>
</div>

 

Você(s) deve(m) estar se perguntando "por que diabos ele colocou esse SPAN aí?".

 

Vamos pensar em duas hipóteses para entender meu raciocínio:

[*]A pessoa usa um software leitor de tela: pessoas com deficiência visual usam softwares que lêem o conteúdo que está na tela, isso quer dizer que eles navegam de outra maneira e você precisa adequar o seu conteúdo a um formato lógico, deixando tudo explicado para pessoas que não possam ver (eu vivo brigando com esse lance do WAI, mas eu trabalho sempre pensando nisso, principalmente porque os sites que faço precisam funcionar pra todo mundo - e é uma tendência geral de quem sabe tratar a informação);

[*]Como esse material seria tratado no futuro por outros navegadores e editores de conteúdo: eu não sei como os padrões para acessibilidade vão se portar no futuro, mas isso aí já garante uma lógica mais voltada para as discussões de todos os documentos do WAI.

Qual a conclusão do SPAN? Ele serve para "sumir" com o nome "página", mas ele estará lá para leitores de tela e para possíveis impressões (um CSS de impressão poderia até eliminar o DIV "paginacao" (isso seria inteligente).

 

Observação: você pode mudar o ID para CLASS caso seja necessário fazer um "looping" usando várias vezes essa mesma folha de estilo.

 

No seu código CSS, você pode colocar o seguinte:

 

#paginacao ul {	padding: 0;	margin: 0 0 0 10px;	font-weight: bold;}#paginacao ul li {	width: 20px;	height: 15px;	text-align: center;	font-size: 11px;	list-style-type: none;	margin: 0 0 0 5px;	background: #F4F4F4;	border: 1px solid #C6D7E3;	display: block;	float: left;}#paginacao ul li a {	width: 20px;	height: 15px;	color: #003366;	text-decoration: none;	display: block;}#paginacao ul li a:hover {	text-decoration: none;	color: #FFFFFF;	background: #0066CC;}#paginacao .none {	display: none;}

Ah, sim, isso tudo funciona em todos os navegadores. Só não testei no Safari, mas como testei no Firefox, no Mozilla, no Opera e nos IEs 5/5.5/6/7 acho que vai rolar também nele (users de mac, confiram).

 

bah, esse tipo de dúvida é comum, mas eu garanto que se você ler com calma todos os tutorias e documentações, testar posicionamento, aprender de verdade o que o float faz e como as TAGS HTML se portam no default, tudo ficará mais simples e você poderá ir além.

 

Espero ter ajudado! :)

 

 

P.S.: Eu queria entender porque diabos a galera, de modo geral, se vicia tanto em position:absolut. Provavelmente é vício do layout com tabelas, mas eu ainda não consegui uma explicação exata! :/

[Giovani 104]

P.S.: Eu queria entender porque diabos a galera, de modo geral, se vicia tanto em position:absolut. Provavelmente é vício do layout com tabelas, mas eu ainda não consegui uma explicação exata! :/

É uma dúvida que também tenho. Eu acho que o pessoal deve usar o modo tela no DW...eu acho.

 

ÓTIMA explicação Poe!

[Guilherme Rambo 4]

Otimas explicacoes, o lance do position tbm queria entender, pq eu quase nunk uso-a ^_^

Eu acho que o pessoal deve usar o modo tela no DW

Tbm acho =/

[bah 0]

primeiramente: desculpe gio!...eh o costume....vou tomar mais cuidado com o q falo...agora..Poe...nao tem nem o q falar...mando muito bem kra...tu deu um tutorial aki na hora e talz...foi showeu nem testei ainda mas certeza q deu certo...sobre usar o absolute...nao sei...mas acho q eh algo rapido...seria do tipo:se poe o absolute o left top e talz e ja era...mas eu fui usar o absolute tamém porq nao manjo muito de csseh bem o basicão mesmotento aprender cada vez mais!e é com pessoas como voce Poe e todos do fórum que "ensinam a pescar",que nós leigos em css aprendemos...valewzao Poevalew a todos que deram atenção a minha duvidae mais uma vez, desculpe pelo palavrãofalowabraços

[Giovani 104]

Relaxa, não foi bronca não...é só para o pessoal maneirar mesmo. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Outra coisa, quer aprender a pescar?

 

CSS Link Colection

 

Artigos iMasters

 

Maujor

 

Volte sempre!

 

[]´s

[Guilherme Rambo 4]

Outra coisa, quer aprender a pescar?

Entra num site de pescaria! :P ^_^Mais um link bom: http://www.tableless.com.brTem gent q nau gosta desse site, mas eu aprendi bastant com ele http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Poe 0]

gio!, #INSIDE#, esse lance do position é mágico, mas eu tenho quase certeza que é preguiça de entender como funciona o CSS de verdade, as pessoas não conseguem colocar na cabeça que você trata os elementos da TAG e seus comportamentos na tela e que DIV e SPAN tem aplicações que podem ser, na maioria dos casos, substituidos por configuracoes direto em uma classe aplicada a uma TAG. Mas deixa pra lá, isso é discutir o sexo dos anjos! :D

 

 

bah, de nada cara, mas se eu fosse você eu testava, viu? Fiz isso na hora aqui e vai que tem algum bug.

 

 

Aliás, dá uma estudada legal, vai aprendendo praticando, porque pra entender de CSS, XHTML e afins é preciso entender os conceitos básicos - e eles são BEM simples, é mais fácil do que programar, eu diria que pra designer de web CSS é como diagramação de impressos!!! :D

 

Ultimamente as dúvidas do fórum andam mais "abertas", mas o eu tenho certeza que se a galera usasse o busca lá de cima ia encontrar respostas pra quase todas as dúvidas (é que tem gente que acha que fórum é helpdesk, lol :P )

 

Um abraço!

[Giovani 104]

é que tem gente que acha que fórum é helpdesk

Tem muita gente que aqcha isso.Esse fórum é muito rico em conteúdo pessoal, temos que aproveitar! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Guilherme Rambo 4]

Com certeza "o busca lah de cima"(gostei ^^) tem a solução pra sua vida, na maioria das vezes....

[bah 0]

eu testei sim Poe,deu certinho aqui...valew aih o link pessoalé que as vezes tem muito trabalho e talz então não da tempo de estudar...mai eu vo tenta tira uns 15 20 minutinhu do meu tempo e vo da uma estudada nelesvalew, brigadão pessoalabraços