Chrome vertical-align: down doesn't work.

Hi,

I have the following html code (attached).
the second line shold be align to the bottom and it is in in Ienternet-Explorer, but does not work in Chrome and FireFox






'<div id="items_div">'+
    '<table style="width: 100%; height: 100%" cellpadding="0" cellspacing="0">'+
	'<tr style="width: 100%; height: 50%; vertical-align: top" class="normal"><td><div id="a31"></div></td></tr>'+	
	'<tr style="width: 100%; height: 50%; vertical-align: bottom"><td class="normal" id="a32" style="vertical-align: bottom"></td></tr>'+	
    '</table></div>';

Open in new window

VapiSoftAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
VapiSoftConnect With a Mentor Author Commented:
I found the problem.
The problem is that Chrome/FF don't do vertical-align with height= percent,only when height = px

0
 
Rajkumar GsSoftware EngineerCommented:
In the CSS class function 'normal' anything doing for alignment ?

Also try more all style properties from <tr> to <td>

Raj
0
 
Rajkumar GsSoftware EngineerCommented:
Sorry!

I mean
Also try MOVE all style properties from <tr> to <td>

Raj

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Rajkumar GsSoftware EngineerCommented:
I think, it will work - if you apply style to <td>, instead of <tr>

Just try and let me know
Raj
0
 
ZadoCommented:
What effect do you need? For me it displays exactly the same in IE and Firefox: first <tr> above another, I mean one on the top, one on the bottom, is that what you need? Attach some screenshots, please, will be much easier and quicker to help you, thanks.
0
 
VapiSoftAuthor Commented:
IE align to bottom Chrom - the picture is ajcent to the text
I copied the style from the tr to the td and it didn't help.

About class=normal

thsi is the "normal" in the CSS

.normal {
      background-color: #eef5fb;
}

0
 
ZadoCommented:
Try to change "vertical-align:bottom" in second <tr> and <td> into "vertical-align:top":
<div id="items_div">
    <table style="width:100%; height: 100%" cellpadding="0" cellspacing="0">
        <tr style="width:100%; height: 50%; vertical-align:top" class="normal">
            <td style="vertical-align:top"><div id="a31"></div>
            </td>
        </tr>
        <tr style="width:100%; height: 50%; vertical-align:top">
            <td class="normal" id="a32" style="vertical-align:top">
            </td>
        </tr>   
    </table>
</div>

Open in new window

0
 
VapiSoftAuthor Commented:
I tried it,
It didn't help.
Why did you think it will help?
0
 
Rajkumar GsSoftware EngineerCommented:
Great!
Thanks to share this tip

Regards
Raj
0
 
VapiSoftAuthor Commented:
This is the only solution to the problem.
I gave myself the points so when other members look for a solution they will find it.
0
All Courses

From novice to tech pro — start learning today.