Multiplicité des feuilles de style et problème margin et padding

Bonjour,
Je voudrais transformer un site Xoops en Joomla. J'ai donc créé un template templatecreatorck bootstrapé de 1000 pixels de large, fluide.
La multiplicité des feuilles de style me laisse un peu perplexe car il reste du padding ou du margin qui empêche l'affichage correct du template.
Je recherche de l'aide pour rendre ce site exploitable par les différents navigateurs et les différents formats des téléphones portables et tablettes.
Mon premier souci concerne l'affichage de la bannière et du logo "Don", en haut, comme sur le site original. 820 pixels pour le logo et 180 pixels pour le don. Si je mets plus de 176 pixels pour le don, celui-ci passe à la ligne suivante. Il y a donc un espace (margin ou padding) qui empêche l'affichage correct.J'ai pourtant bien mis les espaces à zéro, j'ai même essayé ça :

#banner {
	width: 1000px;
	padding: 0 !important;
	margin: 0 !important;
}

#bannerlogo > div.inner > .bannerlogodesc {
	color: #a3a3a3;
	text-align: center;
	font-size: 13px;
	font-family: Arial, sans-serif;
}

#bannermodule {
	width: 176px;
}

#bannermodule > div.inner {
	background:  url(../images/header-logo.png) center center no-repeat;
	height: 160px;
	padding: 0 !important;
	margin: 0 !important;
}

Mais j'ai toujours 4 pixels de marge…
D'avance merci,
Fred
Les trois fichiers concernés, me semble-t-il, sont à récupérer sur Ci-joint (pour éviter de faire un message trop long) :
index, template et k2 (Ce fichier n'est pas concerné pour l'instant).

C'est pas évident de te répondre comme ça, je pense qu'il manque des infos parce que par rapport à ce que tu nous montre et ce qu'on voit il n'y a pas d'erreur.

Faudrait faire un jsFiddle pour exposer ton soucis on pourra mieux t'aider

Je dois t'avouer que je sue comme un gueux pour piger le fonctionnement de jsFiddle, ça va te paraître ballot mais je ne sais pas quoi mettre comme éléments dans les différentes fenêtres HTML CSS et JavaScript.
Merci de ton aide

Et avec les 2 fichiers fournis en bas de mon premier message (les 2 premiers liens) ?
Apparemment il y a beaucoup de feuilles de style qui peuvent interférer. Par exemple le fichier bootstrap.css...
De quoi as-tu besoin ?

J'essaie ça :
html :

<div id="banner">
		<div class="inner clearfix">
			<div id="bannerlogo" class="logobloc">
				<div class="inner clearfix">
					<?php if ($this->params->get('logolink')) { ?>
					<a href="<?php echo htmlspecialchars($this->params->get('logolink')); ?>">
					<?php } ?>
						<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/header-bg.png" width="820px" height="160px" alt="<?php echo htmlspecialchars($this->params->get('logotitle'));?>" />
					<?php if ($this->params->get('logolink')) { ?>
					</a>
					<?php } ?><a href="index.php/accueil/don"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/header-logo.png" width="[b]180px[/b]" height="160px" alt="logo don" /></a>
				</div>
			</div>
		</div>
	</div>

Et css :

#banner {
	width: 1000px;
	padding: 0 !important;
	margin: 0 !important;
}

#bannerlogo > div.inner > .bannerlogodesc {
	color: #a3a3a3;
	text-align: center;
	font-size: 13px;
	font-family: Arial, sans-serif;
}

#bannermodule {
	padding: 0 !important;
	margin: 0 !important;
}

#bannermodule > div.inner {
	padding: 0 !important;
	margin: 0 !important;
}

Résultat ici, le Logo don est poussé sur la ligne du dessous

Bonsoir,

A priori quelques erreurs HTML et CSS à corriger (cf validateur W3C), ça ne peut pas faire de mal
Lorsque je regarde ton code source, j'obtiens ceci :

<div id="banner">
&#8204;¶&#8204;&#8594;&#8204;&#8594;
<div class="inner clearfix">
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
<div id="bannerlogo" class="logobloc">
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
<div class="inner clearfix">
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
<a href="http://www.neurogelenmarche.org/">
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
<img width="820px" height="160px" alt="Logo Neurogel en Marche" src="/neurogelenmarche/templates/templateneurogel/images/header-bg.png">
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
</a>
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
<a href="/neurogelenmarche/index.php/accueil/don">
<img width="180px" height="160px" alt="logo don" src="/neurogelenmarche/templates/templateneurogel/images/header-logo.png">
</a>
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
</div>
&#8204;¶&#8204;&#8594;&#8204;&#8594;&#8204;&#8594;
</div>
&#8204;¶&#8204;&#8594;&#8204;&#8594;
</div>
&#8204;¶&#8204;&#8594;
</div>

Pour être plus explicite, il semble que ces retours chariot, espaces, ou caractères spéciaux mettent un peu la grouille...
Peut-être un problème d'encodage ?

Bref, en image :

Avec ces caractères :



Sans :

Bonjour 6120,
"Pour être plus explicite, il semble que ces retours chariot, espaces, ou caractères spéciaux mettent un peu la grouille...
Peut-être un problème d'encodage ?"
J'utilise Notepad++ et l'inspecteur de code de Firefox pour éditer les fichiers et je ne retrouve pas ces retours chariot ou autres qui polluent le code.
Quel outil utilises-tu pour éditer ce code ?
Pourrait-il s'agir de balises nbsb insérées dans le code ?

En effet, quand le fichier est édité en mode "Afficher les blancs et les tabulations" des petites flèches rouges apparaissent à la gauche de chaque ligne, et qui sont probablement des tabulations, mais je ne pensais pas qu'elles faisaient partie du code HTML ! ?
Y a-t-il un réglage de Notepad avant d'enregistrer ?
Merci de ton aide

Hello,

J'utilise Firebug pour Firefox.
Il n'y a, à ma connaissance pas de codage, pour une tabulation, le problème ne vient donc pas forcément de là.
Peut-être effectivement un souci avec notepad++ (voire la config), ou des espaces du côté PHP ?
Ce qui est étonnant, c'est que ce soit affiché comme des caractères spéciaux (un blanc et une flèche vers la droite) dans le code source, et que la suppression de ces caractères semble régler ton souci
Mais je fais "peut-être" fausse route... c'est une piste que je lançais