begginer's html help., problem with browsers Options

[BurgerKing316]

i'm experimenting with/learning html, and i want to know how to make something look the same in mozilla and ie.

how it looks in mozilla

how it looks in ie

i want it to look EXACTLY like it does in mozilla, in ie.

i'm not too smart with this, so i was wondering if anyone could help.

here is the code i used:

CODE

<table class="nav">
<tr>
<td>
<ul><li><a href="#">alcho</a></li><li><a href="#">riglant</a></li><li><a href="#">cremme</a></li><li><a href="#">dieordus</a></li><li class="last"><a href="#">flamboo</a></li></ul>
</td>
</tr>
</table>

<style type="text/css">
.nav {margin:0px;padding:0px;background-color:1BE4AD;display:block;}
.nav ul {margin:0px;padding:0px;display:inline;list-style:none;}
.nav li {margin:0px;padding:8px 0px;display:inline;border-right:1px solid white;}
li.last {border-right:0px;}
.nav a {padding:10px;font:normal 12px arial;text-decoration:none;background-color:000;}
.nav a:link, .nav a:visited {color:fff;}
.nav a:hover {background-color:777777;}
.nav a:active, .nav a:focus {background-color:333333;}
</style>

[venti-anemoi]

IE and FF add paddings in different ways. I can't remember which is which, but one of them will add the padding in addition to the width, and the other will include the padding as part of the width.

For example, if you specify a div as 100px wide and 200px long with a padding of 5px all around, one browser will make the div 100px by 200px but the content of the div will only take up 90px by 190px, and the other will make the div 110px by 210px with the content taking up 100px by 200px. (Does that make sense?)

I'm not sure if there's some kind of trick around this, but what I would do is make each link a set width and height (so all of them are the same width and height) and that way you don't have to worry about paddings.