css position Firefox/opera/ie

[P@rm@nn 120]

Når jeg nå er hjemme i ferien tenke jeg at jeg skulle leke meg litt med css, og lagde i dag dette lille designet. Buggen ligger i overskriften. Det enkleste er om du ser den i både firefox og explorer/opera. I de 2 siste browserene så er overskriften langt oppe i toppen, mens i firefox ligger den fint riktig sted. Om jeg prøver å flytte den nedover ved f.eks top: 100px; så skjer det forskjellige ting i alle browserene;

opera: Ligger perfekt

Ie: Ligger fint, men øverste halvpart av fontene vises ikke.

Firefox: Skriften vises fint, men ligger for lavt.

Den aktuelle css koden er:

#banner {
       position: absolute;
top: 0px;
left: 20%;
padding: 0px;
margin-bottom: 20px;
}

#banner h1 {
font-family: Helvetica, Arial, sans-serif;
color: #CCCCCC;
font-size: 100px;
line-height: 18px;
font-weight: normal;
text-transform: uppercase;
}

Noen tips om hvordan jeg kan få overskriften til å vises likt i alle browsere?

[funkweb 426]

Jeg tok en titt, men ikke så grundig sjekk.. så jeg rask gjorde slik:

 

CSS:

body {
margin: 0;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
color: #666;
background-color: #fff;
}

img { border: 0; }

#banner h1 {
font-family: Helvetica, Arial, sans-serif;
color: #CCCCCC;
font-size: 100px;
text-transform: uppercase;
margin-top: -130;
margin-left: 250px;
}

 

Jeg fjernet noe smått i html filen:

 

<div id="banner">
<img src="img2.jpg" alt="Logo" width="187" height="140"><h1>Overskrift</h1></div>

 

--- Testet i IE, FF, Mozilla ---