I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.
Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?
<table>
<tr>
<td style="width:200px; border:solid 1px black;">
<!-- can only make changes inside here -->
<div style="border:solid 1px red; text-align:right;">ABC</div>
<input style="width:300px;" value="DEF">
</td>
</tr>
</table>
The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I've tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.
Anyone know how to do this? Thank you.
If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/
If you can't wrap the input part, you can use the expression that run just one time (so it wouldn't cause any performance problems): http://jsfiddle.net/AkVqS/2/
Related
So, I have a unique case where I'm using xslt to generate many (~50-100) div elements depending on the day from an xml like this:
<div class="allApps" >
Content here
</div>
<div class="allApps" >
Content Here also
</div>
...
I currently have them formatted into rounded boxes stacked vertically. How can I use css to position them into a "tabular" format, like fitting 5 in a row?
Alternatively, they were initially <li> instead of <div>. How could I implement tables with <li>?
The reason I'm doing this is to reduce the amount of scrolling required to get to the bottom of the elements.
Thanks!
If you goal is to reduce the vertical scroll then try to make some of them as
display:inline-block
You could make them all inline-block and then insert breaks every so often (like every 5th one). Or, if you want some great responsive options you could use Bootstrap.
If you are really set on using a table then li's have nothing to do with it. Li elements are for a list, not a table. Cells in a table use td like
<table>
<tr>
<td></td>
</tr>
</table>
But honestly, the easiest thing is probably to just switch to css display:inline-block.
I always seem to run into this same problem which I think is a bit of a gap in my CSS knowledge. I'm using bootstrap but any particular best method would be fine. I simply want to create something similar to this:
<table style="height:100%; width:100%">
<tr style="height:15%"><td></td></tr>
<tr style="height:70%; background-color:#EAB300; text-align:center;"><td>Main</td></tr>
<tr style="height:15%"><td></td></tr>
</table>
http://jsfiddle.net/c24hd/
But with divs rather than tables. It takes seconds to do with a table but when I replicate it with divs I run into the trouble of not being able to apply a percent based height to divs.
Any tips so I can stop running into this problem?
TIA
I would make a <div> and set the height to 100%. Then set the inner <div> margins to auto.
EDIT: Never mind that, the best is way is to display the div as a table and the inner div as a table cell then vertical-align it.
EDIT: One more, you can even use absolute positioning to center it on the screen.
Our application makes heavy use of tables for layout and positioning, and has in the past been IE (quirks-mode) only. Moving forward, we are trying to get out of quirks mode, and replace the tables with divs and a more semantic layout.
The one thing stopping us is a quirks mode "feature" which allowed us to set height=100% on a table row, and have the row take up the remaing vertical space. So far, we have not been able to find a way to do this outside of quirks mode, either with or without tables.
This is the code we are using in the body of the page. No styling shown here, but the effect is still the same:
<table width="100%" height="100%" border="0">
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<th>This is my header bar</th>
</tr>
</table>
</td>
</tr>
<tr height="100%">
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my main section bar</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my footer bar</th>
</tr>
</table>
</td>
</tr>
This is what it looks like in Quirks mode. Note that the middle row (with height="100%") has expanded to take up the remaining vertical space:
Standards mode renders the same code like this:
jsFiddle with the code: http://jsfiddle.net/RBeWN/3/ (Note that due to iFrames, etc. the code won't actually render in quirks mode on jsFiddle but you can force it by using Dev Tools).
I attempted to do this with divs and some css, but it doesn't work: http://jsfiddle.net/BVMhR/3/. Setting the main div to height: 100%; gives it the same height as its parent, rather than making it take the remaining space. Setting box-sizing: border-box; makes no difference to this either.
Could someone help me find a solution to this problem? I'd like to be able to do it without javascript if at all possible, but if Javascript is needed, it would have to be a generic solution that can run on every page so that there isn't too much development overhead for setting it up.
After playing around with quite a few different layouts, and clarifying a few specifics regarding the requirements, I have found a way to do this with pure CSS.
It does involve knowing the heights of both the top and bottom row (although they could be specified in %), and also does involve a few extra layers of divs.
My example can be found in this jsFiddle. Notice that when expanding / shrinking the window, the middle row re-sizes appropriately. It is also possible to make this one into a scrolling div if necessary (with overflow: auto) so that the content will scroll when it is too long.
Feel free to contact me with any extra questions about this layout if needed.
I don't think this can be solved with pure CSS.
http://jsfiddle.net/AZcZx/10/
This is how I would do it with javascript... I'm sortof assuming based on your names for the divs that this is how your pages handled header, content, footer and so this should be general enough for that.
I've added borders/margins to show that there is an edge case there, which jQuery helps nicely with... I also assume that the content vertical centering in your quirks-mode example is not part of the question.
EDIT:
I stand corrected. It can be done with CSS, though it creates a width issue that was not quite trivial to fix, so here's the fix for that:
http://jsfiddle.net/AZcZx/27/
Do you know the height of the header and the footer? Looking at your fiddle example with the divs, they both have a fixed height. If that is the case you could just absolutely position them to the top and bottom, and add a margin to the top and bottom of your #divMain.
You also need the html and body set to height: 100%; and the #divMain set to min-height: 100%;
You need to expand the body and HTML to 100% for this to work. "height:100%" makes an item 100% of its parent. Without a defined size of the parent, it will only be as large as its children.
body, html {height:100%}
I'm having a problem positioning an absolute div outside a table, I'm not a big fan of table layout but I found an existing project with a table layout. The code is as follows
<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
<tr>
<td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--comp--C--]
</div>
</td>
</tr>
<tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
</table>
</td>
Where [--C--comp--C--] is the replacement string for an fckEditor that contains an image inside a div, I have set that div's z-index to 10 but it doesn't want to go out of the table.. and its position absolute.
Please let me know what I might be doing wrong.
I've realised that the problem comes with the overflow-scroll on the td container, if you remove the overflow-y:scroll it works fine, but the problem is that I need to have that overflow since there is a lot of content inside that td. I don't know what to do now. :(..someone please help a brother out!
I need the small map to be outside the table and the big map to remain inside the table, it shows the small image when you hover on the big map using Jquery to zoom, which is loaded on the fckeditor. I hope this helps..
For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative ). Also, I'd assign the table a position and z-index for the two to compare.
In saying that you want to absolutely positioned element "to go out of the table", do you mean that you want it to be positioned outside the table, not based on the table's location? Or do you mean you want it located inside the table, but not clipped to the table's borders or overlapped with other content?
If it's the former, I'd suggest moving the absolutely-positioned DIV elsewhere in the code. Why put it inside the table if it's not going to be shown there? It just makes the stacking context and overflow properties harder to work around.
If it's the latter, you might want to adjust or remove the overflow-x and overflow-y properties on the div that contains your absolutely positioned element. It's conceivable that the browser would still apply the overflow clipping rules to child elements, even if they're absolutely positioned.
Also, keep in mind that z-index is only meant to affect the stacking order of sibling elements. Elements that are on the same level of the tree, in other words other elements inside your 500px-height div, will be stacked according to their z-order, but parent and child nodes play by different rules.
If this answer doesn't help, then maybe I'm misunderstanding what you want to do. Can you post a picture of how it's behaving and describe how you'd like it to behave?
Edit in reply to picture being posted:
I think what you want to do in this case is to get the small map outside of the scroll DIV somehow. Can you change this...
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--comp--C--]
</div>
...to something like this?
[--C--compSmallMap--C--] <!-- Small map code goes here -->
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--compBigMap--C--] <!-- Big map code goes here -->
</div>
If not, could you change the code that's getting inserted so that it creates the small map at a higher level in the code? For example, you can add elements to the root node using document.getElementsByTagName("body")[0].appendChild(element); (there might be a better way than that, just an example). Using that, or something like that, you might be able to put your small map higher up in the document tree, which would prevent it from clipping.
This question already has answers here:
Tables overflowing with CSS in Firefox
(2 answers)
Closed 5 years ago.
The important thing in my example below is the wideData class selector. I want to use this to cause text surrounded by a wideData div to appear in a scroll box if it cannot otherwise be displayed without causing a horizontal scroll bar to appear on the containing browser window (overflow:auto).
This works as I want if the div is not contained within a table cell (try removing the table, td and td elements in the example and you'll see what I mean). However if I place it in a table cell the contained text always takes as much space as it wants and the user has to scroll the containing page to see the right side of the text.
I do not want to specify absolute widths on the table or the cell. This layout is to be used in a situation where I want to display large amounts of text which can wrap normally but which is interspersed occasionally with little blocks of very wide text that must be displayed without wrapping (and which should appear in their own scroll boxes without causing the containing page to become really wide). And I don't want to put an absolute width on the div elements - I want to display as much as possible of the "wide" text (and I know that my users do not have a standard screen/browser width).
<html>
<head>
<style>
.wideData
{
background-color:red;
overflow:auto;
}
</style>
<title>Example</title>
</head>
<body>
<table width="100%">
<tr>
<td>
A
<div class="wideData">
<pre>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</pre>
</div>
B
</td>
</tr>
</table>
</body>
</html>
PS you may ask why I'm mixing tables and CSS or if I have to use this layout. I'm restricted by having to live with content generated by a system that is not under my control. I can change the CSS rules - and if pushed could use something like Greasemonkey to change the delivered HTML on the client side (I'm not in a position to change it on the server side).
Sorry to answer my own question...
The missing ingredient seems to be table-layout:fixed - this seems to achieve the effect I want.
This came from Tables overflowing with CSS in Firefox.