Thu, 2013-05-02 12:15
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 : 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 : 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.
Fri, 2013-05-03 05:38
#1
hi, td { vertical-align: top
hi,
td { vertical-align: top }
solved the issue.