This works on Gmail and Mobile Exchange but NOT outlook 2010 (though padding is supposed to work in 2010?).
<img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;">
With or without the display block the above is completely ignored in outlook. And just results with the text next to it, mashing right into the side of the image. Again, resolves great in Gmail and Mobile Exchange.
I have text to the right of this image, so the use of: is a very messy option. Any other similar ideas? (similar = works most places)
Update for #Mike "bit more code" below:
<tr style="height: 50px; font-size:12px;">
<td><img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;"></td>
<td style="color: #002953; max-height: 20px;">
<span style="font-size:12px !important; font-weight: bolder;">
This one time at band camp Lorem Ipsum</span><br>
<span style="font-weight: bolder;font-size:12px !important;">Jeepers HTML emails suck lorem ipsum<br>
</span>
<br>
<!-- etc -->
Use padding on td tags in outlook. Padding is not supported on Img or div tags. Check out http://www.campaignmonitor/css to see more about CSS compatibility across email clients.
Padding is supported in Outlook, no matter what people tell you. It just depends on where you define it.
I would advise against putting padding on an image.
Remember Padding is inside an element, Margin is outside of an element, so in this case you're better adding it to the wrapping table cell of your image.
You also have another option here which is to give your wrapping table cell a width. This width should equal the width of the image + 20px to account for your padding. Then you have no need for padding. Obviously this only works if you have a clearly defined width to work width which you haven't from what I can see in your HTML. If your element will always be one width, add the width to the Image tag.
This way the second Table cell with the text will take up the rest of the available space in that table and always be 20px to the right of your image
Related
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
I'm to implement a fullscreen layout for a Web app according to custom specs. I've got most of it under control but there's one part I have some trouble with.
To economize on space in an otherwise already crowded GUI, a "Log out" button should go into the title row rather than elsewhere. The title row, of course, contains a title. The button should appear in its default dimensions for the given browser/opsys combination at the top right, with a little padding. The title should be centered in the remaining space in that row. Here's a picture:
+====================+=======+
| ACME Widgets | [Btn] |
+====================+=======+
I don't know how wide the button will be, nor should I need to. The layout should scale smoothly on a range of devices and resolutions, from about 200 px width to 2000:
+==================================================+=======+
| ACME Widgets | [Btn] |
+==================================================+=======+
...with the title continuing to be centered in its area, which again will always be (total available width - width required for the button). The page may end up being used in a JavaScript-less environment, so dynamic size calculation is not an option. Nor (before you ask) is talking the customer out of his design.
Can anyone please suggest HTML (and, if required, CSS) to achieve this layout?
Update More constraints/explanation (sorry): This app could be viewed by people with poor vision, who like to use their zoom button (Ctrl-+) to blow up font sizes. Therefore, I'd like to go with as few assumptions about things like text sizes as possible. Obviously, on a tiny display with big zoom I would eventually not have enough space for the unpadded title and button; but until then I'd like to stay flexible.
I have two possible solutions. I will admit, they seem like these are simply modifications to some answers already given but should hopefully address the comments you've left so far.
CSS approach:
Lets say you determine that a nice width for your button is 5em. This of course scales with the browser's text zoom to always be, well, 5em.
Then perhaps you could float this to the right, and put a margin-right on your title of 5em.
#buttonContainer {
float:right;
display:inline;
width:5em;
text-align:right;
}
#titleContainer {
text-align:center;
margin-right:5em;
border:1px solid blue;
}
<div id="buttonContainer">
<input id="btnLogOut" type="button" value="Log Out" />
</div>
<div id="titleContainer">
<h1 style="text-align:center;" id="title">ACME Widgets</h1>
</div>
This approach may not be picture-perfect, but you can tweak the em unit and arrive at a nice solution hopefully.
Table-approach:
Another approach is a modification of the table-based approach given by borayeris. I have modified this to not make any assumptions about the width of the button...
<table border="0" width="100%">
<tr>
<td width="99%" align="center">ACME Widgets</td>
<td width="1%" align="right">button</td>
</tr>
</table>
Good luck!
You can use a floating div.
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets</h1>
Edit: second attempt, using a displayed-but-invisible div with the same button as content to center the title in the remaining space (aka doing math in css :)
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets<div style="visibility:hidden">[Btn]</div></h1>
If table is acceptaable use that
<table border="0" width="100%">
<tr>
<td align="center">ACME Widgets</td>
<td width="60">button</td>
</tr>
</table>
Might not be the most elegant solution but something like this should work. This is based off Adrian's solution
CSS
h1 {position: relative; left: 0; right: 100px; text-align: center}
.logout {float: right; width: 100px}
HTML
<div class="logout">Log me out</div>
<h1>ACME widgets</h1>
What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.
The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.
By the way using an image to display the date is not really an option IMHO.
Use relative positioning in the content span:
<tr>
<td>
<span class="day">6</span>
<span class="contents">Contents go here</span>
</td>
</tr>
And in CSS:
span.day {
line-height: 20px; /* just to give it a height */
display: block;
color: #aaa;
}
span.contents {
position: relative;
top: -20px;
}
Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.
Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.
Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:
<div class="cell_container" style="position:relative;">
<div class="cell_bg" style="position:absolute; width:100%;
height:100%; z-index:0; color: gray;">29/12/2009</div>
<div class="cell_fg" style="position:absolute; width:100%;
height:100%; z-index:1;">Jim's birthday</div>
</div>
Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.
I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.
I have created a table in html for an email (FYI this is not for spam, it's to be used internally at the organization I work for). CSS is pretty much out of the question since we use Outlook and Office 2007 (which will not render the CSS properly - nothing worked on that front). I have 2 cells side by side - one has a background image with text over top, the other has a ttile using an h1 tag I created.
The issue: when I input a 2-lined title in the cell adjacent to the one with the background pic, the spacing at the botttom is so large the background picture duplicates part of it vertically (even though the text in the adjacent cell is not larger than the pic). I have tried to specify the padding, but it doesn't change anything.
My rule for the h1 tag looks like this:
td.leftCol h1 {
color: #003152;
font-size: 0.9em;
}
The code for the cells in question is this:
<tr bgcolor="#FFFFFF">
<td width="150px" height="42px" class="leftCol" background="/news/newsletters/images/leftcol_box.gif" align="right"><font color="#FFFFFF"><strong>Text </strong></font></td>
<td width="298px" class="leftCol" style="padding: 5px 0px 0px 0px;"><h1>New Medical School in New Brunswick</h1></td>
</tr>
Any suggestions?
Unfortunatly, at least Outlook 2007 ignores all background related CSS-Tags and from my experience, renders margins/paddings totally different or not.
Try to create the HTML in Word if it is possible, at least Outlook07-10 and Word share the same render-engine :)
In case you have same image for all rows, put it in css class like below
background-image: url("http://yoursite/news/newsletters/images/leftcol_box.gif");
background-repeat: no-repeat;
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.