Solved

Chrome vertical-align: down doesn't work.

Posted on 2011-02-27
10
1,590 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

617 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