1.) This works in Chrome.
In Firefox, however, a django tables table that we are rendering on our site is not observing the overflow style. From what I read, table cell elements may be a "per browser" decision because they aren't pure block elements (if I am understanding the standard correctly), but here's a picture of my problem.
I've tried fussing with the max-width tag (to no effect other than the width changes but the overflow is still garbled into the next cell). I could technically wrap the line (white-space), but we don't want huge table rows on the page.
The Mozilla developer page (Overflow) says "In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap." The height property doesn't seem to change this either. No other CSS property I've tried seems to have an effect.
I keep thinking that this is something Firefox may not support (i.e. table cells aren't "block-level"?), but I can't quite say that for certain.
EDIT: Here's the html. It's just a basic table produced by django tables. Please ignore the inline style I attempted which is commented out.
EDIT: Here's inline code and a JSFiddle link at the bottom.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body {font-family: Arial, Helvetica, sans-serif;}
th {
padding: 8px;
}
td {
padding: 8px;
}
td.content {
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle
I made a simple code for you, i hope help you, tell me if this is what you want:
.msg_list{
border:1px solid red;
}
.td-content{
border:1px solid blue;
max-height:100px;
max-width:100px;
}
.content{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.content div{
width:200px;
}
<table class="msg_list">
<thead>
</thead>
<tbody>
<tr>
<td class="td-content">
<div class="content">
<div>One really really really really really long message</div>
</div>
</td>
</tr>
</tbody>
</table>
If you watch you can see in the css the class .content and his property max-width, i tested it in firefox, you can try it
Related
I have 3 div-s inside a div, I want to put a picture in red area which have a 500px height, I want to fix red height area to 500px and want to stretch other div-s to fill the pages, I don't know hot fit that, also tests put 50% to each blue div-s but don't worked.
<html>
<head></head>
<body>
<div>
<div style="background-color: blue; height:100%"></div>
<div style="background-color: red;height:760px"></div>
<div style="background-color: blue;height:100%"></div>
</div>
</body>
</html>
My solution:
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
}
.main{
background: yellow;
height: 100%;
display: table;
min-width: 100%;
}
.box{
background: blue;
width: 100%;
height: 100%;
display: table;
}
.image{
background: red;
width: 100%;
height: 100px;
display: table-row;
}
</style>
<div class="main">
<div class="box">#1</div>
<div class="image">#2</div>
<div class="box">#1</div>
</div>
Easiest solution: Use a table (they are valid again for layout thanks to html5 and it's presentational role attribute)
Works in "modern" browsers (IE 8 at least): use css display table + display: table-cell etc to use table rendering on other elements
Works when you have javascript: Use javascript. This will lag behind most of the time and might file when the JS engine encounters an error, so it should be your last resort (or actually past that). Example (with explanation) can be found here: http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
If it's only about a visual effect: Use a container div for the blue color and 100% height and then center the red one in it (again, multiple ways to achieve that, e.g. tables, table display + css vertical align, ...)
Regarding a correct HTML5 solution (using role attribute marks table as presentational according to W3C spec)
<table style="width:100%;height:100%;border-collapse:collapse" role="presentation">
<tr>
<td style="background-color: blue;"></td>
</tr>
<tr>
<td style="background-color: red;height:760px"></td>
</tr>
<tr>
<td style="background-color: blue;"></td>
</tr>
</table>
Complete working fiddle here (css part is also important for it to work correctly): http://jsfiddle.net/8jFan/
Additional info regarding HTML5 + Tables:
http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#table-layout-techniques
On one hand tables are disencouraged to fix layouting ("Tables should not be used as layout aids."), on the other hand the spec goes on to describe how to use tables for layouting. As tables are - in contrast to css alternatives - backwards compatible really far (they are used for most newsletters because of that), they still seem to be the better choice to me than css "display attribute hacks".
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to
Why doesn't the "aaaaaaaaa..." go to a new line and go out of div?
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
background: #888888;
color: white;
width: 200px;
padding: 20px;
}
#container li {
list-style: none;
}
#container td {
padding-right: 20px;
}
</style>
</head>
<div id="container">
<table>
<tbody>
<tr>
<td>one</td>
<td>
<ul>
<li>two</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
If there aren't any spaces in your word then your table will expand to fit the word. There isn't much you can do about that (not with css anyway). Word wrap only works with actual word (i.e. with spaces in them).
A solution that will work for you though is to use the (soft hyphen)
<li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
will break in the middle. It will only break there if it needs to - if it doesn't fit in the parent container.
There are a number of other solutions available, most of them are unreliable cross-browser or break your design:
The word break tag : <wbr> is unreliable.
The overflow CSS statement will either break your design (overflow:auto) or hide content (overflow:hidden)
So basically, no easy solution. Soft-hyphen will work best if you can use it.
You could look into hyphenator, a way to automate work breaks like that on your website.
For your edit, if it's a variable then I would definitely with hyphenator.
What you are looking for is css3 feature word wrap: http://www.css3.info/preview/word-wrap/
This have some browser compatibility issues but I think if you are determined to use such long words, this is an option.
This is a sample: http://jsfiddle.net/VXgdS/2/
I have an html table within a div of a specific size. I want the table to apply margin collapse and be 100% wide. Here is my code. It renders how I want it to in IE8 and incorrectly in Firefox. Firefox may be doing the spec correctly, but whatever. How do I fix my css to work in both browsers?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
table
{
border-collapse: collapse;
border-spacing: 0;
}
table
{
margin: 10px 0;
width: 100%;
display: block;
}
p
{
margin: 10px 0;
}
td, th
{
border: 1px solid #000000;
}
</style>
</head>
<body>
<div style="width: 600px; border: 1px purple solid;">
<p>Some text at the top. Notice that the margin collapse does not work unless display:block.</p>
<table>
<tr>
<th></th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Label 1</td>
<td>1.A</td>
<td>1.B</td>
<td>1.c</td>
</tr>
<tr>
<td>Label 2</td>
<td>2.A</td>
<td>2.B</td>
<td>2.c</td>
</tr>
</table>
<p>Some text at the bottom. Notice that the margin collapse does not work unless display:block. Its stupid.</p>
</div>
</body>
</html>
I need the display:block for margin collapsing to work in Firefox. If you remove the display:block, you should notice that the spacing between the <p> tags widens from 10px to 20px.
This is also an edit to this question that I posted earlier, but it won't let me edit for some reason. I've been messing around with my internet cache so I probably messed up a cookie.
You need to add table-layout: fixed to the style assigned to the table, that's all.
Use display: table and your problem will be solved.
just remove the display: block;, the border-collapse works fine
remove
display: block;
change this
table
{
margin: 10px 0;
width: 100%;
display: block;
}
to
table
{
margin: 10px 0;
width: 100%;
}
for live demo
http://jsfiddle.net/dN5DM/1/
Margin collapsing is only defined for block elements.
Tables are special. In the CSS specs, they're not quite block elements - special rules apply to size and position, both of their children (obviously), and of the table element itself.
check links
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#block-box
Solution to margin collapsing is
You could use a 1-pixel top padding or border to avoid margins from collapsing.
Okay, this is my first post on Stack Overflow, and I believe I have solved your issue. All I did was change the line "display: block;" to "position: relative;" and that seemed to have fixed the "stretching" issue.
I am using Chromium and I understood what you mean when the tables weren't stretching out as they were in Internet Explorer. I know Chromium and Firefox handle pages pretty similar, so that might have resolved your issue.
I'm just wondering.. If you're specifying div width="600" and then require the table to fit 100%.. Why not put a width on the table instead of the containing div.
don't mind me, Just curious to know what specifically you're trying to achieve other than the border-collapse.
You need to define the parent elements as 100% too, so the table knows what it is a percentage of.
You can fix any width trouble simply by adding a short JScritp ... first add this to your BODY tag: onload="autoadjustw"; and this little script in the head tag:
function autoadjustw(){
AN=document.getElementById("parent_object").offsetWidth;
document.getElementById("Table_Id").style.width=AN+"px";
}
if removing display: block breaks in IE use '\9' to target IE only like:
table
{
margin: 10px 0;
width: 100%;
display: block\9; /*for ie only"*/
}
Tables do not use display: block; Simple width: 100%; should do the display: block; trick.
Never have, never will!
I want to display a page with no scrollbar (height:100%). I have read suggestions to add this argument to html and body. But it does not work as I expect. In FF indeed I do not see a scrollbar. But in IE7 and 8 (Standards mode) there is a scrollbar. In Quirks mode it works as expected. Please take a look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://apptools.com/examples/tables/standardscss.html -->
<html><head><title>standards compliance mode with css rendering</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=content-type>
<meta content=no http-equiv=imagetoolbar>
<meta name=mssmarttagspreventparsing content=true>
<style type=text/css>body {
padding-bottom: 0px; background-color: #fff; margin: 0px; padding-left: 0px; padding-right: 0px; color: #000; padding-top: 0px
}
table {
border-bottom: #008 1px solid; border-left: #008 1px solid; border-top: #008 1px solid; border-right: #008 1px solid
}
html {
height: 100%
}
body {
height: 100%
}
.fullheight {
height:100%
}
</style>
<meta name=generator content="mshtml 8.00.6001.18876"></head>
<body>
<table width=450 bgcolor=#ccccff align=center height="100%">
<tbody>
<tr>
<td colspan="2" height="200px">
<p>paragraph</p>
</td></tr>
<tr class="fullheight"><td >
<p>paragraph</p>
</td>
<td>
<p>paragraph</p>
</td>
</tr>
</tbody></table></body></html>
Umm... what you're asking can get into complicated territory, but I'd start with eliminating inconsistencies in your code. For example:
Your table is 100% height.
Inside, you have a 200px high <td> inside one <tr>
Inside, you also have a 100% high second <tr>
So you're telling the code that 100% + 200px = 100%. That fails logically, although you might want to hack your code that way sometimes.
First, try adjusting the properties so that they work logically and try to reduce your code to greater simplicity, and then work your way up from there. After that, if a scrollbar still appears, you'll probably need to start tweaking with negative margins. This will get so "intimate" with your code that frankly anyone advising you would need a clear sense of your objectives, rather than advising on individual code elements.
If the problem is the scrollbar, you can use the CSS "overflow" attribute in order to force the behavior:
visible: the overflow is not clipped.
It renders outside the element's box.
This is default;
hidden: the overflow is clipped, and
the rest of the content will be
invisible;
scroll: the overflow is clipped, but
a scroll-bar is added to see the rest
of the content;
auto: if overflow is clipped, a
scroll-bar should be added to see the
rest of the content.