So I have a site - on the Input Customer/Save Customer I have some buttons - they display correctly in IE 9 but not in Chrome (the functionality works fine in both) - its just for the appearence that I want to get it looking right in both.
So this is how it should look (IE 9)
And this is how it looks in Chrome (incorrect)
I have been trying different stuff in the source below - but havenet got it working in both Chrome and IE yet so maybe someone can spot something I'm missing.
<div class="PanelPadd" style="margin-top: 10px; text-align: right; padding: 5px; height:25px;">
<div id="Div8" style="text-align: right; float: right;">
<table>
<tr>
<td valign="middle" style="padding-right: 5px;">
<a id="FindCorrAddress" href="javascript:pageSMCustomerCreate.doRequest(2)">Find Addresses</a></td>
<td valign="middle" style="padding-right: 5px;">
<a id="ClearCAddress" href="javascript:pageSMCustomerCreate.doClearCAddress()">Clear</a></td>
<td valign="middle" style="padding-right: 5px;">
<asp:ImageButton ID="ImageButton4" ImageUrl="./images/buttons/SaveCustomer.gif" runat="server"
OnClick="OnSaveCustomer" /></td>
</tr>
</table>
</div>
</div>
There is nothing special done in any style sheet with the Class PanelPadd - a background color is set and a border is set as below.
.PanelPadd { background-color:#EFEFEF; border:solid #AAAAAA 1px; }
You do not show enough of your style code to analyze the problem. But I am assuming that you are setting a certain width to FindCorrAddress and ClearCAddress.
Because of minimal font-rendering differences, or rounding errors, or maybe even differences in the box model (are you running IE9 in Compatibility View?), a certain width that fits on one browser may not fit on another.
The best solution is to set no width at all, and to let the contents flow and define the width of the containers themselves.
Also, please remove the <table>. Using tables for layout is very bad style and asking for trouble.
Related
Office rendering of HTML is a known headache an I have a problem with Outlook 2016. A small, 1px horizontal line is rendered below my table. Tables are a common practice for formatting due to many Outlook/Office/Word HTML/Richtext/Mixup flaws.
The 1px line is really a small gap or hole in the white background color of the table, showing the background color of the body. I managed to figure this out by changing background color to red instead of grey.
The code can be tested in Notepad++ by selecting Run>Send via Outlook on a computer with Windows and Outlook Client installed...
<!DOCTYPE html>
<html>
<head>
<style>
html,
body
{
font-family: 'sans-serif';
}
</style>
</head>
<body style="background-color: red">
<table style="background-color: white;" >
<tr>
<td>
<table>
<tr>
<td>
Test before
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>
Test 1<br>
Test 2<br>
Test 3
</p>
</td>
</tr>
</table>
<br/><br/>
Test after
</td>
</tr>
</table>
</body>
</html>
The structure is a scaled down version of an email where the elements are used to present information.
(Note! TL;DR; - Best solution in the bottom)
There are couple of different ways of changing the structure to make the gap go away. However this is not an option in my case. The solution that fixed it for me, was to scale down everything to a minimal, step by step according to the above, and finally try to change all values.
The final solution in my case, was to change font size in the table before, to NOT 30px.
Test before
In my specific encounter with the randomizer-magic of Ms Outlook rendering, this was the key. I am sure the solution may vary for others, but changing a few font-sizes around might be worth a shot.
Since this took me long enough I thought I better post the solution, maybe it can help someone as frustrated as me!
[Edit] Here is another example of this issue - Messing with line-height
<!DOCTYPE html>
<html>
<head>
<title>Yea</title>
</head>
<body style="width: 100%; background-color: white;">
<br/><br/>
<table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
<tr>
<td style="height: 114px; font-size: 100px; background-color: #999999"><span> My name is Jasper</span></td>
</tr>
</table>
<br/><br/>
</body>
</html>
Well, the issue in this case when investigating the code, was the line-height: 0; of the table element. Remove it or set it to 1px to get rid of the element that looks like a white thick line but is actually a glimpse of the background. This is definitely a rendering bug and it at least shows in Outlook 2019 / 2016 (win 10). Reproduceable with Litmus.
[Edit #2 - Add an invisible tag]
By adding the patent pending gap-line eliminator directly before the problem-table-tag I managed to get rid of some lines.
<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
<tr>
<td style="font-size: 0px;line-height: 0px;"> </td>
</tr>
</table>
[Edit #3 - Finally - Best solution!]
Since the gaps are a bit random between Outlook versions, appears both horizontally and vertically (according to my last few hours of troubleshooting) and depends on DPI settings amongst other things the absolute best solution seems to be the following...
Add a content encapsulating <table style="background-color: lime"><tr><td>CONTENT</td></tr></table> with the top/front background-color. This will for some reason cover all gaps! Best of luck!
Another possible solution which helped in my case was to avoid using paragraphs <p> - I've just replaced them with line breaks <br/><br/>.
I'm strunggling at building E-Mail templates. Displaying some words inline using spans (trying to avoid the display property because some outlook versions don't support it) a floating problem occurs.
Problem case: the whole span including padding doesn't fit into the current line, so the text breaks into the next line - fine for now. The "left" padding though unfortunately stays in the first line and gets "cut off" the item as you can see in this screenshot.1
<span style=" line-height:25px; font-family:'Roboto', sans-serif; font-size:11px; background:#EBEBEB; border-radius: 8px;a padding: 3px 10px; margin:0;">
Vollzeit
</span>
<span> </span>
How can I force the padding to stick with the text and make it jump into the next line, too?
(This problem doesn't occur in outlook only but also on several other e-mail clients.)
You might try using tables instead since email clients have notoriously nasty support for a wide gamut of other markup and styles. Chris Coyier has a good article on responsive emails here https://css-tricks.com/ideas-behind-responsive-emails/ Look at the section specifically around 3 columns where he states:
You might think: each of those will be a <td>. But no, if that was the case you'd never be able to get them to wrap in the limited CSS world of emails.
It's yucky looking but, some variation of the following might work http://codepen.io/anon/pen/GoyojN
<table class="main-wrapping-table">
<tr>
<td>
<table align="left" style="width: 33.33%">
</table>
<table align="left" style="width: 33.33%">
</table>
<table align="left" style="width: 33.33%">
</table>
</td>
</tr>
</table>
I recently applied a hover feature to a set of buttons. When applied to a different website the coding was fine. When applied to this site the link/hotspot goes to the next button. For example: I have buttons home/about/gallery/blog/prints/contact and you would think with the dimensions set in CSS style sheet that the link would only apply to those dimensions. Not with this one. The link/hotspot shows linked to index.shtml from the edge of the table to the other side of the home button. There are spaces between buttons but the link/hotspot goes 50%across the space until it hits the next buttons link/hotspot. And the final button "contact" spans across to the opposite edge of the table. Any clues as to what I am doing wrong?
CSS:
div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}
Index.shtml:
<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->
menubuttons.html:
<tr>
<td align="center" width="75">
</div>
</td>
<td align="center" width="86">
</div>
</td>
<td align="center" width="94">
<a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>
<td align="center" width="63">
</div>
</td>
<td align="center" width="85">
<a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints">
</div></a>
</td>
<td align="center" width="103">
<a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>
</tr>
FIXED: (maybe not properly?)
I have only been coding for 2 months and have a pretty good idea on how to write it out, but I don't know what everything means such as the DIV tag. I know I was searching on here last night and I assumed I was to put the div inside a TD.
I was able to fix everything by simply adding a few spacer.png's before the first button in between each set of buttons and after the last button. This also fixed my spacing issues on the sides.
Thanks for the help. I simply am trying to find an easy way to make my buttons change on hover. This method was the first I found last night on here and am now trying to perfect it.. well in my head at least. I need to research on the unordered list a little because I have heard that that makes things more simple...
Here is the link(based off the back end of a site I recently finished) www.blackmarkettattoos.com/amysesco/index.shtml
I think the problem is the fact that you are using DIV, which is a container tag inside table's cell, and for both you apply style (to the DIV as class and to the TD as inline).
Generally, it is better to create menus with lists, but if you must use the code you provided, then try to remove width: 75px; from the div.nav-home.
Check these two links for how to create CSS menus with lists:
css.maxdesign.com.au
Dynamic Drive CSS Library
I could use some assistance with a rendering issue from the IE7 experts out there; my layout works beautifully on all browsers except IE7, and I can't quite figure out the magic style to get it working.
JSFiddle example of the issue is here: http://jsfiddle.net/rB29C/2/
If you view it in IE7, the link (wineglass image) is pushed down to a second line below the checkbox. My goal is to have them in the same line. If you view the fiddle in IE8+ or any other browser, it is working as expected.
I think it has something to do with the width of the floated element, but I can't figure out the magic style combination to fix this. I do have conditional stylesheets in my app so I can do an IE7 specific style, though I prefer to avoid markup based changes if possible.
I'd love to understand what's going on, too--so I can hopefully learn to avoid this in the future :)
IE7 seems to push items in the cell to the bottom when the width of the cell is too small. I increased the width of td.type to 14% and it seemed to work in the fiddle, but if your table needs to shrink and grow this might not be the best solution(if the table is squished the wine glass will again drop to the bottom). Otherwise you may consider using a set pixel width instead of a %
I've figured it out and the solution is not in CSS but rather in the HTML. Simply move the wine glass picture between different cells like so:
<table>
<tbody>
<tr>
<td class="type">
<input class="checkbox" type='checkbox' />
</td>
<a class="link" href="#"></a>
<td class="name">Name
</td>
<td class="dates">Dates
</td>
<td class="score">Score
</td>
</tr>
</tbody>
</table>
The issue with this is that it only works in the IE7 environment and not in others. Maybe you could condition it with php depending on what browser the page is in.
<?php
$isIE7 = (get_broswer('broswer') == 'IE' && get_browser('version') < 8 )
?>
<table>
<tbody>
<tr>
<td class="type">
<input class="checkbox" type='checkbox' />
<?php if ($isIE7) echo('</td>
<a class="link" href="#"></a>');
else echo('
<a class="link" href="#"></a>
</td> ');?>
<td class="name">Name
</td>
<td class="dates">Dates
</td>
<td class="score">Score
</td>
</tr>
</tbody>
</table>
I'm not sure if you want to avoid php or not, but if you do there is also a JavaScript version I can crank out for you.
I was able to figure out a solution for my problem; I've updated the JSFiddle with the new styles:
http://jsfiddle.net/rB29C/13/
To summarize, I set the following additional style from my original fiddle, and IE now seems to layout and size things properly (including the containing td):
input.checkbox {
display: inline;
float: left;
}
a.link {
display: inline;
float: left;
clear: right;
margin: 0;
}
Hopefully this is helpful to someone else who is struggling with IE7's oddities!
As we all know, Outlook 2007 uses the Word 2007 rendering engine, causing endless grief when designing HTML email message. [Insert rant here] In particular, float, margin, and padding are - shall we say? - poorly supported.
To simulate float so that text wraps around an image, apparently we can simply use:
<img src="foo.png" align="right">
The issue is padding/margin. Without padding/margin, the wrapped text butts up against the image which looks goofy. One workaround is to edit the image and add transparent framing that simulates margin.
Does anyone know any other workarounds?
After reading Microsoft's documentation on Outlook 2007 support, I found that using hspace on an image will work to create white space around it similar to padding.
[ img src="image.jpg" align="left" border="0" hspace="10" ]
That will give you the equivalent of 10px of padding. Works pretty well across email clients.
Figured I'd share in case someone else Googling the issue stumbles across this question like I did.
I have tried it this morning and sadly borders on images arnt supported, however, you can implement the concept on the text area :).
border-left: 7px solid #fff;
for example, inside a white container would give the visual effect of left padding....
One place that padding is supported in Outlook '07 is <td> tags. So I have solved this by wrapping the image in a table:
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td valign="top" style="padding: 0px 10px 0 0;">
<img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
</td>
</tr>
</tbody>
</table>
<p>The text I want to see wrap...</p>
</td>
</tr>
</tbody>
</table>
Note the align="left" is on the parent table as well as the one immediately holding the image. This hack is needed for Outlook 2013. Everything else looked great without it on Litmus.
Adding padding around in image for Outlook and all other email clients.
I found that this works.
img {
padding-left: 25px!important;
padding-top: 25px!important;
padding-bottom: 25px!important;
padding-right: 25px!important;
}
I know this thread is old, but an alternative would be to give the image a solid border the same colour as the container.
If you add a inline style to the img tag with a margin command like this:
<img src="foo.png" align="right" style="margin:5px;">
I'm guessing that is what you're trying to do.