CSS positioning - relative positioning issue - html

Question

Ive created a website but I noticed the navigation bar was slightly off using IE browser. I have read that position:relative may be the key but when I apply it the navigation bar doesn't respond to position commands (top, left, etc.)at all in IE, and would appear in different locations with FF browser when reloaded a few times.
Please could I get advice on which method is standard for getting correctly positioned elements with different browsers, and also tell me where I'm going wrong with changing my navigation bar divs from absolute to relative>
Much appreciated
code hints: Page comprises of company logo (id=banner) floated left, a small list of towns and phonenumber (id=info) all floated right. Navigation bar is in list form and I used block:inline command to so the list reads from left to right.
/* ----All page selectors---- */
body{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-size:16px;
}
.page {
position: relative;
margin-left:auto;
margin-right:auto;
background-color: rgba(255,255,255,0.4);
font-family: gabriola, Verdana, Geneva, sans-serif;
color: #383838;
font-weight: bolder;
}
.banner a{
color: black;
text-decoration: none;
letter-spacing:10px;
}
#bannerText{
text-align:center;
}
.banner{
font-family: sans-serif, Verdana, Geneva;
}
#phonenum{
font-family: sans-serif, Verdana, Geneva;
}
#info{
font-weight:bold;
color: #505050;
line-height:110%;
}
ul a{
color: #383838;
}
/* ----Desktop only---- */
#media screen and (min-width:481px) {
body{
background-image: url("images/water.jpg");
}
#info{
font-size: 200%;
float: right;
right:0px;
width: 230px;
margin: 15px 25px 0px 0px;
padding:15px 5px 5px 5px;
}
#info ul{
margin:0px;
padding-left:63px;
}
#phonelogo{
float:left;
width:30px;
}
#phonenum{
float:right;
width: 190px;
margin:0%;
font-size: 80%;
font-family: sans-serif, Verdana, Geneva;
}
.banner{
float:left;
padding-top:1px;
margin-left: 18px;
opacity: 0.7;
}
#banner{
margin-top: 20px;
}
.banner p{
margin:0px;
}
#bannerText{
letter-spacing: 5px;
margin-bottom:5px;
padding-left:5px;
}
.btn{display:none;}
#toolbar {
position: absolute;
margin:220px 0px 0px 16px;
opacity: 0.7;
}
.menu li a{
font-family: gabriola, Verdana, Geneva, sans-serif;
font-size: 140%;
font-weight: bold;
text-decoration: none;
color: black;
margin-right:30px;
}
.nav{
position: absolute;
list-style-type: none;
top:10px;
left:-33px;
}
.nav ul li{
display: inline;
}
.nav ul li a{
font-family: gabriola, Verdana, Geneva, sans-serif;
font-size: 140%;
font-weight: bold;
text-decoration: none;
color: black;
}
.nav ul li a:hover{
color: yellow;
}
<div id="homePage" class="page">
<div class="banner">
<p id="banner">
<a href="index.htm"><img src="images/Logo.png" alt="
Logo for site" /></a>
</p>
<p id="bannerText"><a href="Slogan link.htm">
Slogan under the Logo</a></p>
</div>
<div id="info">
<table>
<tr>
<td id="phonelogo"><img src="images/phoneimage.png" alt="
Mobile phone image" /></td>
<td id="phonenum">[phone]</td>
</tr>
</table>
<ul>
<li>Town A</li>
<li>Town B</li>
<li>Town C</li>
</ul>
</div>
<div id="toolbar">
<div>
<p id="toolBackground">
<img src="images/toolBackground.png" alt="
Coloured background for toolbar" />
</p>
</div>
<div class="dropdown">
<ul class="nav">
<li><img class="btn" src="images/menuIcon.png" alt="
Menu button for mobile site version" />
<ul class="menu">
<li>Page1</li>
<li>Page1</li>
<li>Page1</li>
<li>Page1</li>
<li>Page1</li>
<li>Page1</li>
<li>Page1</li>
</ul>
</li>
</ul>
</div>
</div>

Answer 1

Always use a css reset so the styling is the same between browsers.
Very minimal css reset I always use:
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
Then everything should look (mostly) the same between browsers.
Also keep in mind display: inline-block; adds spaces between elements based on the font-size.