I have the following problem and I don't know how to solve it. I have an HTML table and one of the cells contains an input element. My problem is that in Firefox when I type something that overflows the input width the text will be hidden (which is the behaviour I want), but in Internet Explorer 6 the width of the input will be automatically expanded and the whole page format goes to hell because of it.
I've been doing some googling and it all points out to the so called "overflow bug" in IE 6, yet I have absolutely no idea how to solve it.
I've tried setting overflow: hidden on both the input element and the containing cell (td) with no effect. I've also tried setting a max-width again with no success.
Any ideas?
IMPORTANT Due to the way the application I'm working on is programmed I can only modify the CSS of the element, not other HTML properties...
can you set max input characters on the box that may help solve it!
hold on try this css!
table {
table-layout: fixed;
}
The first question would be : Do you really need to support IE6 ? Even microsoft stopped supporting it that a sign isn't it ??
http://www.w3schools.com/browsers/browsers_explorer.asp
You could try to put a DIV inside your TD. Set a fixed width in the style of the div and set its overflow to hidden. Then put your input box inside the div.
This way even if the input box expands it should be hidden by the Div hidden overflow. It might not be pretty since the box will look cut at the end but it won't destroy your design.
I'm not sure it will work though since it's a bug it might not conform to the rest of the css either.
Use this:
input [type=text] {
width: 100px; \\ That suits you best
overflow: hidden;
padding: 2px;
}
Related
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
I'm trying to write a CSS class that allows me to sit form elements (mixed button and text inputs) in a line so that they abut. I'm using display:table on a parent, and wrapping each element in a container with display:table-cell, and it works fine except for one bug that I can't figure out a way around.
So for example, parent is control-group, the element wrappers are control-group-item, and the elements themselves are control-group-input.
.control-group
.control-group-item
.control-group-input{type: "text"}
.control-group-item
.control-group-input{type: "submit"}
CSS of this (I've normalized font size/line height/padding/browser weirdness and all form elements are inline-blocked etc.):
.control-group {
display: table;
.control-group-item {
display:table-cell;
}
gives this, which is OK:
However, I ideally need it to fill a grid column of undetermined size, rather than the browser deciding how big my elements should be. If apply width:100% on .control-group, this happens:
The orange is a background colour applied to the table cell control-group-item. The issue seems to be with the 'submit' input: the submit stays the size it should be but browsers universally add extra space next to it within the table cell. So if I apply width:100% to each .control-group-input, I get this:
Which is OK, but stretches the ‘submit’ button. I can live with that, but is there any way to get it like the second image (but without the random space) using my current approach, or should I sack that off & try something different?
Edit I do not know the sizes of the inputs in advance: I can't set a width on them, which effectively rules out most inline block/float methods. I ideally need IE 8/9 support, which is why display:table was tried.
Edit 2: here are versions on Codepen: http://codepen.io/DanielCouper/pen/knDmC
After rewriting the code there, I realise my question is: how is the width of the table cells being calculated? It's specifically the cell with the submit button that has the extra space. The extra space seems random.
Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH
The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.
You also need to make sure that the table element is using an auto table layout.
nm, spoke too soon. Thought I had solved it, hadn't, was getting effects from some other CSS.
So I ran into a problem where jQuery UI had some problems calculating positioning correctly in its sortable widget - only in IE. I was able to pinpoint the problem to the css applied to the html dom element:
html, body
{
margin-left: auto;
margin-right: auto;
width: 968px;
}
Setting the width on the html element is what caused the particular problem. You can see it in action here. In pretty much any version of IE, dragging an item doesn't push other items out of the way unless you move the item way to the right, about half the width of the left margin.
So anyway it got me wondering - what does setting the width of the html element do? And what does IE do different with respect to html width when it comes to positioning elements?
The rendering engine used by IE is obviously more difficult to examine than an open source solution such as WebKit, but there is a discrepancy between how IE interprets the box model layout framework and the rest of the world.
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
I don't know if Width attribute is even supported by html or body tag. html tag supports three attributes 'dir', 'lang' and 'version'. So this could have caused the problem that you are trying to set which does not exist for that tag.
If you look at this code: http://jsfiddle.net/b3KaM/2/
in IE7 the <a> tags do not stretch to their parent <li> width even if display: block; is set. You can see the difference with the background color set to red on the list items and yellow on the links.
it obviously work fine in FF/Chrome & friends.
EDIT:
the complication here is that I cannot set a fixed width - the link text should stay on one line and the whole list should expand as needed.
I'm aware that this as been asked before and I've found a few questions on SO but I could not find a valid solution to this issue - any ideas anyone?
If not - is it safe to say that is not possible to achieve the same result on IE7 as on other browsers, i.e. it's an Internet Explorer bug with no workaround?
This problem is caused by a rendering phenomenon in IE7 and lower known as hasLayout.
To fix the problem, you must simply prevent your a elements from "gaining layout".
Unfortunately, there's massive list of stuff that causes an element to "gain layout".
Your a elements currently have overflow: hidden and min-height set. If you remove those properties, it will work in IE7.
With block you have to give the width also for the element.For example:- http://jsfiddle.net/b3KaM/8/
i have been working on this layout for quite a while. this is the first time I am working with CSS and HTML. anyway. the problem is that the inner text inside this layout is extending beyond the borders of the "master" div container.
I am attaching all my files in a zip. Please Help me. Otherwise my boss won't let me get on to Javascript. CSS and HTML is really boring.
Thanks in Advance.
File: http://www.mediafire.com/file/9qxrvkmp6hescce/Layout.zip
P.S. No JavaScript Please
I'm not sure if you want to hide the overflowing content or allow the user to scroll through it within div container.
Specify the overflow property for the div.theAllEncompassingDiv element to either hidden or scroll, respectively.
.theAllEncompassingDiv { overflow: hidden; }
or
.theAllEncompassingDiv { overflow: scroll; }
Read more on the overflow property here: http://www.w3schools.com/css/pr_pos_overflow.asp
Not that I'm too keen on doing your job for you, but the reason is that you've specified a max-height of 408 pixels in your .theAllEncompassingDiv{} CSS class.
If you remove that, the <div> will become all encompassing once more!
Edit: Spelling