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.
Related
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
When measurements are specified in cm or inches for an element, it is printed at exactly that size from Firefox and Internet Explorer. Chrome on the other hand makes the elements bigger.
Is there anyway to make Chrome print things at exactly the specified size, or is it something I'll just have to live with?
E.g.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
The above code prints an exact 5cm (on my printer) in both Firefox and IE, but prints at about 5.5cm from Chrome.
I have found this issue too.
After playing with MANY wasted sheets of paper, I've found that Chrome tries to scale the HTML.
For example, add a full width div to your sample below and it'll resize the box correctly, because you're asking Chrome to make the box 100% of the page and thus forcing a 1:1 scale of the page.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 100%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
Unfortunately, when I tried this, it didn't fix the height issue, but also I couldn't make the box 0px without it losing correct scaling.
Incidentally, take a look at the following to show how it affects the sizes when printed.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 200%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
In a nutshell: Chrome's printing capabilities are shocking!
Firefox works far better for printing, but runs much slower.
The solution with a 100% wide div doesn't work for me on the current Chrome version, but this works, for an A4 paper:
html, body {
width: 210mm;
}
For Chrome, just set the print margins to something, and set the body to the width of the paper, minus the margins.
E.g. For an A4 page, the width is 210mm
So for 1 inch margins (roughly 2.5cm) you can do the following
#media print
{
#page
{
margin-left: 25mm;
margin-right: 25mm;
}
body
{
width: 160mm;
}
}
The left, right, and width of the body should add up to 210mm.
For letter you'd use 1 inch margins, and a 6.5 inch width on the body.
I confirmed that I had the same issue when using your HTML, even when trying to specify some CSS rules to get rid of obvious suspects like padding and margins. From the research I've done, it looks like you're simply dealing with inconsistent browser standards when rendering media queries. If possible, I would recommend conditionally styling the box based on browser.
One other aspect seems to be that not specifying a Doctype (which is a bit of a no-no in development anyway) can lead to inconsistencies.
You can go ahead and see this topic for some more reading about the issue:
Firefox versus webkit measurements for media queries based on width
I am trying to create a table w/ a fixed header at the top for data from our database. When I add 'position:fixed;' to the header's css it keeps it at the top but it forces the entire header to the first column. How can I get the table header to be at the top and be correctly aligned w/ the columns? I'd prefer a css/html solution, if possible.
EDIT: I've tried quite a few of the jQuery solutions that I've found on SO and through google. Some work, some don't. Those that do work on their own tend to break when I combine it with other scripts I have running on my pages...
<style>
.dg_hdr_row{
position: fixed;
top:0;
height: 25px;
}
.dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
.dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
.dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
.dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}
</style>
<table width="100%">
<thead width="100%" >
<tr width="100%" class="dg_hdr_row" >
<th width="60%">Column 1</th>
<th width="15%">Column 2</th>
<th width="10%">Column 3</th>
<th width="15%">Column 4</th>
</tr>
</thead>
<tbody>
<tr class="dg_row">
<td class="dg_col1"></td>
<td class="dg_col2"></td>
<td class="dg_col3"></td>
<td class="dg_col4"></td>
</tr>
<tr class="dg_row">
<td class="dg_col1"></td>
<td class="dg_col2"></td>
<td class="dg_col3"></td>
<td class="dg_col4"></td>
</tr>
</tbody>
</table>
So there are some subtle issues with fixed positioning that make this particularly difficult.
Fixed elements are relative to the browser viewpoint
When you declare position: fixed, any additional position rules (like left or top) will place the header relative to the viewport itself - the top left corner of the screen. You can't use any tricks to make it relative to its parent, either, since it will be in the same place whenever the page scrolls. This might not affect your web page, but it's still something to consider.
Fixed elements don't work as expected in mobile browsers
I don't know your specific use case, but it's food for thought.
Fixed positioning removes elements from normal flow
This is what's causing the problem, as far as I can tell. When position: fixed is declared, the element actually breaks out of the normal layout and position of elements of the page, and now works in its own unique block.
From the CSS2 spec (this applies to fixed positioning as well):
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
This is good, since you want the header to float above the table, but also bad because in most browsers, it's laid out separately from the rest of the table.
Potential fixes
If the only thing on the page is your table, you should be able to set the header to use width: 100% and apply the same cell widths as the rest of the table. It might be hard to get the sizing to match up just right, though, especially when the window is resized.
Use some simple JavaScript to display the header. I know you want to keep this with HTML and CSS (I usually do too), but JavaScript fits well because the floating header shouldn't be an essential part of using the site. It should be available for browsers that support it, but those that don't should still be able to use the table. There's a very good technique at CSS-Tricks
(http://css-tricks.com/persistent-headers/), but you'll be able to find others by looking for "sticky table headers" on your favorite search engine.
Have you looked at DataTables yet? Here's the horizontal part, if I understand what you mean:
http://datatables.net/release-datatables/extras/FixedColumns/index.html
Here is a working HTML/CSS solution to you problem.
<!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>
<title></title>
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.fixed {
position: relative;
width: 100%;
top: 25px;
border: 0;
border-collapse: collapse;
}
.fixed td, .fixed th {
border: 1px solid black;
height: 25px;
}
.fixed tr:first-child {
display: table;
position: fixed;
width: 100%;
background: #FFFFFF;
}
.dg_col1{ width:60%;}
.dg_col2{ width:15%;}
.dg_col3{ width:10%;}
.dg_col4{ width:15%;}
</style>
</head>
<body>
<table class="fixed">
<tr>
<th width="60%">Header 1</th>
<th width="15%">Header 2</th>
<th width="10%">Header 2</th>
<th width="15%">Header 2</th>
</tr>
<tr>
<td class="dg_col1">Data 14</td>
<td class="dg_col2">Data 14</td>
<td class="dg_col3">Data 14</td>
<td class="dg_col4">Data 24</td>
</tr>
</table>
</body>
</html>
If you are looking for a framework independent solution try Grid: http://www.matts411.com/post/grid/
It's hosted on Github here: https://github.com/mmurph211/Grid
Not only does it support fixed headers, it also supports fixed left columns and footers, among other things. Unfortunately it does require Javascript.
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'm trying to create a horizontal menu with a thick border bar that shows over the hovered item. However, for some reason there's a small gap at the right end of the bar in Firefox and Chrome. Strangely, IE displays it without the gap. Firebug doesn't show any reason for this gap.
I tried using simple divs and still it appears. I've distilled it down to a single HTML sample, with divs only.
Can anyone explain this and tell me how to get rid of that gap?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Weird border spacing</title>
<style type="text/css">
div.outer
{
border-top: dotted 1px lime;
margin: 10px;
}
div.outer div
{
display: inline;
margin: 0;
padding: 0 12px;
border-left: solid 1px silver;
border-top: solid 3px red;
}
</style>
</head>
<body>
<div class="outer">
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</body>
</html>
I floated the inner div left which fixed the weird spacing and the outer div left which forced the inner div to be inside of it. You can adjust the styles more to fit your needs.
div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
float:left;
margin: 0;
padding: 0 12px;
border-left: 1px solid silver;
border-top: 3px solid red;
}
You could also remove the new lines between the divs to fix just the spaces.
display:inline rarely works well. Consider using float:left instead.
Try to add:
body {
margin: 0;
padding: 0;
}
Browsers have different default values for these CSS properties.
the gap is caused by the breaking space/new line between the <div>. To fix this put all the <div> on the same line with no space between them. However I would recommend re-thinking the css, possibly using list <ul>
The reason you're getting the space is due to inline elements interpreting spaces as something to be rendered. This lets you do:
Hello World
and still have 2 separate words. To remove the space you have to...well, remove the space. When you're trying to put elements flush together for layout, as already mentioned, using float: left is the preferred option.
the declaration display: inline-block for the selector div.outer div may be what you want.