Solved

Chrome vertical-align: down doesn't work.

Posted on 2011-02-27
10
1,586 Views
Last Modified: 2012-08-14
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

0
Comment
Question by:VapiSoft
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34991408
In the CSS class function 'normal' anything doing for alignment ?

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

Raj
0
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34991409
Sorry!

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

Raj

0
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34991414
I think, it will work - if you apply style to <td>, instead of <tr>

Just try and let me know
Raj
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 8

Expert Comment

by:Zado
ID: 34991424
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
 

Author Comment

by:VapiSoft
ID: 34991537
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
 
LVL 8

Expert Comment

by:Zado
ID: 34991572
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
 

Author Comment

by:VapiSoft
ID: 34991596
I tried it,
It didn't help.
Why did you think it will help?
0
 

Accepted Solution

by:
VapiSoft earned 0 total points
ID: 34994186
I found the problem.
The problem is that Chrome/FF don't do vertical-align with height= percent,only when height = px

0
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34994395
Great!
Thanks to share this tip

Regards
Raj
0
 

Author Closing Comment

by:VapiSoft
ID: 35034685
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question