I have a height issue. I'm working with this table. - enter link description here
I'm trying to get the table to shrink in height. Its way to high length wise.
If anyone can help me, I would appreciate it. Do you see where the crystal image is? I want that row to be lowered in height. I've tried everything to get it to work, but I cant figure it out.
It needs work. Centering text etc.
There are ASP.NET sessions being included within the table.
The text-inputs all the way on the right are forcing the cells on the left to expand to their height. The only way to make the other cells "shorter" is to reduce the number of text-inputs on the right (or to make each of them smaller with CSS).
If you are looking to show the crytal in the middle of the cell, then use the below style for the text.
vertical-align: middle;
add this to your CSS. I have only found one solution to your problem i-e if you reduce the font-size you save lot of heigh in your table.
#main_table td
{
font-size:9px;
}
Related
Just about given up trying to solve this! I should say though I am not great with code and there's probably an easy solution staring me in the face.
For some reason the column widths in my WooCommerce cart table are very off, the width of the 'product-remove' and 'product-thumbnail' columns is far too wide and I have no idea what is causing all the blank space to the right of the images?
I'd like the 'product-name' to be the only column with space to the right of the content if it doesn't fill the space.
Have a play with the website here and hopefully someone can come up with a solution for me.
There is a rule in your CSS that's trying to make table TD's 50% wide:
.entry-content td {
width: 50%;
}
Line 30 in the source code of the /cart/ page.
you can set width of columns by your self.
Plugins->editor->woocommerce->cart-template.php
can perform edit at this location like normal HTML. Its simple
I am experimenting with a fixed header table (I have seen many plugins online but I want to do it myself using PURELY CSS) at http://dev.driz.co.uk/table.html
However I have two issues:
The headers doesn't stretch the width of the table anymore and is no longer in sync with the table rows below. How do I fix this?
I have put a border around the table and also around the table cells and so have now ended up with double borders in some places. How can I get around this? As I need the table to have the border as the cells will not always be on screen and cannot be relied on to provide the box around the table.
If someone can help, it'd be much appreciated.
Through experimenting I've found that position:absolute on either tbody or thead is causing the issue where your table head items aren't lining up to the table data. Absolutely positioning an element breaks it out of the rendering flow of the page. So adding position:absolute to thead causes the header items to collapse to the content in them and adding it to tbody breaks the table data cells from normal flow which means thead cannot relate its cell widths to tbody's.
This is just what I've found but if I'm wrong I'm open to correction.
Using table-layout: fixed; solves the issues!
I am generating the Html in Excel sheet and entire table is fine and except the
two cells are much wider. How do I reduce the width of those cells. I tried changing
the width and everything but no use. It works fine on Html table. On Excel spreadsheet it looks different.
Well, Chrome v6.0.472.62 and Firefox 3.6.10, both on Ubuntu 10.04, allow:
th, td {width: 7em; max-width: 8em; }
the max-width seems to be the important part, preventing the cell from growing. Also the white-space: nowrap is important if you don't want the cell to wrap the contents within the defined width.
There's a demo over at jsbin.com, I've not hidden the overflow on the overflowing cell, deliberately so that you could see it in effect, though in real use you'll need to work out some way of showing the actual contents of the cell without it obscuring the content of its neighbours.
Since its a HTML table, just two cells cant be big. its either one entire row bigger or one entire column bigger.
If that is the case, the dimensions are best-fit based on the content of those cells. Therefore, the width attribute won't take effect. if wordwrap is not helping, changing the fontsize of that exact cell alone can help you.
Something else to check: make sure that you're outputting the proper number of cells per row taking careful account of row/col spanning. If you miss one somewhere, the whole thing will be screwy.
I am designing a website for a client, and I am trying to get two side-by-side DIVs to adjust to 100% of their container. I've got the side-by-side done, but I can't get the right DIV to be the same height as the left one.
You can view the problem here: http://www.campusmomlaundry.com/
The "challenges" and "benefits" DIVs should be side-by-side and the same height, without manually specifying the height. How can I do this?
Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.
You have couple of options:
Use the background solution mentioned in the #R0MANARMY answer to create the visual ilusion of two equally tall columns.
Set the height of the two inner divs to be the same exact number (using px or em)
Set the height of the outer div to an exact number.
Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
Use simple table with one row and two columns.
I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.
([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)
There's an article on A List Apart on solving a similar problem, you could probably use that as a reference: Faux Columns.
If it was me. I would solve this problem via javascript. Using jquery you could do...
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
That should do it. If your like the people I work with, and you don't like using Javascript for CSS problems. Then you are probably flat out of luck. Alot of the time, it is much faster just to use JQuery, then to use the "right way" using css. You could probably spend all day trying to get it to work with different combinations of styles.
Perhaps number of bullet points in the left DIV?
Have you tried: height: auto; or height: 100%;?
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>