Table borders strange behavior - html

I have template for e-mail list, in html + css.
http://tsiskreli.highlander.ge/next.html
Here it is. There is no php, javascript, only html and css everything in this file.
In all browsers (chrome, firefox, explorer) I see it fine, top text is in right place and table looks fine.
My costumer sees it so:
http://s1.postimg.org/7c4iffav3/image004.jpg
I see it so even with 300% zoom:
http://s21.postimg.org/t1jltp0fb/Screenshot_12.jpg
Why my costumer sees this empty space in at the border and why reservation goes down for him?

Because you ask the CSS to do so. Try to view it under 480px screen and you will get the some result as your customer. After inspecting your CSS i found this :
#media only screen and (max-width: 480px){
td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
padding-right:18px !important; /* This is it */
padding-left:18px !important; /* This is it */
padding-bottom:0 !important;
}

This media query is causing the padding :
#media only screen and (max-width: 480px){
td[class=mcnTextContent] {
padding-right: 18px !important;
padding-left: 18px !important;
}
}
Remarks :
Don't duplicate the media query for each property: you can group them all inside one.
Use !important with caution.
Don't use table for layout, and especially not like this: your html structure is a mess.
Consider adding the relevant code in your question by the way.

Related

Different line-height and baseline on mobile and desktops

This is the third time I have faced this problem.
I don't know what is wrong.
Here are two pictures of how it looks like:
On desktops:
On mobile devices:
As you can see on mobile devices text is not aligned center vertically.
Again this problem is only visible on mobile devices.
What is the problem? What did I miss? This problem is also visible in inputs.
I am using the following code for the buttons:
.button
font-family: 'Gotham Pro', sans-serif
font-size: 14px
color: $color-text--button
padding: 10px 15px
text-transform: uppercase
background: $color-button--default
border: 1px solid $color-transparent
Please note, I use padding for setting height of buttons
UPDATE
I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome
There is no line-height specified in your code.
Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.
CSS
.button {
height: 40px;
line-height: 40px;
}
This works of course only for single line texts.
Also have a look at this SO question
Did you specify a media query SPECIFICALLY for mobile?
You may need to add
// you can use any other value of screen width mobiles use like 640, 768
#media (max-width:480px){
line-height: 15px; // The line height you want to show on mobile
}
Not all browsers have a default. Almost always I make a habit of setting styles on the body element
body{
font-size: 100%;
line-height: 1.333%;
}
to take care of things like this.
I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties
ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */
Futhermore as I needed font change for mobile chrome only I tried media query and it worked.
#media (max-width: 1000px) {
#font-face{
font-family:'FancyFont';
src:url('fonts/FancyFont.ttf');
font-weight:400;
ascent-override: 92%;
}
}

How to small the h1 tag in a mobile bootstrap2.3?

I have just started bootstraps & i have faced a problem.....!
I have an h1 tag at the top of my site. I design it up and check it out in a browser – looks great. Then I shrink it down to a mobile width, and the font is way too big! Here’s the thinking behind mobile first: how to small the same tag font in a mobile.
Use media queries.
#media (max-width: 480px) {
h1{
font-size: 14px; /* or anything you want */
}
}
Another possibility is to use a JavaScript library for responsive typefaces:
FlowType.js
FitText.js

Does Internet Explorer and Firefox support #media page?

I've created a page with tables of data that I want to be big enough to view comfortably on the screen but when it goes to print I want it to shrink down to fit on the page but when I change the size of the table, td's and fonts it wont work, the code works in chrome but not the other two browsers.
#media print{
.table6{
page-break-inside: avoid;
min-width: 500px;
max-width: 900px;
}
.table6 td{
font-size: 59.35%;
}
.th7{
max-width: 100px!important;
}
.th8{
max-width: 28px!important;
font-size: 58%;
}
}
The CSS works the print css works but only on certain elements and using certain attributes like display: none to hide navigation links etc.
According to http://caniuse.com/#feat=css-mediaqueries, CSS3 media queries are supported as of IE9 and Firefox 23.0
whatever you need to check compatability for, i highly suggest:
http://caniuse.com/css-mediaqueries
hope that helps
Solved the issue, when changing the width inside of #media print{} it can't override the values which exist in the regular css which is suitable for the screen, even when !important is called on it so I put the css for my table inside #media screen{} and it worked.
So if anyone has this issue with changing widths heights or size in general when printing in other browsers make sure your css is split up into #media print{} and #media screen{} otherwise it wont work in IE or Firefox.
(EDIT)
In firefox also if you want something to appear on the screen one way and print another you MUST have your styles for on the screen in #media screen{} if you leave it in the normal css print styles will never override the regular css. For example I had this inside the normal css but it was ignored in firefox when printing
.table6{
float: left;
}
So I had to put it like this
#media screen{
.table6{
float: left;
}
}

Responsive design and internet explorer

I'm using html5 template with responsive layout and it works just fine (in all major browsers).
I'm using wide, 728px ad (google adsense) in the header, and I would like to hide it, when viewport width is less than 728px. So I modified the css file - added
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
}
to the end of file. Everything works perfect in firefox and chrome. But IE10 doesn't hide the banner, when changing the window width.
modified code:
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
body {
background:yellow;
}
}
also doesn't hide the banner in IE, however, the background change is applied...
Do you have ayn idea, why IE doesn't hide the banner?
Thanks
IE has a few well known bugs, one of which is the one you've encountered.
try visibility:hidden;

html making an email fit across multiple mobile devices

hi i'm creating an enewsletter and am trying to resize it for when its viewd on a mobile i have it working on iphone but android i'm unsure as to how to resize because of the massive screen variants. heres what ive got so far.
so in my i have too added things that overide the style if the screen width is a certain size.
#media only screen and (max-device-width: 320px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 300px !important; }
#content_rows, .mobwidthtext {width:300px !important;}
.banner {height:94px !important;}
.top {height:67px !important;}
.footer {height:109px !important;}
}
#media only screen and (max-device-width: 400px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 400px !important; }
#content_rows, .mobwidthtext {width:380px !important;}
.banner {height:117px !important;}
.top {height:83px !important;}
.footer {height:136px !important;}
}
Most email clients ignore CSS declarations that are not inline. Embedded stylesheets are ignored as well. Media queries will not work because they would override those made by web-based email clients, such as Gmail (i.e. what you want to do will not work).
Email HTML standards are pretty brain-dead. Keep in mind that things like MS Outlook don't even use browser technology to view emails - they use the MS Word engine.
Here's a good guide as to what CSS features can be used in emails:
http://www.campaignmonitor.com/css/
I disagree with the above answer. Using media queries for mobile will most definitely work but for android set your max screen size to 480. make sure to keep !important on all styles set by the query and ensure you have a general layout in your inline styles. this will result in browser stripping the css in head and just using the inline. Then the mobiles (majority of which do not strip head) using your media queries, I would recommend a large amount of testing before a send. But the only issue you have atm is just finding the correct maxwidths as you have to take into account the portrait and landscape widths as well. While also considering that zoom can also set off meia Queries with some devices