Having some issues with table content set at 100% not rendering properly in Safari(all sorts of weird sizing) and then Firefox(spills over the edge).
Is there a way I can set it to show width:100% for Firefox in TD and max-width:100% in Safari using CSS, this is what seems to fix it when set manually in each using Inspect Element.
After Googling the issue, table 100% width problems does appear problematic for Safari and Firefox browsers.
Can max-width:100% AND width:100% be both set for an element?
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width:100%">
<tbody>
<tr>
<td><img src="pic1.jpg" style="border-style:solid; border- width:10px; float:left; max-height:240px; max-width:96%" ></td>
<td><img src="pic2.jpg" style="border-style:solid; border-width:10px; float:left; max-height:240px; max-width:96%" ></td>
</tr>
</tbody>
</table>
Disclaimer: I don't have Safari here, but I can solve the problems in such a way that the code works the same in Mozilla, Chrome and IE. Hope that helps!
Tables are meant for displaying data. That's what they're designed for; that's what they're good at. So one of their design paradigms is that they don't hide things; if the width would become too narrow to show everything, they ignore the width rules and display everything anyway.
With that in mind, look at what happens in Mozilla. If you have two images side by side that together are wider than the width of the window, the table ignores its width:100% rule and just displays the images, no matter what, even at the cost of a horizontal scrollbar.
So, what can you do; you can dispense with the table and just display the images side by side. Make the a elements 50% wide, just like the table cells did.
a {
float:left;
width:50%;
}
a img {
border-style:solid;
border-width:10px;
max-height:240px;
box-sizing:border-box; /* to account for the border */
max-width:100%;
}
<img src="http://lorempixel.com/270/240"/>
<img src="http://lorempixel.com/g/270/240"/>
Related
I am finding different behaviours between browsers. I have a TABLE which is dynamically generated so the width should be computed from the parent DIV:
<html>
<body>
<div style='width:800px; border:1px dotted blue;'>
<table style='width:100%; display:inline-block; font-size:40px;'>
<tr><td>1</td><td align=right>2</td></tr>
</table>
<table style='width:100%; display:inline; font-size:40px;'>
<tr><td>1</td><td align=right>2</td></tr>
</table>
<table style='width:100%; display:block; font-size:40px;'>
<tr><td>1</td><td align=right>2</td></tr>
</table>
<table style='width:100%; font-size:40px;'>
<tr><td>1</td><td align=right>2</td></tr>
</table>
</div>
</body></html>
Safari and Opera correctly shows the column '2' at the right border of the DIV. Chrome and Firefox appear to ignore the width:100% if there is a display definition. At the 4th case, there is no display definition and the table is correctly rendered.
Any idea why ?
The width of all the tables are 800px. However, in Chrome and FF the width of the tbody element doesn't equal to 100% of its parent where the display property of the table element is not the default one.
There's no W3C definition for what the width of the tbody element is supposed to be in case that the display property of the table is not the default one. This encourages different implementations in different browsers.
I have this piece of HTML that I want to style.
The html is a table (and actual table), which I want to give a border.
The element also had a :before pseudo-element, which I use to put a small triangle in the top corner.
The JSFiddle is here.
I hope it makes sense. I stripped down the markup and the CSS as much as possible, because it's actually a small part of a big site.
http://jsfiddle.net/GolezTrol/28yDb/2/
Now the problem is that the combination of having 2 columns, having border-collapse: collapse; on the table and the :before pseudo element, cause the top border of the element to partially disappear. It's only there for the length of the first column.
You would assume that it is the pseudo element that is on top of the border, but this element is very small, and as far as I can tell, this could not be the problem. I added visibility: hidden; to the pseudo element to be sure, and I can tell that the triangle is gone, but the border is still incomplete.
Unfortunately I cannot change the markup, since this is outputted by MediaWiki, but I do have full control over the CSS.
The HTML:
<div id="globalWrapper">
<div id="column-content">
<div class="thumb tright">
<table class="infobox vcard" style="">
<tbody>
<tr>
<th colspan="2" class="fn org" style=""> Example text</th>
</tr>
<tr>
<th>Row head</th>
<td>Content</td>
</tr>
The CSS:
/* Generic table styling */
table {
border-collapse: collapse;
/*border-spacing: 0;*/ }
/* The box */
.thumb.tright table.infobox.vcard {
border: 3px solid #fae104;
position: relative;
}
/* Triangle */
.thumb.tright table.infobox.vcard:before {
content: "";
position: absolute;
width: 0;
height: 1px;
border-top: 5px solid transparent;
top: -7px;
border-left: 10px solid #555;
visibility: hidden;
right: -1px; }
I already found out that it works when I remove border-collapse: collapse;, but I'm not sure that is a proper solution, and even if it is, I would really like an explanation of what is going on.
Btw. I got this problem both in Chrome 29 and in Internet Explorer 10. Haven't tested other browsers.
Update
Instead of using -or not using- 'border-collapse' to fix the problem, I found out that this also works:
.thumb.tright table.infobox.vcard tbody {
display: block;
}
So the table itself is still a table, the pseudo element is still on the table, as is the border, positioning etc. The tbody, which was unstyled before, is now a block and the problem is solved in both browsers. I found this by trial and error, and still wouldn't know the reason behind it.
Updated fiddle: http://jsfiddle.net/GolezTrol/28yDb/9/
Being a newbie to StackOverflow and jsFiddle I updated the Fiddle with that I think is the solution. I didn't change the CSS except for moving the pseudo class from the table itself to the table header, and changing it into :after. Works for me in Firefox and Chrome!
/* Triangle */
.thumb.tright table.infobox.vcard th:after { }
Border-collapse: seperate is not supported in IE8 but I think this will be.
edit: nevermind ;)
It is a problem only occur on Webkit browsers I think. It can be considered a "browser bug" imo.
th should be inside thead, not tbody:
<thead>
<tr>
<th colspan="2" class="fn org" style=""> Example text</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row head</th>
<td>Content</td>
</tr>
<tbody>
And I think this is the correct solution. You are putting an element where it is not advised to be, so it should be normal for a problem to occur.
Edit: as thirtydot pointed out, changing the th to td doesn't change the result. It only work when I moved the th to the thead section. At this point I am at a loss, I can't find a way to solve this.
But at least I think I can provide my speculation on the cause of this problem:
:before create a pseudo element inside the target element. What kind of element is unknown to me, but I suspect that the browser create a td. If that is true, then after rendering your html should look like this:
<table>
<td></td> /*the pseudo element*/
<tbody>
<tr>
<th colspan="2" class="fn org" style=""> Example text</th>
</tr>
<tr>
<th>Row head</th>
<td>Content</td>
</tr>
<tbody>
</table>
Needless to say this look weird. And if you try the above html out you can see the result is similar to your problem. border-collapse:collapse will merge 2 borders together where there are 2 cells next to each other, or a cell is next to the table's border. So I suspect in this case, the pseudo element - which doesn't have appropriate colspan - last only 1 column, the rest of that row is empty: nothing's there. This is where I think caused the bug: because there's no cells next to the table border there, no border is created at all.
The real reason may be a little bit more complicated ("why doesn't the bug occur when I put in a thead?"), but I think my answer is not too far off the mark. :)
The only reasonable explanation I can think of is pseudo-element :before not being compatible with the display: table of the table in collapsed mode. That is why border-collapse: separate; solves the problem. Suddenly, the browser can display the top border not caring about the pseudo element.
If you look closely, you can clearly see that the missing part of the border is the width of the second column. If you change it to after pseudo element, the border is missing in the bottom-right corner, again due to the fact that the borders of the table and the pseudo-element are collapsed.
If you change the border-bottom of th to be 3px solid red in collapsed mode, the th overpowers the table and the border is red. I presume, the power of after and before follow the same rule. It would be nice if someone who knows the specs better came to answer that.
Thinking this way, I do not believe there can be any other solution than:
using separate borders
putting the pseudo element on the parent div
What I inspected is that the pseudo element is actually rendered as block and can be change to table and list-item. However, none of these change the behaviour.
Very random stuff that is actually compliant with Av Avt's answer about where the pseudo element is rendered in regards of the DOM.
If I append the :beofre like this, the border stays:
.thumb.tright table.infobox.vcard tr:before
Obviously, it creates as many new pseudo element as there are rows.
We're using the following code as a vertical spacer in an HTML email:
<div style="height:14px; font-size:14px; line-height:14px;"> </div>
This works well everywhere -- except Hotmail where it creates a very large space. We've researched this a bit and it seems Hotmail embeds CSS by default that causes a lot of issues.
We've included the following code to try to address the issue, to no avail:
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; margin: 0; padding: 0;}
Hoping that someone else here might have a solution or even a workaround.
If its just a spacer then why not use a table with a spacer image instead. Most email clients prefer a table over a div with inline style and will render it correctly. Something as such:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10">
<img src="http://media.instantcustomer.com/22033/0/5_spacer.png" alt="" width="1" height="10" border="0" style="border:0" />
</td>
</tr>
</table>
Change the height from 10 to whatever height you need. You ll have to specify the height in the td as well as the img element. Replace the spacer image if you like. You might even be able to get away with not using a spacer image at all.
You can use this: <br> <br> or you can wrap it in a font tag to set the height. You can also use padding in your <td>, or a table as saganbyte suggested.
Just note that Outlook wraps <p> tags around tables, which adds about 15-20px of vertical spacing if someone forwards your email. Using a table rows instead adds only a few pixels. With this in mind, always keep your background colors the same so that you don't get an unwanted line.
When I try to use position: relative / position: absolute on a <th> or <td> in Firefox it doesn't seem to work.
Easy and most proper way would be to wrap the contents of the cell in a div and add position:relative to that div.
example:
<td>
<div style="position:relative">
This will be positioned normally
<div style="position:absolute; top:5px; left:5px;">
This will be positioned at 5,5 relative to the cell
</div>
</div>
</td>
That should be no problem. Remember to also set:
display: block;
Since every web browser including Internet Explorer 7, 8 and 9 correctly handle position:relative on a table-display element and only FireFox handles this incorrectly, your best bet is to use a JavaScript shim. You shouldn't have to rearrange your DOM just for one faulty browser. People use JavaScript shims all the time when IE gets something wrong and all the other browsers get it right.
Here is a completely annotated jsfiddle with all the HTML, CSS, and JavaScript explained.
http://jsfiddle.net/mrbinky3000/MfWuV/33/
My jsfiddle example above uses "Responsive Web Design" techniques just to show that it will work with a responsive layout. However, your code doesn't have to be responsive.
Here is the JavaScript below, but it won't make that much sense out of context. Please check out the jsfiddle link above.
$(function() {
// FireFox Shim
// FireFox is the *only* browser that doesn't support position:relative for
// block elements with display set to "table-cell." Use javascript to add
// an inner div to that block and set the width and height via script.
if ($.browser.mozilla) {
// wrap the insides of the "table cell"
$('#test').wrapInner('<div class="ffpad"></div>');
function ffpad() {
var $ffpad = $('.ffpad'),
$parent = $('.ffpad').parent(),
w, h;
// remove any height that we gave ffpad so the browser can adjust size naturally.
$ffpad.height(0);
// Only do stuff if the immediate parent has a display of "table-cell". We do this to
// play nicely with responsive design.
if ($parent.css('display') == 'table-cell') {
// include any padding, border, margin of the parent
h = $parent.outerHeight();
// set the height of our ffpad div
$ffpad.height(h);
}
}
// be nice to fluid / responsive designs
$(window).on('resize', function() {
ffpad();
});
// called only on first page load
ffpad();
}
});
Starting with Firefox 30, you'll be able use position on table components. You can try for yourself with the current nightly build (works as standalone): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
Test case (http://jsfiddle.net/acbabis/hpWZk/):
<table>
<tbody>
<tr>
<td style="width: 100px; height: 100px; background-color: red; position: relative">
<div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
</td>
</tr>
</tbody>
<table>
You can continue to follow the developers' discussion of the changes here (the topic is 13 years old): https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Judging by recent release history, this could be available as soon as May 2014. I can barely contain my excitement!
EDIT (6/10/14): Firefox 30 was released today. Soon, table positioning won't be an issue in major desktop browsers
As of Firefox 3.6.13, position: relative/absolute do not seem to work on table elements. This seems to be long standing Firefox behaviour. See the following: http://csscreator.com/node/31771
The CSS Creator link posts the following W3C reference:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
Try using display:inline-block it worked for me in Firefox 11 giving me positioning capability within the td/th without destroying the layout of the table. That in conjunction with position:relative on a td/th ought to make things work. Just got it working myself.
I had a table-cell element (which was actually a DIV not a TD)
I replaced
display: table-cell;
position: relative;
left: .5em
(which worked in Chrome) with
display: table-cell;
padding-left: .5em
Of course padding usually is added to width in the box model - but tables always seem to have a mind of their own when it comes to absolute widths - so this will work for some cases.
Adding display:block to the parent element got this working in firefox.
I also had to add top:0px; left:0px; to the parent element for Chrome to work.
IE7, IE8, & IE9 are working as well.
<td style="position:relative; top:0px; left:0px; display:block;">
<table>
// A table of information here.
// Next line is the child element I want to overlay on top of this table
<tr><td style="position:absolute; top:5px; left:100px;">
//child element info
</td></tr>
</table>
</td>
The accepted solution kind of works, but not if you add another column with more content in it than in the other one. If you add height:100% to your tr, td & div then it should work.
<tr style="height:100%">
<td style="height:100%">
<div style="position:relative; height:100%">
This will be positioned normally
<div style="position:absolute; top:5px; left:5px;">
This will be positioned at 5,5 relative to the cell
</div>
</div>
</td>
</tr>
The only problem is that this only fixes the column height problem in FF, not in Chrome and IE. So it's a step closer, but not perfect.
I updated a the fiddle from Jan that wasn't working with the accepted answer to show it working.
http://jsfiddle.net/gvcLoz20/
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.