I have textarea in a td element as a field for description as shown in the picture below.
When i resized the textarea vertically, it work just fine
but...
when I resized the textarea to its original height, it affects the other TD like it shown in the 3rd image.
What I want it to prevent if from happening.
Note: It only happens in Chrome, Firefox can handle this problem.
EDIT:
Here is the fiddle link.
http://jsfiddle.net/kvKZu/42/
Change height:100% to height:auto for img tag
<tr>
<td rowspan="6" style="width:200px;"> <image scr="#" style="width:100%; height:auto;" ></image> </td>
</tr>
Fiddle:http://jsfiddle.net/kvKZu/48/
Related
I have a table and the overflow: hidden property doesn't work, why is that?
<table width="100%" style="table-layout:fixed">
<tr height="200">
<td width="100%" height="200" valign="middle" style="text-align: center; overflow: hidden;">
<img src="http://salesdey.com/product_images/eb235de7eee13a0aa61dae2cc9de1f7e.gif" width="100" />
</td>
</tr>
</table>
According to w3schools :
The overflow property only works for block elements with a specified height.
Since <div> is a block element you can try to use that in your <td> cell and then apply the property on it.
Also, as commented by #Roberrt this is already answered here in detail.
Why does overflow:hidden not work in a <td>?
Because the contents of a cell never overflow the cell in the Y direction. The cell height will always grow vertically to contain its contents. So there's nothing for the overflow property to do.
overflow:hidden not work on table-cell, if you can change the html, you should use a div instead of table.
But if you can do it... Then you should add display:inline-block to the td.
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/
Is there an alternative to negative positioning in HTML emails? The image in the second table below is positioned 100px up using negative positioning. I need that image to overlap somewhat with the content above.
<table>
<tr>
<td valign="top" width="400" style="padding-right:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem Impsum</p>
</td>
<td><img src="kneeler.jpg" /></td>
</tr>
</table>
<table>
<tr>
<td style="position:relative; top:-100px;"><img src="shoes.jpg" /></td>
<td valign="top" width="400" style="padding-left:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem ipsum</p>
</td>
</tr>
</table>
I've tried padding-top: -100px; but that did not work. Please help!
You can do this by wrapping the element above in a div and setting the height of the wrapper to be less than the actual height of the element. (for example, height:200px if the element is naturally 300px and you want 100px of overlap) The element will overflow the wrapper, but the next element will start where the wrapper ends.
See answer here:How to position an element on top of another element without using position and margin?
And the example:
https://jsfiddle.net/acq3ob6y/1/
Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.
The only way to accomplish an image overlapping the container is to fake it. See this similar question for an example
I have a table which has images in its cells. I want these images to shrink automatically when the window width is reduced. But they should not expand beyond their native size when there's extra space around.
I have a solution for this which works in Chrome, but it does not work in Firefox or Internet Explorer. On Firefox and Internet Explorer, images do not shrink when the window width is reduced, and instead a scroll appears.
How do I get it to work on all browsers ?
JSFiddle: http://jsfiddle.net/ahmadka/GeDxr/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/JhsED
HTML:
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/mastercard.png" />
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
Change width:auto to width:100% does the trick.
Updated jsFiddle
Try changing the max-width to the largest or actual size of the image - 56px.
That will ensure that the image gets no larger. You might also add max-height.
I've got a problem on beta.ovoweb.net ; the td (below the tabs, little grey line) isn't visible in Chrome. It is in Firefox. How can I fix this Chrome problem?
The content of the td has zero height. Put content inside of it that has height.
Because Chrome ignores blank area.
Try
<div id="ovoSubmenuContent"> </div>
or
<td colspan="2" height="5">
<div id="ovoSubmenuContent"></div>
</td>