Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Chrome vertical-align: down doesn't work.

Posted on 2011-02-27
10
Medium Priority
?
1,593 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

670 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