Basically the problem I have is that in Safari/Chrome it is changing the width of my columns even though I have specified a) a width on the table, b) table-layout:fixed, and c) specific widths on my first row that when added with the padding and border values add up to the width of the table specified. In IE7 and Firefox 3 the table is rendered the same. But in Safari/Chrome it decides to make the second column bigger by taking space from the other columns.
Any ideas? I have a very simple sample page that you can look at, as well as an image showing how the table is rendered in all three browsers for comparison.
In buggy webkits, table-layout: fixed also gives your table cells box-sizing: border-box. One alternative to browser detection is explicitly set box-sizing: border-box to get consistent behavior across browsers, then adjust your widths and heights accordingly (widths and heights must be increased to include padding and borders).
#my-table td {
box-sizing: border-box;
}
I was able to get around this problem by removing the padding from the <th> with the fixed width. You can then safely add padding to the <td>
After looking around, I think that this is caused by the following webkit bugs: 13339 and 18565. Basically a problem with how it uses the border and padding values in calculating the final width of the columns.
I ended up doing some browser-sniffing and setting some different css values based on that for webkit browsers so that the final rendering was the same as FF and IE.
Have you tried loading some Reset CSS?
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I made a Kendo grid have table:fixed-width. All the columns disappeared but only in Safari. Upon inspection, the td elements all have a computed style width of -3px. If I remove table:fixed-width, it's fine. If I specify custom pixel widths (but not percentages), it's fine. If I disable every style applied from every css source I can find (in the console style tab), the problem is not fixed it and nothing there sets width -3px.
So I have to either set all the column pixel widths or else not use table:fixed-width.
Related
I set 2 <input>'s heights as 2em using CSS, but the heights are rendered differently in Google Chrome. Here's a Fiddle that shows this: http://jsfiddle.net/hA4eD/1/
In my computer, using Chrome's Dev tools, the text input has a height of exactly 32 pixels while the button input has a height of 28.79999... pixels. How do I make them equal without manually adjusting the number of pixels?
please add webkit appearance property as none value...
Fiddle :http://jsfiddle.net/nikhilvkd/hA4eD/3/
input{
height:2em;
width:5em;
display:inline-block;
-webkit-appearance: none;/*new property*/
}
The problem is that the inputs have inherent borders that you're not taking into account. You can change them to have the same borders via CSS but this ends up making the controls look far uglier (Or leaves you specifically styling each input's borders & adjusting your heights accordingly, meaning you'll end up managing all the different styles).
One option is to use the -webkit-appearance css rule to disable this as others have suggested. Alternatively you can set box-sizing: border-box; to tell the CSS that the height you've specified should be the entire height of the input, borders included.
I have a pretty nested structure of tables from a CMS. Each column has a specified width e.g. width="61" for the first column.
Nevertheless Chrome ignores the width and adds random spacing so none of the columns have the right width in the end and it looks like this:
Other browsers display the code just fine.
I have tried to use table-layout: fixed but that made everything worse.
Here's the fiddle
http://jsfiddle.net/xv8U5/
Help greatly appreciated.
I believe there is a difference of rules depending on the browser. Most browser will scale the TD to the largest TD of the same column. Chrome, however, seems to use the first TD's width as column width.
Hence, if you specify the width of a TD after the first row, that width will be ignored if the first row already contained a TD for that column.
The solution is to specify the width right from the first row.
I have no control over the html in this project, so I need a css only solution unfortunately. The html is horrible, and it this wouldn't even be a problem if I could edit it. I have made a fiddle of where I am at at the moment.
I have a fixed width div, with a fixed width table inside it. They are the same width (500px in example) The table has an unset number of rows, generated in asp. I have floated the rows left so they appear in line (I know this is awful, but it was all I could do without editing the html) Each td is 100px. The heights and background colours added in the css are just to make it a bit clearer, they can be changed to whatever.
What I want to achieve is to get the td to start at the right hand side instead of the left. I have tried floating right instead of left, but this makes the links appear in reverse order which is undesirable.
The only solution I can come up with is to change the table width in css and float it to the right, which would be fine if the number of rows was a constant, but there could be some added to it or removed, which would leave it looking incorrect again.
fiddle link
I think you were correct with your thought to change the table width in css and float it to the right. I think I get what you want if I set the table width to 0px (it will expand to contain the tr's) in CSS, and float the table to the right.
Edit: nevermind. I was using Chrome and it worked there, but not in IE
Edit2: width:auto seems to make it work in IE, Chrome, and Firefox
I you have fixed width tds in your table, they should add up to 500px. In this case they add up to 400px. So you have to prepend one tr with auto width to your table.
Update: Hmm, this does not work since you have floating trs instead of tds
I have a table with 5 columns, 2 of which have a set width, the other three don't. Different browsers interpret this inconsistently.
Have a look at this fiddle in different browsers to see what I mean.
Firefox and IE9 render it the way I'd think correct: all cells have uniform width of 20% (two have a set width of 20% each, and the remaining 60% is divided between the remaining three cells).
Chrome, Opera, IE7 and IE8 force the empty cells without a set width to have zero width, which in turn forces the other two cells to stretch to 50% width each. Putting content into one of the three empty cells makes them take all available width (60% in case one cell has content, 30% if two, etc.). Likewise, removing the content off one of the two cells that have a set width results in a forced 0 width.
Which browsers got it right and which ones are doing it wrong?
Also, I perused the W3C spec regarding tables, but only found the description of the empty-cells property, which is supposed to control the rendering of empty cells with borders/background, but this does not affect the cells' width. I thought the table-layout property might do the trick, but while setting table-layout:fixed in Chrome does make all the columns appear, there is no way (or at least I don't see one) to do the opposite in Firefox. If you could elaborate on this and/or point me to the correct section of the W3C spec that covers this, I would really appreciate it.
The problem arises as the W3C haven't seemed to cover it yet, they haven't suggested any "right" way of dealing with this situation. The browsers have the liberty to interpret it the way they wish, in my opinion is the way IE9 and Firefox do it.
IMHO all the browsers are displaying things RIGHT. As a developer we should understand that what we expect from the empty cells. It is always better to define width or add some spaces even if your cell is going to be empty to achieve consistent display across all browsers.
put inside the "empty" <td>
How can you enforce the minimum width for a TD that can optionally contain an image? I ask this because I'm using a Javascript chess widget but when there are no pieces in any of the squares of a particular column, regardless of the width style of the td's being set to 36px, this column renders much narrower than those that have at least one row that contains the image of a chess piece.
Note that all the style is being set directly on each td cell. I read somewhere that a possible solution would be to instead create a div inside the td and set the width on that. Am hoping to avoid that as it might require significant modification to the underlying Javascript library. I've tried specifying !important along with the width but it had no effect.
Using firebug I can modify the width attribute but it seems the numbers are incorrect. For instance I can decrease the width all the way to 0 and it still appears the same. Or I can set the width to more than 36 and it appears to grow by width-36, but if for instance I set both the height and width of one of these narrow cells to the same number, lets say 60px, the height of what gets displayed is greater than the width and it appears as a rectangle not a square.
Furthermore not only can the td optionally contain an image, but each square specifies a background image too. So I am at a loss :( Thanks in advance
When I alter the CSS in your file using Firebug or the JS inspector in Chrome, setting the min-width property instead of the width property does the trick. Might want to try that? Not sure how IE will like that, though.
BTW: Why not use classes to do the CSS? It's kinda horrible to debug, this way.
By default tables will auto-size their columns.
If you set the table style to include:
table-layout: fixed;
then you'll have much better control of it via css and attributes.
You can use the td tags width attribute or you could use css and set the width.