Here is a screenshot showing the problem:
Here is the CSS I am using:
#board table {
background: #eef0ff;
border-spacing: 0px;
border: 1px solid #475476;
}
#board td {
height: 20px;
width: 20px;
border: 1px solid #cfd7ee;
}
How can I makes the cells the same size in diferent browsers? Does anyone know why Opera and Firefox tighten the cells?
You will need to use a CSS reset, or set some of your own defaults for table margins, padding and other elements in your design.
A CSS reset (either yours or a third party one) will ensure all browsers have a similar starting point, regarding styles, as the different browsers do not have the same style defaults on different elements.
Additionally, as #thirtydot says in his answer, some browsers will ignore the height of a completely empty table cell, such as <td></td>. To ensure it is not ignored, you should add some content to these cells, a good choice being the non break space - , in this manner: <td> </td>.
Your cells are all empty, right? <td></td>?
One fix that will definitely work is to stick an in each cell: <td> </td>.
For some other ideas, see: CSS table, table-cell height issue in Firefox
First reset your HTML code default properties like padding, margin, height, width.etc.., then you apply your style to work
Better reset css is Eric Mayer's
Related
With CSS, I'm trying to add 5px padding to tables which do not have the border attribute set to "0". To do this, I'm able to select these tables like this, and test it by making the background color of them red:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
background-color: red;
}
Also, this works to make all tables have padding:
td,th
{
padding: 5px;
}
However, I only want tables with borders to have padding, and this does not work:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
padding: 5px;
}
Does anyone see an issue here? Thanks in advance.
EDIT: I see the code I posted above actually works, I didn't realize that I left out code that broke it, but this is what I tried to get working:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
border: 1px solid rgba(0,0,0,.25);
border-collapse: collapse;
padding: 15px;
}
The border-collapse:collapse; property seems to be causing this problem. Is there any way to have single borders between cells and padding at the same time?
A <table> always has a <tbody> if you don't specify one explicitly in the HTML.
(It would be different in XHTML, but this is HTML, not XHTML.)
Solution: also specify the tbody in the CSS selectors.
table:not([border="0"]), table:not([border="0"])>tbody>tr, table:not([border="0"])>tbody>tr>td
{
padding:15px;
}
See fiddle
By the way, you could remove the middle selector (ending in tr) from the rule, because it doesn't do anything. You can't give padding to table rows.
You say it does work with the first example in your post, but that isn't entirely true. Only the first selector works, giving the whole table the red background, and the other two are ignored, so the cells remain transparent.
Oh, and it's best to not use the border attribute any more. There was a dispute between the WHATWG and the W3C about whether it was still valid, but they finally agreed that it was obsolete.
In all versions of Internet Explorer (including version 11 beta), the element textarea is 1px or 2px lower than a textarea with the same width in any other browser. How to solve?
To solve the layout issue of IE 11 (and makes the layout appearance of all browsers look 99% alike), it is suggested to use CSS Reset.
Copy and paste the CSS Reset script at http://cssreset.com
Just looking at Chrome and IE, they set slightly different default height and margin properties for an otherwise unstyled textarea. To get cross-browser consistency, your best bet is to be explicit about all the box model properties like so (values selected at random but you get the idea):
texarea {
width: 400px;
height: 100px;
padding: 0;
border: 1px solid #999;
margin: 0;
}
Hope this helps.
Set height on the textarea element, and set display: block on it (to make height applicable). Example (you should of course use an external style sheet in real life):
<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">
Using a height value that equals 1.2em times the number of rows seems to work OK. It should be enough for fonts that you normally want to use in a textarea. The rest is there to deal with differences in browser defaults.
Explananation: If you look at a textarea element in browser’s developer tools, you can see that the padding and border values are the same but content height differs. The reason is that textarea formatting is browser-specific and the height calculation is based not only on font size but also on browser-dependent rules. Browsers let you override this.
You could additionally set these, as they correspond to common browser defaults, but some browsers might deviate a bit (which is normally not relevant, but may matter if you aim at pixel-exactness):
textarea { padding: 2px; border-width: 1px; }
Here's an example of code to place a border around span tags on hover:
CSS
p {
background-color: #def;
width: 137px; /* chosen so the text *just* fits, may need to alter
* for different browser or OS
*/
}
span {
margin: 0;
}
span:hover {
margin: -2px;
border: 2px solid #336;
}
HTML
<p>
<span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>
(See demo at: http://jsfiddle.net/sS7vY/)
It uses a -ve margin to compensate for the border and avoid the text shifting position on hover.
On Firefox, hovering over the very last word causes it to wrap over to the next line, which I want to avoid. On Chrome it behaves as I intended and never wraps.
Is this a Firefox bug that needs reporting?
Is there a way to prevent this wrapping in Firefox, in a way that works for arbitrary text? (i.e. adding a couple more pixels width to the outer <p> is not a valid solution!)
Not sure if it's a bug in either browser as I'm not familiar with the inline box model, but using an outline instead of a border seems to work well as outlines don't affect box sizing, even on inline-level boxes:
span:hover {
outline: 2px solid #336;
}
I forded a working solution of your's : jsfiddle.net/dgY4J
It seems to be a mixed of 'box-sizing' and available width situation.
Also, if you use the css box-sizing, you won't have to deal with borders with the negative margins.
One last tip : chosen so the text just fits, may need to alter for different browser or OS || it will do the oposite. No browsers render font type the same.
I want to have a ▲▼ symbol to denote that a specific table column is sortable (e.g. name▲▼ but with the arrows on top of each other). To get that onto one line I have used a list:
<table class="test">
<tr><th>test <ul><li>▲</li><li>▼</li></ul></th></tr>
</table>
The arrows are too big and spaced badly. So, to style the result I used:
th ul{
display:inline-block;
}
.test th ul{
font-size:5px;
margin:0;
padding:0;
}
.test th li{
font-size:5px;
margin:0;
padding:0;
}
This was meant to make the combined character smaller, but font-size seems to have no effect at all on the size of the symbols. How should this be done?
Edit: It now seems that this works perfectly in opera and that this is some firefox (my version is the 32 bit linux 20.0 one) specific issue. In fact it just affects arrow sizes:
<p>▲</p>
body{
font-size:5px;
}
This still results in large arrows. Can anyone else confirm that it's a firefox only issue?
This is just weird, I'll probably just go with using an image.
Maybe this will help. Use a icon font instead of html symbols. https://github.com/aristath/elusive-iconfont
You can also visit a demo page at: http://shoestrap.org/downloads/elusive-icons-webfont/
Alternatively, try http://fortawesome.github.io/Font-Awesome/
Both font sets have up/down carets, but not in one symbol.
You could try the following:
<table class="test">
<tr><th>test <span class="icon-sortable">▲<br>▼</span></th></tr>
</table>
with the following CSS:
th {
outline: 1px dotted blue;
font-size: 1.00em;
}
.icon-sortable {
outline: 1px dotted gray;
display: inline-block;
font-size: 0.50em;
vertical-align: middle;
}
I would use an inline-block to position the two arrows, a bit easier to style and simpler mark-up (fewer tags).
You can set a font-size for the icon either using relative or absolute units depending on your site's styling.
Use vertical-align to position the icon vertically, I used middle, but top, bottom, baseline and other options are available, again depends on your preference.
If you need to move the two symbols close together, you need to wrap them in another tag and adjust the positioning.
I constructed two examples, one basic and the other fancy with more tags to control arrow positioning.
You can also adjust the padding, width, margin of the inline-block for a lot more control.
Fiddle: http://jsfiddle.net/audetwebdesign/XPQPh/
You may have a minimum font size setting in Firefox, preventing the effect of setting font size to 5 pixels. In general, if you need a font size that small, you really need a different approach.
The size of the characters ▲▼ greatly varies by font, and so does their spacing, so you should have a font-family setting for them that suits your needs, possibly a rather large list of fonts, just to be sure (after all, no font is present in all computers).
I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.