Deux div de tailles identique dont une contient un svg

Bonjour à tous,

Je suis en train de créer le menu d'un site internet qui sera accessible uniquement en 3G. Donc le plus optimisé et léger possible. J'essaye de faire en sorte qu'il soit le plus propre possible, notamment au niveau des "font-size" en "em". Dans le cas de mon menu "nav", j'ai une image et un texte qui correspondent à une rubrique. Je souhaite que la hauteur de l'image en question soit calée sur la hauteur du texte. Et si l'utilisateur augmente la taille de référence du texte, l'image associée se cale sur la même hauteur. Au passage, je précise que mon image est en réalité un svg dans une balise <object>.

Voici mon code :

        <nav>
        	<ul>
            	<li class="menuleft"><a href="" title="Chaudière 1"><object class="img" type="image/svg+xml" data="Img/IC-nav-chaudière.svg"></object><div class="txt">Chaudière 1</div></a></li>
                <li><a href="" title="Chaudière 2"><object class="img" type="image/svg+xml" data="Img/IC-nav-chaudière.svg"></object><div class="txt">Chaudière 2</div></a></li>
                <li><a href="" title="Chaudière 3"><object class="img" type="image/svg+xml" data="Img/IC-nav-chaudière.svg"></object><div class="txt">Chaudière 3</div></a></li>
            </ul>
        </nav>

et le css :

nav 			{padding:0 10%; font-size:1.1em;}
nav ul 			{margin:0; padding:0; display:flex; flex-direction:row; flex-wrap:wrap;}
nav li 			{padding:0 20px; border-left:1px solid #CCC;}
nav li a 		{color:#FFF; display:table;}
nav li a:hover	{color:#0076da;}
nav .menuleft 	{padding:0 20px 0 0; border:none;}
nav .img 		{border:#C114F0 1px solid; display:table-cell;}
nav .txt 		{border:#09F0E5 1px solid; white-space:nowrap; display:table-cell;}
nav object 		{border:#F50707 1px solid;}

Je ne sais pas si j'ai été compréhensible et merci d'avance pour votre aide

et comme une image vaut mieux que de long discours :
http://img15.hostingpics.net/pics/321332erreur.jpg
Modifié par Curiosity_U5832 (22 Jan 2016 - 13:48)