Alignment - How can I fix it?

1 reply [Last post]

Thu, 2013-05-02 12:15

raysefo

Offline

Regular

Last seen: 7 years 30 weeks ago

Timezone: GMT+3

Joined: 2010-11-18

Posts: 25

Points: 39

Hi,

I have a web page (http://s20.postimg.org/sc7c06gvx/Fire_Shot_Screen_Capture_003.png) and the team names are NOT aligned properly in FF and IE9. (Helsinki is a little bit lower) However it is OK in chrome. How can I fix this alignment problem?

Here is my sample css:

body
{
    background-color: #c8c8c8;
    margin: 0;
    padding: 0;
    font-family: Arial,Helvetica,sans-serif;
}
#bahisdis
{
    width: 90%;
    height: 100%;
    overflow: hidden;
    margin: auto;
    z-index: 10;
}
#bahisresim {
    margin-top: .5em;
    width: 100%;
    height: 40%;
    overflow: hidden;
    text-align: center;
 
    background-image: url(Images/stadium.jpg);
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    z-index: 10;
    top: 0;
}
#aaa
{
    margin: 0 3.5em;
    height: 40%;
    z-index: 10;
}
ul
{
    list-style-type: none;
    margin: 0 1em;
}
.hisse
{
    font-size: 2.5em;
    font-weight: 700;
    color: #fefffc;
    text-align: center;
    z-index: 10;
    margin-top: .5em;
     margin-bottom: .5em;
}
.takimadi
{
    font-size: 4em;
    font-weight: 700;
    color: #fff;
    z-index: 10;
    white-space: nowrap;
}
.small
{
    font-size: 2.9em;
    font-weight: 700;
    color: #fff;
    z-index: 10;
    white-space: nowrap;
}
#takimadi1
{
    text-align: right;
    padding-right: .35em;
    margin-bottom: .5em;
    z-index: 10;
}
#takimadi2
{
    text-align: left;
    padding-left: .01em;
    margin-bottom: .5em;
    z-index: 10;
}
#baslik
{
    height: 6%;
    font-size: 3em;
    line-height: 1.6em;
    vertical-align: middle;
    color: #fff;
    background-color: #900;
    text-align: center;
}
.satir
{
    margin-top: .05em;
    margin-bottom: .05em;
    color: #fff;
    text-align: center;
}
.Nogames
{
    margin-top: 1.7em;
    margin-bottom: .3em;
    color: #151515;
    text-align: center;
    font-size: 4em;
}
.oran1_1
{
    width: 100%;
}
.oran1_6
{
    width: 16.6%;
}
.oran1_8
{
    width: 16.9%;
}
.oran1_9
{
    width: 16.9%;
}
.oran1_10
{
    width: 10%;
}
.satiricibaslik
{
    background-color: #c00;
    color: #fff;
    font-weight: 700;
    font-size: 1.5em;
}
.tablo
{
    font-size: 1.3em;
    text-align: center;
    empty-cells: hide;
}
.tkod
{
    font-size: 1.1em;
    background-color: #333;
    color: #fff;
    font-weight: 700;
}
.tbaslik
{
    background-color: #fff;
    color: #666;
    font-weight: 700;
}
.toran
{
    font-size: 1.5em;
    background-color: #fff;
    font-weight: 700;
    color: #000;
}
.trau
{
    background-color: gray;
}
.blocked
{
    background-color: #bdbdbd;
}
.hide
{
    display: none;
}
.show
{
    display: table-cell;
}
.showNewGames
{
    display: block;
}
.display
{
    display: block;
}
.other
{
    font-size: 1.5em;
    background-color: #fff;
    font-weight: 700;
    color: #000;
}
#bahisdis1
{
    width: 90%;
    height: 100%;
    overflow: hidden;
    margin: auto;
}
#bahisresim1 {
    width: 100%;
    height: 40%;
    overflow: hidden;
    text-align: center;
    background-image: url(Images/ball1.jpg);
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    z-index: 10;
    top: 0;
}
.hisse1
{
    font-size: 2.5em;
    font-weight: 700;
    color: #000;
    text-align: center;
    z-index: 10;
    margin-top: .5em;
}
#aaa1
{
    margin: 0 4em;
    height: 40%;
}
.takimadi1
{
    font-size: 4em;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}
