Alignment Problems

[BillyBoB]

I have a div inside a div that should align somehow to the top corner. In Firefox/IE which are the main browsers the div is automatically aligned to the bottom. In Opera/Safari the div is automatically aligned to center. I have the problem of aligning both to top. When I add a simple top: -29px it works for Firefox/IE but then it is too far for Safari/Opera. I really would like them to work for all browsers.

 

The css is:

#ChatTabs {
width: 100%;
height: 39px;
text-align: left;
}

.ChatTab {
width: 96px;
height: 28px;
background: url('../images/ChatTab.jpg') no-repeat;
padding: 11px 0px 0px 21px;
margin-right: 4px;
float: left;
}

.ChatClose {
display: inline;
width: 5px;
height: 5px;
padding-right: 2px;
float: right;
}

.CloseBtn {
background: url('../images/icons/CloseUp.jpg') no-repeat;
}

.CloseBtn:hover {
background: url('../images/icons/CloseDown.jpg') no-repeat;
}

 

The html is:

<div id="ChatTabs">
<div class="ChatTab">Main Channel</div>
<div class="ChatTab">alyis<div class="ChatClose"><a href="#"><img src="../images/spacer.gif" alt="Close" style="width: 5px;" class="CloseBtn"></img></a></div></div>
<div class="ChatTab">fluidman<div class="ChatClose"><a href="#"><img src="../images/spacer.gif" alt="Close" style="width: 5px;" class="CloseBtn"></img></a></div></div>
</div>

 

If you would like to see a live demo then go to http://syckgamingleague.com/ and sign-in username: Test. Password: test123. Then click chat at top.

[rarebit]

Have a look at the position tag