Jump to content

Input Buttons Not Responding To Display Table-row


nachumk
 Share

Recommended Posts

I am playing with CSS and I am having trouble with display:table-row... here's my code: (I'm expecting the elements to be displayed veritcally)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><head><style type="text/css">.menu2 { display:table-row; }</style></head><body><input type = "button" class="menu2" value = "1"></input><input type = "button" class="menu2" value = "2"></input><input type = "button" class="menu2" value = "3"></input><input type = "button" class="menu2" value = "4"></input><em class="menu2">a</em><em class="menu2">b</em><em class="menu2">c</em><em class="menu2">d</em></body></html>What I see is like this:Chrome 3.0.195.27, Firefox 3.5.3:button1 button2 button3 button4abcdIE 8abcdNone of them align them as rows, and IE8 drops the buttons. I have tried wrapping elements in div and setting it to display:table. Doesn't help.I know I can use display:block, but I'm trying to understand this behavior.Thanks

Link to comment
Share on other sites

Elements with display: tabe-row are expected to have other elements with a table-cell display inside them. I don't recommend their use, because more likely than not, if you completely need data to be displayed as a table you actually need a table.Browser support for table, table-row and table-cell is kind of poor.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...