#takimadi11
{
    text-align: right;
    padding-right: .35em;
    margin-bottom: 1em;
    z-index: 10;
    color: #000;
}
#takimadi21
{
    text-align: left;
    padding-left: .01em;
    margin-bottom: 1em;
    z-index: 10;
    color: #000;
}
#baslik1
{
    height: 6%;
    font-size: 3em;
    line-height: 1.6em;
    vertical-align: middle;
    color: #fff;
    background-color: #900;
    text-align: center;
}
h2 span
{
    display: none;
    z-index: 999999;
    font-size: 10em;
    font-weight: 700;
    font-family: Agency FB;
    text-align: center;
    color: green;
}
h2
{
    position: fixed;
    top: 40%;
    left: 40%;
    text-align: center;
}
.time
{
    position: fixed;
    font-size: 1em;
    font-weight: 700;
    bottom: 1em;
}
.kartgol{
    color: #000;
    font-size:0.9em;
    height:60%;
    text-align: left;
    vertical-align:top;
 
}
.sarikart1{
    padding-bottom: .8em;
    white-space: normal  ;
}
.sarikart2{
    padding-bottom: .8em;
    white-space: normal  ;
}
div.sarikart1:before{
    content: 's';
    color:yellow;
    width:1em;
    display: inline-block;
    background-color: yellow;
}
div.sarikart2:before{
    /*content: 's';*/
    color:yellow;
    width:1em;
    display: inline-block;
    background-color: yellow;
}
.kirmizikart1{
    padding-bottom: .8em;
    white-space: normal  ;
}
.kirmizikart2{
    padding-bottom: .8em;
    white-space: normal  ;
}
div.kirmizikart1:before{
    content: 'k';
    color:red;
    width:1em;
    display: inline-block;
    background-color: red;
}
div.kirmizikart2:before{
    /*content: 'k';*/
    color:red;
    width:1em;
    display: inline-block;
    background-color: red;
}
.goller1{
    white-space: normal  ;
}
.goller2{
    white-space: normal  ;
}
div.goller1:before {
    content: '.';
    color: aqua;
    width: 1em;
    display: inline-block;
    background-image: url(Images/Soccer-icon.png);
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
div.goller2:before {
    /*content: '.';*/
    color: aqua;
    width: 1em;
    display: inline-block;
    background-image: url(Images/Soccer-icon.png);
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

<div id="panel1" class="display">
                    <div id="bahisresim" class="showNewGames">
                        <div id="aaa">
                            <table style="width: 100%; height: 100%; border-collapse: collapse;">
 
                                <tr>
                                    <td style="width: 50%">
                                        <div id="takimadi1" class="takimadi">INTER TURKU :&nbsp;0</div>
                                        <div class="kartgol">
                                            <div class="sarikart1">
                                                1'Player1 2'Player2 15'Player3 22'Player4 33'Player5 44'Player6 50'Player7
                                            </div>
                                            <div class="kirmizikart1">
                                                1'Player8 2'Player12 55'Player13 66'Player17 78'Player4
                                            </div>
                                            <div class="goller1">
                                                10'Cenk 20'Player5 30'Player7
                                            </div>
                                        </div>
                                    </td>
                                    <td style="width: 50%">
                                        <div id="takimadi2" class="takimadi"> - 0&nbsp;: HELSINKI </div>
                                        <div class="kartgol">
                                           <div class="sarikart2">
 
                                            </div>
                                            <div class="kirmizikart2">
 
                                            </div>
                                            <div class="goller2">
 
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <div id="hisse" class="hisse">1. Hissə</div>
                                </tr>
                            </table>
                        </div>
                    </div>

Best Regards.

Tags:

CSS Layouts

Fri, 2013-05-03 05:38

raysefo

Offline

Regular

Last seen: 7 years 30 weeks ago

Timezone: GMT+3

Joined: 2010-11-18

Posts: 25

Points: 39

hi, td { vertical-align: top

hi,

td { vertical-align: top }

solved the issue.

Alignment - How can I fix it?

hi, td { vertical-align: top

User login

Navigation