I'm having problems removing a 1px border (at least, that's what it appears to be) between some of the table elements in this page:
http://tkevents.ca/microsoft/cls2012/email_en_new.html
This page renders fine in Chrome, FIrefox, Safari and IE 6 through 9. The problem is in Outlook 2007 & 2010. It looks like some of the td tags have picked up an extra 1 px border or something.
Screenshot: (I can't post an image - my account is too new). But, you can duplicate this by embedding the code in an Outlook message.
I can't figure out where I've gone wrong... I've applied a bunch of suggestions from other answers within Stack Overflow, all with no luck.
Any help would be greatly appreciated.
This should do the trick, add this to your css.
table td {
border-collapse: collapse;
}
Related
First time email creator here, everything works well on my Mac browsers but once I jump into Outlook I run into a few problems.
Outlook (2007, and no doubt other versions) is adding margins around images, some are receiving top and bottom margin, some just top or bottom. I've applied the widths to the images (email size is no bigger than 600px wide) and also tried border="0: on them but no avail. Also made sure I don't have any margins set to my tables (which can take affect on nested TD's).
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
See Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin? for more information.
I got a project to fix image issues for a client and this one has bugged me for days now. The site is http://www.fonolive.com. Some of the small icons that display on the front page show white space below image.
I have tried the following on
img{
}
display:block;
vertical-align:bottom;
vertical-align:top;
vertical-align:middle;
vertical-align:sub;
font-size:0px;
display:inline;
line-height:0px;
and more.
The only thing that seems to work is if I set the image height to say 130%, but the problem is recurrent on several pages across the site and this is an absolute no no.
The other solution I have worked on is resizing the images in php or using javscript etc, but that only works if javascript is enabled and seems too complex of a solution.
Please, try it in firebug and let me know what is wrong. Thanx and appreciate every input
I have an issue with the right part of the text in a div being hidden when the scrollbar is shown!
No problem with IE, but with Firefox or Chrome.
Does someone already seen this issue, and possibly have a fix?
Try using some css properties like margin-right or word-break...
eg:
margin-right:10px;
or
word-break: break-all;
This might work...
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.