Solved

Chrome vertical-align: down doesn't work.

Posted on 2011-02-27
10
1,580 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

860 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