This is a screenshot of a table in Chrome 5.
The same table rendered in IE8:
You can view the page here:
http://labs.pieterdedecker.be/vspwpg/?page_id=96
This CSS rule adds the padding that IE8 won't respect:
td#content table.subitems { padding: 5px; }
Try adding the padding to the td/th elements under the table, not the table itself. The table cells / headings get zeroed out by *{margin:0;padding:0;} as well, so you have to explicitly specify.
Edit: If you don't mean to put padding on every table cell/heading then try a margin on the table or padding on a table wrapper div.
I ran into the same problem with my site. The class was applied to the <td> tag but its padding was not showing up. Then I declared the padding inline, and it showed up fine. I nearly put a fist through my monitor, but when I realized that would hurt me and not IE, I refrained. It's not pretty, but it works.
<td class="doesntMatterBecauseIEHatesYou" style="padding:10px;">Horray, IE doesn't hate you anymore. But you still hate IE.</td>
Related
I'm trying to make a basic A4 document in HTML using mm CSS sizing. The document is sized perfectly - it prints fine on A4, covering virtually the full page, leaving a nice 3mm margin around it. I'm using a table for the layout, as the original document (that i'm re-creating in HTML) was created in Excel, and therefore has a table structure.
As I need the table to have an exact 3mm margin, i'm setting the width and height in mm, and using absolute positioning (3mm top and left). I had originally created the table-like layout using divs - but making the lines overlap perfectly using this is extremely fiddly - you can't really do it properly, as you're working with a mixture of millimetres and pixels, hence my choice for using a table.
The table displays perfectly, all rows uniformly fill the document. Some of the rows need to be split, so I chose to use floated divs within the s, within the s.
Despite resetting the CSS, and setting the <tr>s padding to 0, and the <td>s padding to 0, and giving the table border-collapse: collapse; and border-spacing: 0;, there's an annoying little margin between the div, that even Chrome can't explain why it's there:
https://www.dropbox.com/s/qt1n54m9fxxl6f2/job_sheet_template.html
You may need to open the image link, and zoom in, to see the green highlighted space below the divs (which is apparently the <td>s padding). In the bottom, right hand corner, you can see that the padding isnt set?
Why is this here?
Your image shows that border collapse isn't being applied. Try using:
table {
border-collapse: collapse !important;
}
I've fixed the problem -
The padding isn't set, but somehow setting the divs height to 100% doesn't work - I've now set it to 5.4mm which fits perfectly.
for html
html
{
font-size:0;
}
I am having an issue in Outlook 2007/10 when coding an email.
I am getting added padding/margin between my tables and cant see what it could be.
I have one big tables, with 3 tables inside it, all aligned left. I would have put them in seperate td's but need them to be out of the td's for it to work how i want responsively.
I have added border-collapse:collapse and border-spacing:0px to every table and all the cellpadding and spacing is set to 0. All my code is inline. This gap doesn't show in any other clients.
Any ideas?
Have attached diagram of my tables.
Aligning (floating) tables will often cause a few pixels worth of gap, particularly in Outlook. Try adding this to your page:
<style type="text/css">
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
</style>
From memory, this doesn't remove it fully - there is still a stubborn 1px line, which is fine, unless you are using background colors that make it obvious. To get rid of it completely you'll have to play around with adding a border also, which is kinda silly, but that is Outlook for you...
However, for responsive, I'd recommend you go with the <td>'s instead, and just toggle width:100%; display:block; in the media query to control them responsively. Here is a basic example
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 rendered inside a div. Following styles are applied to the outer div.
width:auto;
background-color:white;
overflow:auto;
height: auto;
scrollbar-face-color:#E0EEEE;
scrollbar-arrow-color:#33ccff;
scrollbar-track-color:#EEFFFF;
scrollbar-shadow-color:#EEFFFF;
scrollbar-highlight-color:#EEFFFF;
scrollbar-3dlight-color:#EEFFFF;
scrollbar-darkshadow-Color:#EEFFFF;
In IE8 the outer div appears perfectly fine with a horizontal scrollbar but in IE7 both scrollbars are shown and the outer div is not adjusting the height automatically. I want this to look the same as in IE8. Can somebody suggest something?
Following is a link to the screenshots in both versions of IE:
http://img692.imageshack.us/img692/6374/81306247.png
Since you only what the overflow happen in one direction set overflow-x: auto instead of overflow: auto.
Different browsers have different ideas on default margins and padding, etc. Try adding a reset stylesheet before your stylesheet to normalise the browsers and see if that solves the issue for you. You may need to make subtle adjustments to your existing stylesheet to incorporate this but they should be minor and will reflect equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
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.