I want to use CSS for buttons. For some buttons I use input elements, for other - links.
For buttons with short text I want to set min-width. For all buttons I want align text to center and set padding. Also somewhere on portal table layout is used.
Code below looks good in FF, but not in IE7:
Incorrect text align in inputs
Something bad happens with 'a' when it is in table
I know that there is problem with min-width in IE7 but it should works when 'display: inline-block' is set. Also I remember that padding is not included to width, but I can't explain what I see.
The only way I see is add class "btn-short" with fixed width and remove min-width from common button. Is it best solution or there are some fixes for min-width for IE7?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input.btn {
height: 26px;
display: inline-block;
min-width: 80px;
overflow:visible;
}
a.btn {
height: 19px;
display: inline-block;
min-width: 60px;
background: none repeat scroll 0 0 #008000;
}
.btn {
background: none repeat scroll 0 0 darkblue;
color: #FFFFFF;
font-family: Verdana, Tahoma, sans-serif;
font-size: 14px;
padding: 4px 10px 3px;
text-align: center;
text-decoration: none;
border: none;
white-space: nowrap;
}
td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="submit" value="Search" class="btn"/>
</td>
<td> </td>
<td>
<input type="button" value="Clear" class="btn"/>
</td>
</tr>
</table>
<br/>
<input type="submit" value="Search" class="btn"/><br/><br/>
<input type="button" value="Clear" class="btn"/><br/><br/>
<input type="button" value="Change Default Values" class="btn"/><br/><br/>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Search
</td>
<td> </td>
<td>
Clear
</td>
</tr>
</table>
<br/>
Search<br/><br/>
Clear<br/><br/>
Change Default Values<br/><br/>
</body>
</html>
inline-block doesn't work on IE7, you need to trigger hasLayout by using zoom: 1; including display: inline to fake the display-inline effect:
input.btn {
height: 26px;
display: inline-block;
*display: inline;
*zoom: 1;
min-width: 80px;
}
a.btn {
height: 19px;
display: inline-block;
*display: inline;
*zoom: 1;
min-width: 60px;
background: none repeat scroll 0 0 #008000;
}
FYI: The star-hack is used for IE 6/7.
Related
I have the following code:
<td>
<a class="action--edit"><i class="icon-edit">Edit</i></a>
<a class="action--delete"><i class="icon-delete">Delete</i></a>
</td>
What I need:
Align each action anchor near each other in the center of td (done - keep this way)
The anchor text to go below the icon (i) and both be centered in anchor
What I tried:
[class^=table--] td a i { display: block }
Then I added span for text:
<td>
<a class="action--edit"><i class="icon-edit"></i><span>Edit</span></i></a>
<a class="action--delete"><i class="icon-delete"></i><span>Delete</span></a>
</td>
[class^=table--] td a i, [class^=table--] td a span {
display: block; }
The icon, i is a font icon:
[class*=" icon-"]:before {
font-family: "c" !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
In both cases, the anchors change on above the other, and not what I need:
anchor near each other
text under icon
I didn't tried float on anchor(a) because is in td an need to be centered
See below image:
Based on your image, something like this? Icons need to be blocks with auto margin so text can drop below.
html,body {
font: normal 100%/1 sans-serif;
}
.btn-icon {
display: inline-block;
width: 65px; /* Optional to keep buttons same size */
padding: 10px 0;
color: black;
text-decoration: none;
text-align: center;
}
.btn-icon i {
font-size: 28px;
display: block;
margin: 0 auto;
}
.btn-icon:hover {
color: blue;
background: #efefef;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table>
<tr>
<td>
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash"></i> Delete
</td>
</tr>
</table>
Please make anchor tag content to align center.
td {
min-width: 150px;
border: 1px dotted red;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
td i,
td span {
display: block;
}
td a {
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<table>
<td>
<a class="action--edit"><i class="fa fa-edit"></i><span>Edit</span></a>
<a class="action--delete"><i class="fa fa-trash"></i><span>Delete</span></a>
</td>
</table>
</body>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
The title says it all:
Using only CSS, How can I apply some padding to all td elements, except those with children elements of input or select types, which I'd like to have another padding for?
Note that I'd like as generic solution as possible (e.g., no hardcoded inline style), so the first thing that came in mind was to try and do this:
td:not(:has(input, select)), but it's not possible.
For example, in the following table (here's also a fiddle), I'd like all td elements to have padding-left and padding-right of 20px, but those with input or select elements to be with padding of 2px:
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
border: 1px solid #ddd;
font-size: 16px;
font-family: arial;
padding-right: 20px;
padding-left: 20px;
}
input, select {
text-align: center;
vertical-align: middle;
font-size: 16px;
}
.fit {
white-space: nowrap;
width: 1%;
}
<table id="myTable" class="fit">
<tr>
<td>some</td>
<td>nice</td>
<td>text</td>
</tr>
<tr>
<td>
<input value="some"/>
</td>
<td>nice</td>
<td>
<select>
<option>option</option>
</select></td>
</tr>
</table>
You could apply a negative margin to input and select.
Subtract a total of 36px to give you 2px each side
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
border: 1px solid #ddd;
font-size: 16px;
font-family: arial;
padding-right: 20px;
padding-left: 20px;
}
input,
select {
text-align: center;
vertical-align: middle;
font-size: 16px;
margin-left: -18px;
margin-right: -18px;
}
.fit {
white-space: nowrap;
width: 1%;
}
<table id="myTable" class="fit">
<tr>
<td>some</td>
<td>nice</td>
<td>text</td>
</tr>
<tr>
<td>
<input value="some" />
</td>
<td>nice</td>
<td>
<select>
<option>option</option>
</select></td>
</tr>
</table>
I find that if I put an image inside a table cell like this (JSFiddle):
<table style="height: 300px; border: 1px solid black">
<tr>
<td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
</tr>
</table>
There will be a small space below the image, making the vertical align not exact:
Does any one know what is happening here?
I tried to add vertical-align: middle to the td, but it makes no difference.
Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.
img {
display: block;
}
<table style="height: 300px; border: 1px solid black">
<tr>
<td>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" />
</td>
</tr>
</table>
JSFiddle
You have to set the img as "display:block"
img {display:block}
http://jsfiddle.net/91beLce7/4/
Try this Fiddle
*{
margin: 0;
padding: 0;
}
table tr td img{
display: block;
}
You can fix that with line-height: .8em;
Try like this: Demo
* {
margin: 0;
padding: 0;
}
table {
background:red;
height: 300px;
border: 1px solid black;
}
tr {
background:#ccc;
}
img {
background:green;
display: block;
}
In this table, not just cell B has a heading and content, but also cells A and C.
My attempt to set the heading and the content using DIVs is only partially successful. font-weight is observed, but vertical-align is not. Why?
CSS
<style type="text/css">
td {
text-align: left;
}
.heading {
vertical-align: top;
font-weight: bold
}
.content {
vertical-align: middle;
}
</style>
HTML
<table width="300px" height="300px" border="1">
<tr>
<td rowspan="2">A</td>
<td>
<div class="heading">Heading of Cell B</div>
<div class="content">Content of Cell B</div>
</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
verticle align should be middle
verticle-align: middle;
This will place the text in the middle. Although you have to be aware that is places it in the middle on the line (not the container) so you need a line-height
line-height: xxx;
Or use div's and mimic a table: http://jsfiddle.net/rf2kC/
vertical align won't work on an element that is displayed in-line, like a div. you can put another table inside of your TD, or change your css to something like this:
<style type="text/css">
td {
text-align: left;
}
.heading {
position: relative;
top: 0;
background: blue;
height: 150px;
}
.content {
position: relative;
bottom: 0;
background: yellow;
height: 150px;
}
</style>
Try:
td {
text-align: left;
vertical-align:top;
}
.heading {
font-weight: bold;
}
.content {
margin: auto;
line-height: 200px;
}
http://jsfiddle.net/Xvx83/
I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
<tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
<p>Click here to read more </p>
<div style="clear: both;"></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.
I.e.:
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.
I had a similar problem. This helps me across main email clients.
Add:
attributes cellpadding="0", cellspacing="0" and border="0" to tables
style border-collapse: collapse; to tables
styles padding: 0; margin: 0; to each element
and styles font-size: 0px; line-height: 0px; to each element which is empty
You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.
If you see table class it has border-spacing: 2px; You could override table class in your css and set its border-spacing: 0px!important in table; I did it like
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }
It saved my day.Hope it would be of help. Thanks.
Nothing has worked. The solution for the issue is.
<style>
table td {
padding: 0;
}
</style>
Used font-size:0 in parent TD which has the image.
I had a similar problem and I solved it by (inline)styling the td element as follows :
<td style="display: block;">
This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.
Hi as #andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.
Put display:block on the css for the cell, and valign="top" that should do the trick
If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.