flag not aligning with text in ie

the flag aligns ok with the text in firefox but not in ie

[philingle]

I have a small section of html that looks like this

<div id="flags">
<p>
<a href="/fr/index.php">
<img width="15" height="10" alt="Version Français" src="/images/frflag.gif"/>
</a>
<a href="/fr/index.php">Version Français</a>
</p>
</div>

and in firefox i get what I expect which is a flag with the text next to it.

however in ie7 the flag is some 30 or 40 px lower than the text, but still placed before it.

firebug shows that it is picking up the style
#sidebar p {
margin:0pt;
padding:0pt 0pt 5px 20px;
}
out of style.css

but that doesnt explain it for me.

I have tried throwing in
#flags p {
padding:0px;
}
and all that does is move it closer the the left edge of the page, doesnt bring the flag back up to where it should be.

Any ideas greatly appreciated.

[le_gber]

how about:
<div id="flags"><p><a href="/fr/index.php" id="french">Version Français</a></p></div>

and in the css
#flags a{ background-position:0 50%; background-repeat:no-repeat; display:block; padding:1em 0 1em 5em; }
#flags a#french{ background-image("/images/frflag.gif"); }

I've given a padding of 1em and 5 em not knowing the flag size, it's your job to adjust it ;).

If you have more than 1 flag consider using
<ul id="flags">
<li><a href="/fr/index.php" id="french">Version Francais</a><li>
<li><a href="/de/index.php" id="german">Deutsch</a><li>
...
</ul>

Instead of
<div id="flags">
<p><a href="/fr/index.php" id="french">Version Francais</a></p>
<p><a href="/de/index.php" id="german">Deutsch</a></p>
...
</div>

Fianlly, 'version' is feminine so it's Francaise

[le_gber]

BTW Welcome to WebmasterWorld [webmasterworld.com] philingle