As title states, I have a problem with extra space in table cell, here is and example:
http://jsfiddle.net/pzcMH/60/ (go here http://jsfiddle.net/pzcMH/60/show/ if you want to see html page directly). You can see that table cell under 'footer wrapper' row is higher than 'center_wrapper' table (in IE6 and IE7) and I want it to be same height, like it is in all modern browsers.
After googling, I tried:
adding cellspacing=0 and cellpadding=0
removing extra new lines and spaces
adding padding and margins with 0px
...
and nothing helped.
Off topic:
Someone will probably say that I shouldn't make layout, like in 2001, but I don't see a way to solve a problem with with extra wide elements not fitting in page (http://stackoverflow.com/questions/9632505/fixed-layout-wide-content-tables) without table and it seems that I will manage to implement sticky footer with tables.
Another interesting bug of IE6/7 is that if I change 'footer_wrapper' row id to class (and modify css accordingly, of course) it stops working. Any ideas why?
thanks.
Related
I have some HTML tables which are styled like this.
td
{
width: 20em;
height: 2ex;
}
Please see this fiddle for full details. This source passes the W3 validator with no errors or warnings.
There are three tables in the page. Only the second one seems to have this style applied. Why is this?
Here's how it renders in Firefox 42.0 on Ubuntu.
EDIT: Incorporating Pangloss's suggestion gives me a version which works in JSFiddle but not as a standalone web page.
Here's how the latest version renders in JSFiddle
And here's how it renders as a standalone web page with the same source in the same browser. In this version the first and second tables are fine but the second one has cells too wide. How the heck is this happening?
Alright, the table is trying to fit "too much" in a "too small" of space, you need to make the space bigger, I am making the "body" bigger for this example.
To start, set the font-size to 16px, collapsed the borders on the cells and remove the margins on the body. To make the math easy to understand.
Since em is a relative size to the font. take 16 * 20 (for 20 em) = 320.
Now multiple 320 * 29 (the amount of cells in the table with the most cells) = 9280px
Now you know the minimum width of the body needs to be at least 9280px.
See fiddle: https://jsfiddle.net/DIRTY_SMITH/40t3nzoh/7/
It's only seems like it because the choice of 20em and 2ex is "unlucky" or the table is too big (e.g. the first one).
Starting with the height of 2ex. It is just chosen too small, it is about the height of the letters. Try changing it to 1em, you see no difference, but if you change it to 3em you will notice it, because now it is bigger then the letters size.
Same applies for the first table, since it is several lines big and it can't go any smaller the 2em can't be applied.
Now regarding the 20em.
It feels like it only applies to the 2nd table, because it is the only one so small that the browser actually has room to expand the table.
You can see a huge difference if you take the first and third table and remove every single table data (td) except for, let's say two.
Here your shortened 3rd table to save some work:
<table><tbody>
<tr>
<td style="background:#351e1c">Kurotobi</td><td style="background:#374231">Sensaimidori</td></tr>
<tr>
<td style="background:#614e6e">Futaai</td><td style="background:#6b9362">Wakatake-iro</td></tr>
<tr>
<td style="background:#913228">Benitobi</td><td style="background:#97645a">Umenezumi</td></tr>
<tr>
<td style="background:#c3272b">Akabeni</td><td style="background:#c57f2e">Kuwazome</td></tr>
<tr>
<td style="background:#ffa631">Tamago-iro</td><td style="background:#ffb94e">Hanaba-iro</td></tr>
</tbody></table>
In addition to the first table. The browser again tries to get all the data on the screen without influencing the content (for example letting it overlap).
Now he does that and used all the space he has to display the tables content and decides to just cut of the rest of the space you told him to add (with the 20em).
In case you have 2 screens try pulling the browser window across both of them, you will notice that the browser uses more and more space until he has enough to display the 20em as well.
Hope I could help!
(Btw take a look at external css, helps a lot to keep the code clean
Link how to include a css file externally :)
I have a table currently containing the main layout of my website found on (http://www.enl-esports.com ).
The table column with id "menu" has a specified width of 150px, yet it randomly decides to become 160px in safari. I have no padding, nor a margin and the problem still occurs when I remove its inner HTML (which might be forcing it to become bigger..). It works fine in Chrome.
I have tried using a fixed table-layout (as found here: http://www.w3.org/TR/REC-CSS2/tables.html#width-layout) which did not fix the problem.
The page you can mostly see this is found here: http://www.enl-esports.com/seasons/
I was thinking this might have something to do with the lists bug in safari where margins/paddings which weren't set to 0 can indent the items but it wasn't that.
What I did discorev is that your html is grossly invalid. For instance the only elements allowed as children in an unordered list are list items (li) but in that menu you have an anchor as a direct child of the unordered list.
Non-valid html can always result in funky behaviour across different platforms/browsers, I suspect this is one of them.
Then theres the problem of using a table layout which are so last century you should probably be ashamed of it (there is no good reason you should be using one in this layout regardless).
Anyway, to start fixing your problems take a look here and go down the list resolving them:
http://validator.w3.org/check?uri=www.enl-esports.com
Basically this example works great on chrome and firefox but the marked table (marked with the "this table" comment) doesn't fill the whole container in IE. I want it to look like his brothers to the left. I've been looking at it for the last 30+ minutes wondering what in the world is causing it not to work. I could use the help of a 2nd pair of eyes
The whole thing is quite huge, the problem table is towards the end of the html.
The other tables that are filling up the container all have a wrapper div with a height declared on them but its missing on that one table that is not stretching. Add it and it works fine:
http://jsfiddle.net/aVkC8/1/
Oh and: Holy inline-css styles Batman!, you can greatly simplify your code with defined classes and styles for your table.
Have you tried using something like Normalize.css in order to get consistency across browsers?
From the homepage:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?
This is not working on my IE:
<table style="padding:5px">...</table>
however it works on Opera.
Is there a workaround?
The earlier CSS specs (which IE6 follows -- and I use the word "follows" loosely) are not clear about what padding defined on a table should even mean. IE6, naturally, decided to interpret this differently than every other browser, by ignoring the padding. Other browsers decided to render it by adding spacing between the table border and the outermost cells, without affecting the spacing inside cells, or between internal cells. By the time IE7 came out, the specs had cleared up to work like the other browsers, but IE6 still has the problem, where it simply ignores the padding.
The best solution is to avoid putting padding on your table, but instead surrounding it with a div, and putting the padding there.
<div style="padding: 5px;">
<table...>
</table>
</div>
Of course, if what you want is cell spacing or cell padding (as opposed to just padding on the table), then you should use the cellspacing or cellpadding attributes (even if you don't want these, you at least need cellspacing="0" to avoid another separate issue with IE6 table rendering).
Also, the inline styles here are for demo purposes; using css classes is generally considered better practice.
Did you try using <table cellpadding="5">? IE has problems with some css styling.
Also your syntax is wrong you forgot a semi-colon.
I'd venture to guess something else is wrong in your code.
Padding works fine in IE:
http://jsbin.com/ewuho4/
If you want to pad the cells then use cellpading attribure (cellpadding="X") if you want to padd a table, then that is awkward considering it's structure, I recommend that you put a margin if you want some space between it and the rest of stuff. Padding does not work on IE an even though I am not a fan of IE I do not blame it for that