I'm trying to figure out how to get this text (!) to show up. Even though it's smaller than the circle it's in, it still gets cut off about 1/3 of the way in to the circle.
I would like to use this for Outlook specifically.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:20px;v-text-anchor:middle;width:20px;" arcsize="50%" stroke="f" fillcolor="#ffcb05">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">!</center>
</v:roundrect>
Anyone have any ideas? I've tried overflow:visible on the circle to no avail.
More information
Using a macro to get test html into Outlook.
It is most definitely some sort of margin or padding on the v:roundrect element. After importing the HTML, I can right click, go to Format Shape, then Layout & Properties, which gives me the 4 "margin" options. Setting them to zero gives me the desired effect. The issue is that I cannot then grab this HTML, and I have no idea what property this is correlating to.
Latest code:
<v:roundrect style="height:30px;width:30px;margin:0 !important;padding:0 !important; mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;margin:0 !important;padding:0 !important;mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;">!</center>
</v:roundrect>
I've attempted using different elements (span, p, etc..) instead of center.
Textbox with zeroed inset is the key. I had tried it before, but without nested html. Text directly input in the v:textbox element does not appear to work, so I used a center element to encapsulate text and set styles.
<v:roundrect style="height:20px;width:20px;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
<v:textbox inset="0,0,0,0">
<center style="font:300 14px/15px Impact, Sans-serif;color:#FFFFFF;mso-line-height-rule:exactly;">!</center>
</v:textbox>
</v:roundrect>
It might help to solve your problem: https://buttons.cm/
You might try adding line-height: 16px; mso-line-height-rule: exactly; to the center style attributes. Outlook, particularly later versions, tends to tack on a lot of extra spacing above and below text, and won't follow your line height unless you force it.
Related
I'm making an e-mail template. I want to make a line below the heroImage.jpg. The line cannot be a part of the heroImage.jpg as there are several other lines in the e-mail and they should all look the same.
The way I do it is that I set a border-bottom to a table row in which heroImage.jpg is placed.
My problem is that in GMAIL (when the e-mail is delivered, but not in OUTLOOK for example) I get a thin ribbon of space between heroImage.jpg and my line. I think it is because GMAIL does not recognize valign nor vertical-align and thus the heroImage.jpg is aligned top (probably default option) and the colour of #heroImageBlock is thus visible.
But how it should be is that heroImage.jpg would be aligned bottom and right below to it would be my line (no annoying space in between).
Is there a way to force GMAIL to recognize valign or vertical-align and get rid of that annoying space?
HTML
<tr>
<td align="center" valign="bottom" id="heroImageContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">
<tr class="border-bottom">
<td>
<img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
</td>
</tr>
</table>
</td>
</tr>
CSS
#heroImageBlock td{vertical-align:bottom;}
I've tried to assign vertical align to all other elements too (see below) but it does not work.
#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}
In OUTLOOK image and a red line are nicely together as it should be:
In GMAIL there is an annoying gray line between the image and the red line.
Valign/vertical align isn't your issue here. Since you're specifically setting a block image, you shouldn't have anything to vertically align. This points to another issue to do with the way you're declaring the image, but I'll get to that soon.
FYI, it's best if you give us more scope or more code. You're referencing a border-bottom class, but we can't see what properties to render that border are. Same goes for the id on the image. If any properties are being set on classes or IDs in the head, it's best to include those for us to help you debug.
Here are my suggested improvements to try and fix this.
1. Don't set any properties or classes on table rows. They aren't designed for that use. Moving the border may fix the issue but even if it doesn't, tables and table cells are where you should be adding these. In this case, move the border-bottom class declaration to the table cell under the row.
2. Have you tried setting display:block; on the image? By default, images will be declared as inline and you have to specifically set is as block. When inline, spacing can appear below images and will throw spacing and dimensions out when trying to be pixel perfect, or in your case aligning content directly below.
Let me know how those go.
Try adding these styles to the parent element:
font-size:0px and line-height:0px.
By default Gmail tends to add its own spacing. The above should remove it.
I'm working with a number of large interchangeable style sheets. I need to use the border colour from one of the classes as the border for a div. The class in question has a number of properties, I only want the border.
Is there any way of doing this with CSS? I'd be happy with a CSS3 solution if it degrades nicely.
Of course I can use JS to do it, I know how with JQuery. But I was hoping to avoid that.
Lyle
Update: As I feared not possible, why hasn't CSS3 provided a solution to this? As I said I'm working with a number of large interchangeable style sheets, the re-factoring suggestions simply aren't workable and they'd not only be a large job in themselves, but have far reaching implications :( I'll just have to do it with JQuery.
JQuery solution (JQuery.css doesn't like shorthand, like border or border-color):
var border = $('.class').css('border-top-color');
$('div').css('border-color', border);
This is simply not possible in CSS alone, unless you alter the way the CSS declarations work.
For example:
.class1 {
background: green;
}
.class1, .class2 {
border: 1px solid red;
}
...and the HTML:
<div class="class1"></div>
<div class="class2"></div>
Or:
.class1 {
background: green;
}
.class2 {
border: 1px solid red;
}
...and then in your HTML:
<div class="class1 class2"></div>
<div class="class2"></div>
Nope. Try to refactor your stylesheets. You can add multiple classes to one element.
<div id="mydiv" class="borders black"></div>
In my application, I have to fix all the closing tags of the <img> tag as shown below. Instead of closing the <img> with a >, it should close with />.
Is there any easy way to search for all the <img> in this text and fix the > ?
(If it is closed with a /> already then there is no action required).
Other question, if there is no "width" or "height" to the <img> specified, what is the best way to solve the issue?
Download all the images and get the corresponding attributes of width and height, then add them back to the string?
The correct <img> tag is the one that closes with /> and have the valid width & height.
<img align="left" hspace="5" width="150" src="http://s3.dlnws.com/images/products/images/749000/749208-large" alt="" title="">
Apple today unleashed a number of goodies, including giving iMacs and Mac Pros more oomph with new processors and increased storage options. We have those deals today, along with many more items for the Mac lover. Along with the refreshed line of iMacs and Mac Pros, we’ll also look at a number of software deals [...]
<p><img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/0/di" border="0" ismap><br>
<img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/1/di" border="0" ismap></p><img src="http://feeds.feedburner.com/~r/cultofmac/bFow/~4/Mq5iLOaT50k" height="1" width="1">
Regular expressions will solve the problem with closing your tags correctly - make sure whatever you're using to edit your code supports regular expression searching, and then search for something like this (assuming that all of your unclosed image tags end with a ">):
\<img (.*?)"\>
and replace it with this:
<img $1" />
As far as the bit about the width and height attributes, if you're trying to display the images at their regular width and height, you shouldn't need them. The only time you should need width and height is if you're displaying the image at a different size than the original image's size, which doesn't appear to be the case here.
I'm developing a GWT project, and I encountered a problematic cross-browsering problem.
When using firefox, there are problems with the display of all the pages. I found the reason why :
In UIBinder, each of my pages are wrapped by a "g:HTMLPanel" : at start and at the end of the xml file, to wrap the content of all the pages
When doing this, the generated code of the panel goes like this :
div style="width: 100%; height: 100%; ....
The problem is that "height : 100%". If I remove it with firebug, the display is perfect.
So my goal is to programatically remove that generated 100% height.. But no way to do it !
I tried everything : setHeight, setSize, working on the Element itself with getElement().methods()... I tried to do things like style.clear(), everything that could have a chance to work.. But in the generated code that "height: 100%" will ALWAYS be there. If I set it's height to "50%" or "50px" it has no effect at all.
I even tried to give it an ID, then with pure javascript to change it's style, but no solution either..
Note : I'm sure that I'm working on the right element : adding a styleName, for example, works well.
Any idea ?
Your help would be really appreciated, I have no clue of how to remove this bit of generated code, and I've been looking for hours already :(:(:(:(
Best regards,
Nils
I just inspected some of the code generated by GWT from my uibinders in firebug and < g:HTMLPanel > isn't adding any width or height styling.
I don't have < g:HTMLPanel > as the root element in my uibinder though, I have my own class.
<a:FormPanel ui:field="form">
<g:HTMLPanel>
<input type="hidden" ui:field="discoveryId" />
<table cellpadding="2" cellspacing="0" class="{widgets.gridPanel}">
<tr>
<td>Name:*</td>
What about using say FlowPanel as your root uibinder class instead, then HTMLPanel?
Failing that you could always use the !important css rule to override the ones assigned on the div.
.myHTMLPanel {
width: auto !important;
height: auto !important;
}
This can be due to the fact that an HTMLPanel is wrapped into a DeckPanel. A DeckPanel adds "height: 100%" and "width: 100%" to the elements.
After showing the widget, add the following code:
deckPanel.add(widget);
deckPanel.showWidget(0);
Element e = DOM.getParent(widget.getElement());
DOM.setStyleAttribute(e, "height", "");
DOM.setStyleAttribute(e, "width", "");
widget.setHeight("");
widget.gwtContainer.setWidth("");
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.