I have this classic <td> which has the style attribute overflow: hidden set. Inside the cell, I've put a <div> with position: relative, and inside the block there are absolutely positioned large images that I want to be clipped to the boundaries of the cell. Meaningful example:
...
<td style="overflow: hidden;">
<div style="position: relative;">
<img style="position: absolute; left: 0px; top: 50%;" src="verylargeimage.png" />
</div>
</td>
...
It seems to work fine in IE8, IE9, Firefox and Opera, but it fails on Chrome: the image spans over the boundaries of the cell.
I have the same behaviour when I print the page in IE.
I'm aware that the overflow attribute on table cells isn't well defined. Is there any way to obtain the desired effect without using background images? The result must be printable.
UPDATE I don't want to use Javascript either. I want it to be my last resort.
overflow : hidden has a meaning - which is hide everything which is going out of "defined" area. which means you will need to define what will be your width / height or both will be and it will hide anything which des not fit there.
Try using table-layout:fixed on the table element and defined width/height on the td. It stops the layout engine from trying to adjust the table cells based on their contents. It's still not gaurenteed to work but it's your best shot. Frankly though I don't think it can really be done.
I should point out that overflow on table cells is actually well-defined - the standard specifically doesn't support it. What you're doing is a hack.
You may want to make use of the CSS Clip property and it is not even CSS3. Looks like it fits in your kind of situation.
The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape.
Check this link below and read the CSS Clip part.
http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties
Related
Posted some times ago on SO Span to take full height on a TD, as I tried some workaround, I've found a suitable code to do what was expected (the accepted one), but wasn't able to determine why this is working, so why
<td style="padding:0px;">
<span style="height:100%; width:5px; background-color:pink;"> </span>
</td>
make so much difference with
<td style="padding:0px;">
<span style="height:100%; width:5px;
background-color:pink;display:block;overflow:auto">
</span>
</td>
Here's a jsfiddle to explain more http://jsfiddle.net/7kkhh/2/
Can someone who know in depth the mechanism behind display and overflow explain this? (is it related to this particular situation or is it commonly used ?)
EDITED:
This seems to only happen on Chrome
A span element is, by default, rendered as an inline-block, just like text-nodes. They collapse around their child elements (or: they take up as much space as their child elements need, but nothing more than that).
A div element is, by default, rendered as a block. They expand to the size of their parent element, unless their child elements don't fit in it. If overflow (actually a shorthand for overflow-x and overflow-y) is auto (default), the element will expand until it's child elements fit. That will in turn expand it's parent elements, unless they have an other value set for overflow. If overflow is scroll, the element will not be expanded if the child elements don't fit in this element, but instead scroll bars will be displayed. If overflow is hidden, the element will not be expanded, but the (parts of) the child elements that are outside the parent element will be hidden (this doesn't mean that you can't scroll the element, but no scroll bars will be visible).
As inline-block conflicts with height: 100%;, the CSS style is ignored while rendering. A table cell has a display value of table-cell or something similar. I am not sure about it's behaviour. Tables and layout are always a troublesome combination to get a consistent layout in different browsers. Validating your document in xhtml-strict will usually help with displaying your document consistently across browsers.
overflow determines what happens if your block does not fit it's given dimensions. This is especially important if you are loading a picture as well.
For display you might want to read up on this :
SPAN vs DIV (inline-block)
Now the difference:
prepare the size of whatever I estimate to be in here and make it pink
vs
background-color:pink;display:block;overflow:auto">
make it pink now this was actually a block not a span and it it does not fit increase size until it does.
But seems you code shows unwanted behaviour on firefox as well and only works on chrome suggesting that maybe this is not the solution you are after.
Which code in HTML will allow me to use an image as a background image for a table, but not so that it would be repeated several times vertically and horizontally (in case the table is several times bigger than the image), but in such way that the image height is stretched out to be equal to the height of the table, and its width is stretched out to be equal to the width of the table?
The CSS background options can't handle this reliably across browsers, so you need to put an <img> tag in the table and position it appropriately. As Petr Marek alluded to in the comments, you can do this with the CSS attributes z-index and position, but it's not elegant.
If you set position: relative on the table, you can set position: absolute on the <img> with top: 0; height: 100%; left: 0; width: 100%; to position and size the image, and set z-index: -1 to make it appear behind the other content.
Here's a working example on jsFiddle.
Although it works perfectly for me in Chrome, since you're putting content on top of an image I wouldn't be surprised if it caused some browsers to mess up text selection or something else.
Presentation is the job of CSS, not HTML. You can use background-size in supporting browsers.
HTML stands for Hypertext Markup Language. It is not code. It is intended to provide semantic meaning and structure to a web-accessible document. Entities such as images are purely presentational cruft that was added because we got bored just reading text all day.
That being said, you can use CSS to possibly achieve what you want, but it may be bit tricky. An idea that comes to mind is adding an image element to the page with a height and a width set to be 100% of its container, and then positioning your table, with a transparent background color, over it. You'll have to look into z-indexes, obviously.
http://warhawkcomputers.com/Birenbaum/Projects/Pong/Pong.html
Hey guys, so I fixed all of my projects except for pong under the fourth quarter tab of the website. It's keypresses and movements work perfectly fine, but for some reason the positioning is off in firefox. Both IE and FF recognizing the elements are associated with the second table, but for some reason firefox continues to think that (0,0) is the upper left corner of the page, not the associated table. Thanks guys.
When giving items an absolute positioning, you are automatically assigning that absolute positioning from the next defined container. This container must also have absolute positioning for these child elements to have absolute positioning from the 0,0 position of the parent container.
Here is your code (from your page):
<table height="300" width="575" bordercolor="#000" border="1px" style="position:relative;">
<tr>
<td>
<img src="Images/Paddle1.JPG" style="position:absolute; top:5px; left:3px;" id="Paddle1" />
<img src="Images/Paddle2.JPG" style="position:absolute; top:5px; left:555px;" id="Paddle2" />
<img src="Images/Ball.JPG" style="position:absolute; top:120px; left:265px;" id="Ball" />
</td>
</tr>
</table>
In order for absolute positioning for the images to work the way you want them to in FF, you'd have to absolutely position the table containing them.
While I would suggest you use div layers for containing them, it would appear that in your case you could use an easier approach (albeit frowned upon) by creating three columns in your table and use left alignment on the paddle1's td and right alignment on the paddle2's td... Again, but I'd suggest you write it to use div layers to control layout as that's what's considered "proper" nowadays.
Here's a handy reference to view on positioning. Basically it's letting you know that the position property is pretty buggy in most browsers. I'm sure it works in IE because, well, there are a lot of odd coding samples that work in IE... It's strange, but always best to do it proper. :)
You can't relatively position a table cell, which is why absolute positioning does not work in a table ;)
I would suggest you put a container div inside that main table cell width: 575px height: 300px; or to match the inner width height of that cell and relatively position it instead
You will need to add position: relative; to a containing div for the paddles.
I have the following problem and I don't know how to solve it. I have an HTML table and one of the cells contains an input element. My problem is that in Firefox when I type something that overflows the input width the text will be hidden (which is the behaviour I want), but in Internet Explorer 6 the width of the input will be automatically expanded and the whole page format goes to hell because of it.
I've been doing some googling and it all points out to the so called "overflow bug" in IE 6, yet I have absolutely no idea how to solve it.
I've tried setting overflow: hidden on both the input element and the containing cell (td) with no effect. I've also tried setting a max-width again with no success.
Any ideas?
IMPORTANT Due to the way the application I'm working on is programmed I can only modify the CSS of the element, not other HTML properties...
can you set max input characters on the box that may help solve it!
hold on try this css!
table {
table-layout: fixed;
}
The first question would be : Do you really need to support IE6 ? Even microsoft stopped supporting it that a sign isn't it ??
http://www.w3schools.com/browsers/browsers_explorer.asp
You could try to put a DIV inside your TD. Set a fixed width in the style of the div and set its overflow to hidden. Then put your input box inside the div.
This way even if the input box expands it should be hidden by the Div hidden overflow. It might not be pretty since the box will look cut at the end but it won't destroy your design.
I'm not sure it will work though since it's a bug it might not conform to the rest of the css either.
Use this:
input [type=text] {
width: 100px; \\ That suits you best
overflow: hidden;
padding: 2px;
}
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.