Inline-block margin extra

[D2th3 3]

Amigos,

 

Ocorreu uma anomalia em uma montagem de site.

Quando montei o menu superior do site (principal) distribuí os links usando a propriedade display:inline-block. Prevendo que esse elemento gera uma margem extra (normal), calculei o espaçamento pensando nisso.

 

header nav#mnuPrincipal{
	text-align: right;
	display: block;
	height: 35px;
	width: 800px;
	position: absolute;
	z-index: 53;
	top: 54px;
	right: 0px;
}
header nav#mnuPrincipal a{
	font-family: 'PT-Sans-Narrow-Bold', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	display: inline-block;
	margin: 0px 0px 0px 17px;
	padding: 10px 7px 0px;
	height: 25px;
	position:relative;
}

O fato curioso é:

 

1) Quando faço o HTML manual, os navegadores renderizam o menu com essa margem extra. Observe: http://budo.dheva4.com/lay.php

 

2) Quando gero o HTML usando o PHP, o menu fica renderizado sem a margem extra do inline-block. Observe: http://budo.dheva4.com/

 

 

Alguém já viu isso ocorrer?

Tem algum solução?

[William Bruno 1501]

Cara, a diferença creio que está na quebra de linha entre os itens.

 

Qndo vc gerou com php, todas as tags <a> ficaram em uma linha só. Qndo vc fez manual, ficaram uma em cada linha.

O seu html está interpretando as quebras de linha como "um caracter", por isso o espaço extra.

 

 

Se vc fizer com float:left no lugar do inline-block, fica igual nas 2 versões, e essa diferença da quebra de linha não ocorre.

[D2th3 3]

Vou verificar alterando a versão em HTML.

Sobre o Float:left, nesse caso não irá me atender, pois baseei a navegação pela margem da direita, e se coloco float Right ele inverte os itens, sendo o Home ficaria na margem da direita e os demais itens voltando, nesse formato tenho que alterar outras hirarquias no CMS para ordenar corretamente.

 

Obrigado.

[William Bruno 1501]

No seu topo, tem varios position absolute desnecessários.

 

Se vc usar float left nas tags <a>, e float right na NAV, ai fica alinhado a direita como vc quer.