For the past two days I was trying to figure how CodeTwo software works in order to make a signature for the email.
I got to a point where I have the signature almost ready but with one problem.
I can't figure out how to vertically align an image (which is an icon) with the text. (because the software uses tables to align elements)
Basically, I have a tr with a td where I have this two elements that I want to center.
I attached a screenshot to show you what I mean by this. Any suggestions? Thanks in advance.
CODE Snippet: https://codepen.io/ovidiu1207/pen/xLerjy
You can try attribute valign="top" or css style="vertical-align:top;" or both to your td like given sample.
<td valign="top" style="vertical-align:top;"></td>
CodeTwo seems to add a lot of useless code to the markup. I've tried playing with the elements and adding the property vertical-align: middle; to both the images seems to have worked.
https://codepen.io/anon/pen/WEWExX
SOLVED (forking from your codepen) => https://codepen.io/anon/pen/XawXEG
I was trying to "guess" the HTML based on your screenshot, so hopefully this solution works for you:
.img {
margin-right: 6px;
vertical-align: middle;
}
<table>
<tr>
<td><img src="http://lorempixel.com/30/30" alt="banana" class="img">{Mobile}</td>
</tr>
</table>
Related
I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
If I use CSS line-height property on a span element to adjust for particular lines I get the extra space before the line in questions but cannot reset to regular line spacing with a follow up CSS class. In table shown below see bottom right cell. Before "Tokyo:" I want extra 'space-before' and after "Tokyo:" I want regular line spacing to return.
td span.hard_line_break {
line-height: 2em;
}
td span.soft_line_break {
line-height: 1em;
}
<table>
<tr class="table_top row_color_A">
<td class="bold_type td">Encroachments onto Council-Controlled Land</td>
<td class="td">Councils, both urban and rural, must address encroachments on reserves, roads and lanes.</td>
<td class="td">Brisbane:<br />Friday 23 May<br />9am—12:30pm<br />
<span class="hard_line_break">Tokyo:</span>
<span class="soft_line_break"><br />Tuesday 20 May</span>
</td>
</tr>
</table>
Entire table HTML/CSS to see and interact with:
http://jsfiddle.net/wideEyedPupil/3LeS6/1/
Line-height feels like it's the wrong property but can't get padding/margins to work on span elements inside a table cell. What is the proper way to do this please?
EDIT:
Okay I have it working using suggestion of div tags.
Demo
You can use:
.hard_line_break {
display: block;
margin-top: 1em;
}
And get rid of the <br> before and after it.
Demo
Do u mean something like this?
DEMO
As u can see, maybe adding a css could help you
UPDATE:
DEMO 2
Just put two <br /><br /> tags before Tokyo and get rid of those <span> tags. It's the easiest solution I can think of.
I'm creating a wordpress page and creating a certain part with background image, The main issue was, one of the image in css is being cut or split here is the link to the site:
http://testpress.dramend.com/amend-2/ the image being split was loopmid.gif which was not connecting to looptop.gif here is the screenshot:
<tr>
<td height="23"><img width="707" height="23" alt="" src="http://dramend.com/looptop.gif"></td>
</tr>
Have I done anything wrong in my CSS?
Thanks
You need to use display: block; or you can use vertical-align: bottom; as well for the img tag since it is inline element by default...that will solve the issue.
Also, you are using table for designing layouts which is just dirty.. Learn CSS Positioning, floats, and make layouts using other tags like div, section etc
Instead of using table for design, try using div and CSS Positioning
Since you are using table for designing layout, which is not suggested as Mr.Alien said, you may use display:table; for that img tag as well.
In your css file please add following lines:
table, td, tr {
margin:0;
padding:0;
}
What is the best and easiest way to vertically center text that's next to an image in html? Needs to be browser version/type agnostic. A pure html/CSS solution.
This might get you started.
I always fall back on this solution. Not too hack-ish and gets the job done.
EDIT: I should point out that you might achieve the effect you want with the following code (forgive the inline styles; they should be in a separate sheet). It seems that the default alignment on an image (baseline) will cause the text to align to the baseline; setting that to middle gets things to render nicely, at least in FireFox 3.
<div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
<span style="vertical-align: middle;">Here is some text.</span>
</div>
Does "pure HTML/CSS" exclude the use of tables? Because they will easily do what you want:
<table>
<tr>
<td valign="top"><img src="myImage.jpg" alt="" /></td>
<td valign="middle">This is my text!</td>
</tr>
</table>
Flame me all you like, but that works (and works in old, janky browsers).
There are to ways:
Use the attribute of the image tag align="absmiddle"
or locate the image and the text in a container DIV or TD in a table and use
style="vertical-align:middle"
That's a fun one. If you know ahead of time the height of the container of the text, you can use line-height equal to that height, and it should center the text vertically.
I recommend using tables with <td valign="middle"> (as inkedmn mentioned, it works in all browsers), but if you're wrapping with a link, here's how to do it (works in ugly old browsers too, like Opera 9):
<a href="/" style="display: block; vertical-align: middle;">
<img src="/logo.png" style="vertical-align: middle;"/>
<span style="vertical-align: middle;">Sample text</span>
</a>
There are a couple of options:
You can use line-height and make sure it is tall as the containing element
Use display: table-cell and vertical align: middle
My preferred option would be the first one, if it's a short space, or the latter otherwise.
Since most of the answers to this question are between 2009 and 2014 (except for a comment in 2018), there should be an update to this.
I found a solution to the wrap-text problem brought up by Spongman on Jun 11 '14 at 23:20. He has an example here: jsfiddle.net/vPpD4
If you add the following in the CSS under the div tag in the jsfiddle.net/vPpD4 example, you get the desired wrap-text effect that I think Spongman was asking about. I don't know how far back this is applicable, but this works in all of the current (as of Dec 2020/Jan 2021) browsers available for Windows computers. Note: I have not tested this on the Apple Safari browser. I have also not tested this on any mobile devices.
div img {
float: left;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
I also added a border around the image, just so that the reader will understand where the edge of the image is and why the text wraps as it does. The resulting example looks is here: http://jsfiddle.net/tqg7hLzk/
One basic way that comes to mind would be to put the item into a table and have two cells, one with the text, the other with the image, and use
style="valign:center"
with the tags.
I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr
I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..
Here is a simple example..
<table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
style="margin: 0px; padding: 0px">
<tr>
<td width="12" align="left" valign="top">
<img src="content/images/corner_left.gif" width="12" height="12" />
</td>
as you can see there is white space between img and td... and I remove it so it looks like this:
<img src="content/images/corner_left.gif" width="12" height="12" /></td>
the problem is gone, (notice the td and image are right next to each other)
Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc ...
Any ideas really appreciated.
As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.
Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!
Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.
Hope that helps!
The only way to "fix it" (and I use that term loosely) is to remove the whitespace.
More importantly, you should stop making websites like it's 2001. :)
I've fixed adding this before the end of table:
<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>
Hope this help.
This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.
Setting display:block on the images did it for me.
I tried all solutions above:
a) tried the display:block
b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )
c) I tried using:
padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;
Solution a) worked. Solutions b) and c) did not work on IE.
But the BEST SOLUTION I found is this:
Add a hspace=0 attribute to the Image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />
This does the trick.
IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.
It's been this way for as far back as I can remember, all versions.
For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.
Other (and the best :) ) solution is:
set the td width/height to the image width/height with css
set image to the background for td
Like:
<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>
It works form me :)
(sorry for my english :"> )
Another late response, but you could also use line-height: 0; to remove the whitespace.
To ensure that text will still be readable you could wrap it in another element and use line-height: normal or another value of your choice.
td * { line-height: normal; }
I had this issue too with an intranet site on Internet Explorer, so I turned off the compatibility view mode for intranet sites to fix it: