I'm trying to create a relatively simple page with a that is on the left side, taking up the whole height of the browsers window, with a fixed width (say 200px), and then an that uses the rest of the window width, and also the whole windows height. I want to use CSS to do it, no javascript. I don't mind wrapping the in a if I have to.
<html>
<head>
<style type="text/css">
body{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<td style="min-width: 200px;" bgcolor="#333333">
</td>
<td width="100%" bgcolor="#666666">
</td>
</tr>
</table>
</body>
Now what I should say is that I have only tested this in Firefox and Safari (mac user) so I don't know how it will look in Internet Explorer etc, but feel free to try it, this should give you what you want :)
Related
I'm building a web page in Sharepoint 2010, and the code below centers successfully when I use Chrome 58 as my browser but not when I use IE 11. I have tried using text-align: center; but that didn't seem to work either. The table aligned to the left of the page when I did that. Any ideas how I can get this to center on the page in IE? Also, why does Chrome only accept "-webkit-center" instead of "center"?
<style>
.s4-wpcell-plain{
text-align: -webkit-center !important;
}
</style>
<table style="width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="MSOZoneCell_WebPartWPQ2" valign="top" class="s4-wpcell-plain">
<!-- content -->
</td>
</tr>
</tbody>
</table>
Remove the -webkit- from your style.
<html>
<head>
<style>
.s4-wpcell-plain{
text-align: center;
}
</style>
</head>
<body>
<table style="width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="MSOZoneCell_WebPartWPQ2" valign="top" class="s4-wpcell-plain">
fihfiehoipepfi
<!-- content -->
</td>
</tr>
</tbody>
</table>
</body>
</html>
this works perfectly on both IE and chrome.
However, if there are styles that are specific to chrome which you want to implement, write all the required versions of it. one should be the normal and the others with the webkit or moz depending on the browser.
like
<style>
.s4-wpcell-plain{
text-align: -webkit-center;
text-align: center
}
</style>
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
I have a table element which I'm going to send as an email.
I want it to render on outlook 2010, gmail native for android, and gmail on chrome on android.
I would like my table to have 100% width upto 600px.
One solution would be do with fixed settings, and have media queries.
#media screen and (max-width: 600px) {
table[class="responsive-table"] {
width: 100% !important;
}
}
This works fine in all but gmail on chrome on android, which takes the 600px width and overflows the screen, breaking the whole layout.
So I thought about doing a fluid layout, and putting 100% to the table, and giving it a max-width, but now outlook does not respect max-width, so it looks too wide in outlook.
So I can't use fluid because it looks bad on outlook, and I can't use fixed because it looks bad on gmail on chrome on mobile.
Is there any way I can make the look ok in both? Is there any hack for this?
Media queries doesn't work in Gmail App for Android and iPhone.
This can be done constructing basic layout shown below.
Tested in 60+ configurations, including:
Outlooks 03/07/10/11/13
iPhone 5 iOS7
iPhone 5/6 iOS8
Gmail App iPhone & Android
Android 4.4.4
<!-- wrapper -->
<table align="center" width="100%" style="width: 100%;">
<tr>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
<!-- in the middle cell you set your max-width -->
<!-- notice double declaration for yahoo in html attribute -->
<td align="center" width="600" style="width: 600px;">
<!-- this table scales up to parent cell -->
<table align="center" border="0" width="100%" style="width: 100%;">
<tr>
<td align="center">
<!-- content -->
</td>
</tr>
</table>
</td>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
</tr>
</table>
Use conditional code with fluid layout. I also would assign a class or ID to your container and have it as a defined width (e.g.600px) in style block in head with media queries pushing back to percent after dropping below that width. This is for Apple mail and a couple other clients that do not respect max-width.
E.g.
<head><style> #outlook {width:600px;}</style></head>
<body>
<!--[if (mso) | (IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style=" max-width: 600px; border-collapse:collapse;" id="outlook">
<tr>
<td align="center"> YOUR CONTENT HERE</td>
</tr>
</table>
<!--[if (mso) | (IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
I'm trying to lay out a responsive email template to work across all major clients, and I'm just about there, but since Outlook doesn't support max-width, and I have all elements set to width: 100%, it's putting my content all the way to the left since it's left-aligned. I can center the header and footer with align:center or margin: 0 auto.
What can I do to prevent my content from going all the way to the left without giving anything a fixed width or using max-width (which I am using, but Outlook just ignores)?
Sounds like you are referring more to a "fluid" layout (basing off percentage) rather than a "responsive" one (where you would use media queries to specify styles based on width of display device).
Since setting a pixel value for the margin-left wouldn't make a lot of sense, why not set the margin-left to a percentage value?
margin-left: 4%;
Otherwise, you might want to take a look at the following resource found on MailChimp regarding media queries.
http://templates.mailchimp.com/development/media-queries/
Try this and use media queries to adjust the width percentages at different screen sizes if needed. Just keep in mind that your media queries won't take effect in these email clients.
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%">
</td>
<td align="left" width="80%" bgcolor="#FFFFFF">
<br>content<br>...<br>
</td>
<td width="10%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?
Have a look at this pic:
The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.
Does anyone know how to get rid of this space on the body?
Also here’s some CSS for the start of the email:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
Cheers!
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
Here's a trick to fake full backgrounds: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.
If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.
Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.
I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.
Stange that the <body style="padding:0px; margin:0px;"> doesn't work.
I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.
Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
You will need to set the width of 600 to whatever the width of your email is.
There are cross-email client bugs with body tags, and padding/margin values in CSS.
NB - this is only necessary, and only works, on the body tag.
With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...
As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
I know this is a bit late, but I came across this post and thought you might be able to test this method as well.
http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/
"Fixing the forced body padding in Outlook 2007, 2010 and 2013
Testing a html email recently with a high percentage of recipients
likely to be users of Microsoft Outlook I came across a bug where it’s
not possible to overwrite the forced body padding in versions of
outlook (which use MS Words rendering engine 2007, 2010, 2013).
This was breaking the design and causing unwanted whitespace on the
left margin of the email. The offending versions of outlook support
margin (including negative margin) but only support inline styles. So
the fix/hack is to wrap the entire email in a wrapper table and apply
negative margin to just the problematic email clients – using html ‘if
statements’ as below."
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>