Here's a CodePen: https://codepen.io/neezer/pen/eWvLrm
Load that pen in Chrome (I'm running 57.0.2987.133).
Change the width of the <table> to 150px using a style attribute. Don't do this in the code (as it will cause a refresh--that's specific to CodePen and not my issue), but instead change it programmatically through the console or in the web inspector.
Note how Chrome resizes the table and does the proper overflow for the td/th elements:
Load that pen in Safari (I'm running 10.1 (12603.1.30.0.34)).
Change the width of the <table> to 150px using a style attribute. Don't do this in the code (as it will cause a refresh--that's specific to CodePen and not my issue), but instead change it programmatically through the console or in the web inspector.
Note how Safari does not resize the table to the given dimensions, since the td/th do not appear to shrink smaller than their content.
Why is this different? The only explanation I can think of is that Safari does not repaint the table on style changes, taking table-layout into account. I found this in the MDN docs:
Under the "fixed" layout method, the entire table can be rendered once
the first table row has been downloaded and analyzed. This can speed
up rendering time over the "automatic" layout method, but subsequent
cell content may not fit in the column widths provided. Any cell that
has content that overflows uses the overflow property to determine
whether to clip the overflow content, but only if the table has a
known width, otherwise it won't overflow the cells.
The difference to me seems that Chrome re-evaluates the table when it detects a dimension change on the <table>, but Safari does not, and thus does not overflow the cell.
I can make this problem go away if I ensure that <table> has a set width on initial render, but that's a no-go for my app, which allows the user to dynamically resize table dimensions. Needless to say, it works great in Chrome but not Safari.
Is there anyway to have Safari behave like Chrome here? Some way to force Safari to do the re-evaluation, if that is what's actually happening here?
Do Firefox/IE/Edge suffer from the same problem? Could they benefit from the same solution?
UPDATE: This little experiment in Safari's web inspector seems to confirm my theory: http://d.pr/v/bzhIH
You could wrap your <table> in <div>, set table width to this <div> and width: 100%; to the <table>.
If you want stretch your <table> for the columns content width, you need to replace width: 100%; from <table> and set width: auto; to <div>.
Here's example: https://codepen.io/Izumenko/pen/zaGGRM
Related
http://staging.isaidicanshout.com/millersrest/
Hello, in the WIP example above, when sizing down below 1024, this site should switch to a single column view, by hiding two of the table-cells and resizing the width of the page. However, in Chrome it hides the cells, but leaves the remaining cell at its original width. Reloading the page at the new size gives the correct appearance. Any idea why this would not update correctly in Chrome?
Safari seems to work fine. Firefox is an entirely other story, but I will look into that separately.
Thanks!
In your CSS you have a position:relative; for #leftcol and #rightcol. When you have a media screen for 1024px, make sure you remove this attribute and then it will work as a one column display. See in the picture below how it is working, but most importantly that position:relative is unchecked
I am having a problem with the following page in plunker. I also have tested it outside of plunker and I get the same result. My problem is that the following CSS get lost somehow. When I look at the computed CSS in chrome the width and height are different even when I can see that it recognized that rule. I am using bootstrap CSS.
table.scroll {
width: 40px;
height: 40px;
overflow: scroll;
}
EDIT:
The intention was to make the table scroll-able. But there no scroll bar appears. The CSS looks correct but apparently it does not work on tables. And the browser just ignores the CSS.
According to the W3C, user agents may reflow tables if the width of their cells is greater than the width that the author specifies. Chrome cannot possibly fit all of that data in a 40x40 table, so it scales it up to fit.
There are some ways to fix the width of the area containing a table, but it will probably require extra markup.
I've been working on this site for quite a while, and I've finally got it looking pretty nice I think. But I've noticed a problem with the home page on IE8 (no other browser has this problem that i've used)
in IE8, the site looks like this:
Notice the blue bars on the sides of the far right column, they show how wide the <td> is. the content within is 160px as it should be, but the <td> itself is wider than it should be. As you can see in the HTML analyzer on the left, the width is set to "160", however the HTML in the page says:
<td style="width: 160px;max-width:160px"width="160px"align="center"valign="top">
Out of Desperation I've tried a few things obviously. Why does IE continue to hate me? What code can I write to make IE play nice like the rest of the browsers do?
The actual site URL is http://EpicClanWars.com if you wish to dig into source.
Add table-layout: fixed to the <table>'s style. Without it, applying width to a table cell is interpreted as min-width (a carryover from when min-width didn't exist)
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.
It works in IE and Safari but breaks in Chrome. You can view the page here http://www.archemarks.com.
It only breaks at a middle zoom point so you have to zoom in and zoom out and at this middle point the table breaks.
This made me think it was something minor that as the browser re-drew the page..the changing pixels available caused it to make something bigger than normal...or smaller and broke the layout.
Chrome has development tools which should make all of the CSS and HTML available.
I tried fiddling witht the size of the text in put box and the containing column and row..but this did not help as I was only guessing.
Any non-guessing advice.
I can repost the code but it might be easier to just view the site using Chrome Development Tools
It's the width of your .t2_c1 rule. At only 100px, it isn't wide enough for the Email Again text. this is undoubtedly because of the font size conversion being just slightly off as the browser compensates for the zoom. Changing the .t2_c1 rule width to 110px and then the .t2_c2 width to 250px fixes this issue.