I am working on a table that I cannot edit, I cannot add any HTML, I cannot add any JS. Everything has been pre-generated and all I can do is add CSS to it.
So table has 2 rows, one is sidebar, second is center content. I wanted to make the sidebar 210px wide and float it left, the same I did to center content. All works fine in all browsers but IE7. When I inspect it with IE7 developer tools, I can see that the row and the TD under it are always 100% wide and there is no way to assign a width value to it.
Is there a work around to this problem?
Sample code.
<table>
<tr id="sidebar"><td>Some data</td></tr>
<tr id="main"><td>Some data 2</td></tr>
</table>
CSS:
#sidebar
{
display:block;
width:210px;
float:left;
}
#main
{
display:block;
width:730px;
float:left;
}
Please advise
i don't have ie7, but setting the rows display:table-cell; and putting a width on the table works in chrome in this example. http://jsfiddle.net/jalbertbowdenii/7Wuku/
I think a good way of doing it is without the second row... Of course if you can make your markup like this:
<table>
<tr>
<td id="sidebar">Sidebar content</td>
<td class="main_cont">Main content</td>
</tr>
</table>
In this markup you won't need to float the tds, simply state the width.
A live example is here: http://jsfiddle.net/skip405/QySz2/1/
But if you can't change the markup - I'm afraid you'll never teach IE7 to float table rows))
Related
I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...
My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.
The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.
What can I do to make it work in Firefox?
Demo: http://jsfiddle.net/AGYGH/
HTML:
<table id="OuterTable" border="1">
<tr>
<td id="TableCell">
<table id="InnerTable" border="1">
<tr>
<td>Dummy text of varying length</td>
<td>Dummy</td>
</tr>
</table>
<div id="AbsoluteDiv">
<div id="InnerDivLeft">Left Div</div>
<div id="InnerDivRight">Right Div</div>
</div>
</td>
<td>
<select multiple="multiple" size="10">
<option>Varying length options</option>
</select>
</td>
</tr>
</table>
CSS:
#OuterTable {
position:relative;
}
#TableCell {
vertical-align:top;
position:relative;
}
#AbsoluteDiv {
background-color:red;
position:absolute;
width:100%;
bottom:30px;
}
#InnerDivLeft {
float:left;
}
#InnerDivRight {
float:right;
}
I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".
Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.
This article has a good JS alternative for the issue.
Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.
So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:
$('#TableCell div.wrapper').height($('#TableCell').height());
Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/
So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
In both IE8 and Firefox I am experiencing the following:
I have a panel that is 30px in height, within this panel I have a single row table with 30px in height. When it displays on the browser window the table does not fill the height of the panel (there is a small amount of the panel showing on the top and bottom. How do I correct this so that the table takes up the entire height of the table?
HEADERPANELTABLE CSS:
table.masterHeader
{
background-color:transparent;
border-collapse:collapse;
height:30px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
display:block;
width:820px;
}
HEADERPANEL CSS:
.HeaderPanel
{
background-color:#0079d0;
height:30px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
padding:0;
width:820px;
}
SPACER CSS:
div.Spacer
{
background-color:transparent;
height:30px;
}
MAINPANEL CSS:
.MainPanel
{
background-color:#6699cc;
height:700px;
margin-left:auto;
margin-right:auto;
width:820px;
}
HTML CODE:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
<asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
<table class="masterHeader" cellspacing="0" cellpadding="0">
<tr>
<td class="Account"></td>
<td class="Name"></td>
<td class="Spacer"></td>
<td class="CompanyName"></td>
<td class="Logout"></td>
</tr>
</table>
</asp:Panel>
<asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
<div class="Spacer"> </div>
<asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>
Have you looked at the page in something like Firebug, where you can look at each DOM element, see the attributes (like margin, padding, and so on). That way you might be able to see exactly where that extra spacing is coming from, and what styling attributes are being applied to each element.
set the cellspacing to 0
<table cellspacing="0">
<tr>
<td></td>
</tr>
</table>
You haven't posted code (HTML or CSS) or stated what browsers you are seeing this in, so difficult to know for sure. Some suggestions:
make sure your table has zero margins
make sure the panel doesn't have any padding
make sure cell spacing is zero
make sure some other element isn't blocking the table
make sure your css styling is not being over-ridden somewhere
If you don't have it already, you should install the Firebug addin https://addons.mozilla.org/en-US/firefox/addon/1843/ for Firefox. This makes it extremely easy to inspect the DOM and CSS styling applied.
Because an ASP:Panel breaks up the panel into div tags and with rounded corners it add anothe 1px border to the panel which is placed after the table has been placed. In order to fix this the table had to be placed within a div tag and float the div above the panel.
I notice that you aren't doing anything about your table borders. Could this be the gap you are seeing? If your borders have any width for any reason then they could be showing which might be giving you the effect in question.
I made a quick jsfiddle proof of concept based on what I assume your outputted HTML will look like in its simplest form. I'm not familiar with the RoundedCornersExtender control though and I suspect that is modifying the HTML of the main div.
http://jsfiddle.net/tAgp3/1/
You can see that this simplified form works but I assume that the rounded corners is trying to do some nasty tricks with embedding extra DIVs with background to do rounded corners. These could be what is causing your additional padding.
Again I ask if you can post the actual html outputted to the browser so we can see if this is the case or not.
This looks fine in safari, but not in firefox 3.0.11
Firefox: http://i31.tinypic.com/11s1d00.png
Safari: http://i30.tinypic.com/fnxu2v.png
HTML for the table:
<table class="placement-testing-schedule">
<tr>
<th>Day</th>
<th>Date</th>
<th>Check-in Begins (Entrance of College Center)</th>
<th>Test Begins</th>
<th>Registration Begins</th>
<th>Seating Availability</th>
</tr>
<tr>
<td>Tue</td>
<td>8/18/09</td>
<td>10:45 AM</td>
<td>10:00 AM</td>
<td>12:30 PM</td>
<td><span class="open">Open</span></td>
</tr>
<tr>
<td>Wed</td>
<td>8/26/09</td>
<td>10:45 AM</td>
<td>10:00 AM</td>
<td>12:30 PM</td>
<td><span class="open">Open</span></td>
</tr>
</table>
The css for the table:
/* ---------- Placement Testing ----------- */
.content-body .col-middle table.placement-testing-schedule {
margin-bottom:10px;
border-spacing:10px;
}
table { border-collapse: collapse; }
.content-body .col-middle table.placement-testing-schedule td, th {
border:1px solid #055830;
background-color:#ffc;
padding:7px;
}
.content-body .col-middle table.placement-testing-schedule th {
background-color:#fdbe2f;
}
Anyone know why it is being cut off in firefox? Heck, it even looks correct in IE6 & IE7.
Try adding the border (same one that's on the td,th elements) to the table itself.
Is it just a standard table? Might help to post the HTML as well, so we know exactly what you're working with.
Are you using CSS border-collapse on the table element? Firefox renders that property differently than the other browsers.
Remove the border-collapse and use cellspacing=0 instead.
<table style="border: 1px solid #000;" cellspacing="0">
It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.
Set your border widths to 10px in your code to see what is really happening.
This is a bug in Firefox. box-sizing: content-box is not applied to table cells, it currently only applies border-box which includes the border in the height/width, it is non-standard and needs to be fixed.
As it is now, it ignores the border and kind of adds it as a purely visual and not "physical" border. If you want, add a div above the table with a fixed height/width/border and see as firefox renders that div's border above the table border, overlapping it as if it wasn't even there. Now float the div to the left, now the left table border is overlapped by the div's border.
Unfortunately, the only way I have found to reliably make sure the border is visible is to add a margin: 0 1px 1em; to the table.
See Firefox's box-sizing spec and the bug that is causing this: bug 243412.
I had a similar problem (FF 3.6). But the solution in my case was just to add borders to the th elements in the header row (or remove that row entirely), which didn't have the border set. I see that in your case you already have those header row borders though.