I have a single column table with multiple rows some of which have a-tag links in them, the others just plain text. I can change the height of any cells except the ones that have a-tags in them; they remain unaffected.
#table tr td{
max-height: 20px;
}
This code changes the height of all the cells to 20px except the cells that have a-tags in them. They remain around 30px or so no matter what I do. How can I get the height of those cells to change too?
Define display:block is your <a> tag because <a> an inline element. An inline element did not take width , height ,vertical margin & vertical padding
Try overflow: hidden
If that doesn't work, please post some of your markup or make a jsfiddle :)
Related
I've created a css div table (display: table, table-row, table-cell). On one of the rows (div display:table-row) I'd like to set the height to 1px. I tried line-height:1px but it looks like this style is only applied if I include some type of text within the div like  . However, if I include   in the div, it appears that a minimum line-height of approx 10px is applied. Is there an approach that I can use within this div table to achieve a 1px height of this div?
Please try the followings:
style = "max-height: 1px;"
Adding zero font size to the specific row will help to remove space.
div.empty-div-row {
font-size: 0;
}
I have a three-column page. Each column is a div with the following styles:
.Row1 {
text-align:center;
display:inline-block;
vertical-align:top;
padding:0.5%;
width:31.5%;
}
The HTML is as follows:
<div class="Row1">
<h2>Header</h2>
<br />
<form>
Form stuff goes here
</form>
</div>
My form consists of nothing more than a text field, a few radio buttons, and a submit button. Problem is, putting the form into the above code will give me a centered form, with the text field, radio buttons, and submit button also aligned in the center.
What I am trying to do is to just center the form itself (as a container), but keep everything aligned to the left.
I have tried wrapping the form in a div that is text-aligned centrally, and the form style set to left align, but that didnt work. The auto margin thing didn't work, either, whether it was on the wrapping div, or on the form, without the wrapping div (that is, an extra div. the Row1 div always remains).
EDIT: http://jsfiddle.net/pJwqe/
text-align is not a property to 'align' divs or forms; instead, as it says, it aligns text.
If you want to center a block-level element, you'll have to use margin. The default way to center a single element with margin is to set it , for example for a top-level container, to margin: 0px auto 0px;.
If you want a lay-out with 3 columns, I'd rather think you'd want something like this.
You can style the margins of your divs by setting margin-left or margin-right, then style the first/last element with advanced selectors (so you don't have a margin-left for your first element, or a margin-right for your last).
As you can see, the forms are now centered, but their content is not. (You need to give your forms a width, else they will fill the containing block by default if they have content).
NB: It might be relevant in the rest of your code, but in this test-case vertical-align does nothing.
Hope this fiddle link will work for you. I have done the following changes in your css
.midAlign form {
border: 1px solid #C2C3C0;
margin: 0 auto;
padding: 10px;
width: 155px;
}
I'm developing something in asp.net and finally got round to creating the UI. I made a basic <div> element to wrap the content of my body in, and I notice that it auto fills the width to 100%. I create a new .aspx page to test it in, and the same results happen. So I create the following HTML document in notepad, save it as test.html and run it through Chrome, IE and Firefox and all three are returning a strip of 20px high and 100% width with a red background. Here's the code:
<head>
<style type="text/css">
#tester
{
height: 20px;
background-color: Red;
border: 1px;
}
</style>
</head>
<body>
<div id="tester">
</div>
</body>
Would anyone know what I could have done to make this so that it auto fills div elements to width: 100% on all browsers? I guess it's possible that I'm being absent minded and forgot that div elements did this automatically, but I'm 99% sure they didn't.
Thank you kindly,
Ben
From CSS 101 (BSD/MIT licences):
The horizontal position and size of a non-floating, block-level element is determined by seven properties:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
The sum of these seven properties is always equal to the 'width' of the parent element.
So yes, you've been absent-minded! Block-level elements (such as div) automatically fill the width of their parent unless they've been told not to by float.
<div>s are block-level elements, meaning they will automatically fill the horizontal space of their parent. Unlike inline elements such as <span>, which only take up the space required by their content.
DIVS are by default 100% of their parent element. So just set the width you need.
Also note that DIVs that have a width greater than their parent will by default also be completely visible unless you set the parent element to overflow:hidden.
How do I place the link Refresh on the middle in height of the div nav_bar?
<div id="nav_bar">
<a class="nav" id="refresh" href="#">Refresh</a>
</div>
Here is a fiddle for more help
http://jsfiddle.net/axuxT/
The easiest way is to set line-height to be the same height as the container. This will fail if you ever add more text that spans more than one line (dependent on your circumstances, you could avoid this with white-space: nowrap).
You could also add top and bottom padding, e.g. padding: 30px 0.
You could add display: table-cell and then vertical-align: middle. The only problem with this one however is that it is not supported <= IE8.
If you know the height of the parent div (eg: 35px), and you know it won't change, then you can just set line-height: 35px; on the link, and the browser's inline formatting will do the rest. I updated your fiddle to show this approach: http://jsfiddle.net/axuxT/1/.
Update
If you need the container div to be able to change size, it's a bit more complex. Here's an update to your fiddle that shows this approach: http://jsfiddle.net/axuxT/3/. Note that, in this case, the content needs to be display:block, with a known height. It also requires some additional markup - an additional wrapper div, and a floating spacer div.
It sounds like an easy thing to do, right? but there's no way that's correct, you just have to you margin-top or vertical-align or position: absolute; top: 50%; margin-top: -half-the-element-height-px'.
I hate CSS.
I have a td where I declare white-space:nowrap;. This prevents linebreaks in the text, but the cell size does account for the missing linebreaks and the text goes outside the td. Is there anyway to make the cell size account for white-space:nowrap;?
My code looks like this:
<tr><td style="background-color: #0C264C;color: #FFFFFF; padding: 2px; margin: 2px; white-space: nowrap;" >
<div style="float:left; text-align:left; width:50%;">Quarter</div>
<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>
</td></tr>
The tr does not extend automatically, and some of the Thousands of Employees text streches outside the table. I do not declare widths anywhere for the table.
Update
Without seeing your whole table, its hard to judge, but the combination of nowrap, floated elements, and block elements will be difficult to make it work. Those elements all have a different effect on element positioning, and pushing the bounds of the parent.
Since you are already using a table, you should use its built in cell mechanism which should properly adjust the width of the table accordingly (inline styles omitted for brevity).:
<table>
<tr>
<th>Quarter</th>
<th class="right">Thousands of Employees</th>
</tr>
....
</table>
And then put this in your css:
tr th { width: 50%; white-space: nowrap }
th.right { text-align: right }
Original Answer
If you have a fixed width on the table, and the content cannot fit within the td and not push with width of the table larger, then the contents will go outside the cell.
Try removing the width (width:auto) or using this in your css:
#idOfYourTable {
min-width: 800px; /* or whatever width you originally had set */
}
And then using width: 800px in an IE6 only stylesheet since IE6's width acts like min-width anyway. You might have to play around with some other rules as well to get IE6 to play nice.
EDIT: misunderstood your question at first.
I think you won't be able to achieve what you're looking to do without giving your containers some fixed dimensions. A hack might be to include some additional disguised element on the same line as your text, like a spacer or a white dot, forcing the container to take it into account, but that's a really nasty hack.
Space between html elements is supposed to be ignored. So what you have is a continuous block of nowrap code.
A way to get around this is to use the unicode character for Zero Width Space. This will break apart your code without introducing additional space.
<div style="float:left; text-align:left; width:50%;">Quarter</div>
<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>
If for some reason you can't use the unicode code, you might want to try the html entity which is a thin space. It will, however, introduce some additional space into your html output.