margin-top
От: kuzbas22  
Дата: 17.11.10 03:56
Оценка:
При некоторых условиях margin-top работает некорректно
см в примере текст в нижнем квадрате

<html>
<head>
<style>
div.mainView
{
    flow:grid;
    width:*;
    height:*;
    border-spacing:4px;
    margin:10px;
}
div.leftPlayer
{
    top:1#;
    left:1#;
    width:234px;
    height:*;
    //border:1px solid #fff;
}
div.tableView
{
    top:1#;
    left:2#;
    width:*;
    height:*;
    flow:horizontal;
    padding:2px;
}
div.rightPlayer
{
    top:1#;
    left:3#;
    width:234px;
    height:*;
}
div.myPlayer
{
    top:2#;
    left:1#;
    right:3#;
    width:*;
    height:210px;
    flow:horizontal;
}

div.userPanelL
{
    width:100px;
    height:100px;
    color:white;
    background-color:black;
}
div.userPanelR
{
    width:100px;
    height:100px;
    margin-left:*;
    color:white;
    background-color:black;
}

div.userPanelB
{
    width:100px;
    height:100px;
    margin-right:25px;
    margin-left:120px;
    margin-top:50px;
    color:white;
    //display:none;
    background-color:black;
}

p.uName
{
    margin-top:15px;
    margin-left:70px;
}
p.uState
{
    margin-left:70px;
}

</style>
</head>
<body>
<div class = mainView>
    <div class = leftPlayer >
        <div class = userPanelL>
            <p class=uName  id = idU1Name />
            <p class=uState id = idU1State />
        </div>
        <div class = cardsViewL />
    </div>
    <div class = tableView >

    </div>
    <div class = rightPlayer >
        <div class = userPanelR>
            <p class=uName  id = idU2Name />
            <p class=uState id = idU2State />
        </div>
        <div class = cardsViewR />
    </div>
    <div class = myPlayer >
        <div class = userPanelB>
            <p class=uName  id = idU3Name />
            <p class=uState id = idU3State />
        </div>
        <div class = cardsView>
        </div>
    </div>
</div>         
<script type="text/tiscript">
    self.$(#idU1Name).html="test";
    self.$(#idU2Name).html="test";
    self.$(#idU3Name).html="test";

</script>
</body>

</html>
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.