[SOLVED] Need help with small IE glitch

[jtrost]

Yeah, this is another one of those "IE doesn't work" threads.  Luckily, I think mine is just a small glitch, and I'm stuck finding the right CSS property to fix it.

 

Here's my page: http://travel2trinidad.com/dev/

 

The problem is that in IE the logo and the time/temp, which are suppose to lay over a div with a bg image, are going to the top of the page in IE, pushing everything else down.  Here's the code in question:

 

HTML:

<div id="logo">
    <div id="title">
        <img src="images/logo.png" onload="fixPNG(this)" />
        <br /><a onClick="javascript:bookmark('Travel 2 Trinidad','http://www.travel2trinidad.com');" href="#">Bookmark</a> | <a href="emailtofriend.php">E-Mail to Friend</a>
    </div>
    <div id="info">
        <script>document.write(calcTime('Trinidad', '-4.0'));</script>
         | Temp: 76 °
    </div>
</div>

 

CSS:

#page {
position:relative;
top:-1px;
width: 860px;
margin: 0 auto;
background: url(../images/img02.jpg) no-repeat;
}
#title {
    float:left;
    margin:15px;
    color: #fff;
}
#info {
    float:right;
    height: 20px;
    width: 160px;
    background-color: #fff;
    color: #000;
    border-left: solid 1px #000;
    border-bottom: solid 1px #000;
    padding: 5px;
    padding-top: 15px;
    filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85;
}

 

Any help would be appreciated.  Thanks!

[jtrost]

I posted the wrong CSS above.  Here's the correct code:

 

#logo {

padding: 0 0 150px 0;

background: url(../images/img01.jpg) no-repeat center bottom;

border-bottom: 1px solid #FFFFFF;

    width: 860px;
    margin: 0 auto;
}

[jtrost]

I did enough tweaking that I solved this problem myself.  What I did was set the height of the container div to 0, and that removed any excess height caused by the inner divs, thus forcing those inner divs to go inside the outter div.