I have a <table> with CSS property of width: auto, which has a variable number of columns. The rightmost column has no width set. In IE8/Firefox3.6.12 the table resizes as desired according to the content width of that column. <table>). In IE7, it fills out to the right border of the containing . By setting the width of that column in CSS, I was able to get it to display with the same width across IE7/IE8/Firefox3.6.12.
I dont know if I understood right your question but, Did you try adding a width:auto; to THAT column in particularly???
What I would probably try If I would be working with tables in IE is to have most of the elements with a defined widht and height. Sometimes when there is no specification the elements doesnt display...
Maybe thats the problem...
If not, please add some code so we can see better your problem.
Related
I'm trying to leverage the css 'column-count' in combination with CSS padding, and and I'm observing that if I specify a column count of 3, the browser renders part of a fourth column if content doesn't fit. as shown below
Here is a JSFidle -> https://jsfiddle.net/w40jcykp/1/
I'm seeing this in Chrome & Edge. is this a known issue, or is there a workaround for this?
Thank you kindly.
The CSS below.
.newspaper {
column-count: 3;
min-height:144px;
height:144px;
padding:20px;
column-gap:10px;
border: 1px solid black;
overflow:hidden;
}
I think the issue here is that you've set a fixed height on your container. With the fixed height, the columns can't grow, so the rendering engine keeps making more columns to fit your content inside the container.
If you turn off overflow: hidden in your fiddle, you'll see that there actually a bunch more columns overflowing out of the side of your box. The padding just allows part of one of them to be visible.
The root cause here is height balancing. From MDN:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal. Firefox does this.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Since you've set the height, height balancing says that the browser will fix columns to that height, and will create as many columns as it needs to display your content.
You'll need to remove your fixed height if you want your columns to grow and flow correctly and obey your column-count property.
I'm using the CSS word-wrap property (set to break-word) to display a single no-spaced string in its entirety within a div element of fixed width and variable height. The div element itself is within a table cell <td>. The word break works as expected, breaking the word at the defined fixed width. However, in IE9 (with IE7 document standards), there appears to be some extra space after the div, causing the table cell to extend in width (not desired). The div width itself appears to be correct, as specified by its CSS. I used borders around the div and table cell to verify. I've tried explicitly setting the table cell width (and max-width) but neither approach works. This behaviour is not observed in Firefox or Chrome.
Edit: Added sample code here. The problem only occurs with IE (Browser_Mode=IE9; Document_Mode=IE7).
Apparently the td is making room for the full length of the word, as though it weren't breaking. You can prevent this by setting overflow: hidden on the div.
jsFiddle: http://jsfiddle.net/gmDpe/6/
I came across a similar problem once.
Have you tried to use table-layout : fixed on your table element ?
table-layout is a very little known but widely supported property which can be quite helpful in cases like this.
Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.
I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.
http://jsfiddle.net/k7esv/
1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?
2) Why are the width/height settings not honored?
3) Why doesn't setting the margin property have any effect on them either?
http://jsfiddle.net/k7esv/1/
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
I am trying to create a list that will float on the right side of an image.
So first of all to understand better, here is the fiddle :
http://jsfiddle.net/xpGbD/1/
Both the list and the image are contained inside a mutual DIV that floats.
What I am aiming for, is for the list to have a Key:Value pair, but some of the values are much longer than others.
This produces a problem, that when the value is greater than (DIV) - (Image) , the list jumps ABOVE the image, UNLESS I specify a fixed width for the list when floats right.
The problem is - I do not have a fixed IMG width , so if the width of the image is 100px for example, this will produce a large gap between the list and the image.
On the other had - if I fix a width on the LI elements , it will work, but will break if the image´s width will become bigger...
So the questions is :
How do I float the LIST elements to the right of the image without specifying width ??
Ps - another related problem :
at the current state - When a list VALUE is long , the key is positioned ABOVE the value. I would like it to start on the same line, and if needed to flow , flow below the VALUE areaa ,and not the key area (hence the )
Let me see if I've got the point...
When you try to float HTML elemets with unknown width, set the CSS property
display: inline;
To all floated elements.
Note that, the elements with different widths will not have an arranged grid view (table view)
If you want a table view : then you should specify width or use Table tag.
Hope this helps you.
Fiddled with absolute positioning yet?
http://jsfiddle.net/k4Rh8/
You going have limit the max width of the images, what's the problem in resize few images? Anyway, when you click at the image it will appears bigger right? Maybe a light box... And there's no wrap with a fidex width at your content right now, try this way...
Take a look, there was no fixed width at the div headblock...
http://jsfiddle.net/xpGbD/11/
Try to resize the image and see if it works as you wish.
The one with the min-width:
http://jsfiddle.net/xpGbD/12/
Just to register, maybe cold help someone in similar cases.
How do i set the table under the images to be the same width as the image above? Thanks for your help!
http://cran-web.com/letaky/generate/10
EDIT: I was talking about "tab_cena", not "tab_objednavky". Sorry for misunderstanding.
Set the width of your table (#tab_objednavky) to 100%.
Currently your style shows that you have the width of your table set to 160%.
(Nazdar!)
There are only 2 kinds of measurements you can give the table: a fixed width like 1000px, or a percentage like 100%. If you give a fixed width, then you have to know the width of the items above (4 cells, 249px each). If you give a percentage, then it depends on the size of the element that contains your table.
You can use a percentage to your advantage. Since your table is in a 249px cell and you want it to stretch across 4 cells, try setting the width to 400%. It's a little bit of a hack because you're breaking out of the cell container, but it should work.
A better way would be to make the .cell equal 249px x 4 (996px), and just make the #tab_objednavky table inside it 100% width.
Edit: to answer your question based on the title of your post: you can't do that without using JavaScript to set the size of the container div.
Not sure I am fully understanding, but #tab_objednavky style you have width: 160%. Just set that to width: 100% and it will fill the .cell container.
Looking at your layout it looks like the width of the image containers is set by the class .cell_1, so just add it to your table and you should set. (Actually you should replace the existing cell class that is already applied to it.)
Why don't you just place the image as the first row of the table?