We're using the following code as a vertical spacer in an HTML email:
<div style="height:14px; font-size:14px; line-height:14px;"> </div>
This works well everywhere -- except Hotmail where it creates a very large space. We've researched this a bit and it seems Hotmail embeds CSS by default that causes a lot of issues.
We've included the following code to try to address the issue, to no avail:
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; margin: 0; padding: 0;}
Hoping that someone else here might have a solution or even a workaround.
If its just a spacer then why not use a table with a spacer image instead. Most email clients prefer a table over a div with inline style and will render it correctly. Something as such:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10">
<img src="http://media.instantcustomer.com/22033/0/5_spacer.png" alt="" width="1" height="10" border="0" style="border:0" />
</td>
</tr>
</table>
Change the height from 10 to whatever height you need. You ll have to specify the height in the td as well as the img element. Replace the spacer image if you like. You might even be able to get away with not using a spacer image at all.
You can use this: <br> <br> or you can wrap it in a font tag to set the height. You can also use padding in your <td>, or a table as saganbyte suggested.
Just note that Outlook wraps <p> tags around tables, which adds about 15-20px of vertical spacing if someone forwards your email. Using a table rows instead adds only a few pixels. With this in mind, always keep your background colors the same so that you don't get an unwanted line.
Related
I need to center an entire table in xHTML. The tags that work in HTML to do so do not necessarily work in xHTML, but the way to do it is not obvious (to me).
Works in HTML:
<div>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse; width:90%;">
Not working in xHTML:
<div>
<table border="0" cellspacing="0" cellpadding="0" style="align:center;border-collapse:collapse; width:90%;">
Using text-align:center instead changes the alignment of text within cells, rather than the alignment of the entire table on the page.
What is the correct method to center align a table in xHTML.
One way to accomplish this is to use margins in the style attribute:
<table style="margin-left:auto; margin-right:auto">
Posting as answer.
I think you're better off using the margins to center it. like:
margin:0px auto;
That works WAY better. Hope that helps!
Keep in mind that you're using CSS to change adjective/styling whereas (X)HTML concentrates on noun constructs (headers, images, paragraphs, etc). XHTML table is a noun, CSS margin and text-align are adjectives used to describe those nouns.
Also it's simpler to use a block/inline catch-all class:
.center {margin: auto; text-align: center;}
Having some issues with table content set at 100% not rendering properly in Safari(all sorts of weird sizing) and then Firefox(spills over the edge).
Is there a way I can set it to show width:100% for Firefox in TD and max-width:100% in Safari using CSS, this is what seems to fix it when set manually in each using Inspect Element.
After Googling the issue, table 100% width problems does appear problematic for Safari and Firefox browsers.
Can max-width:100% AND width:100% be both set for an element?
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width:100%">
<tbody>
<tr>
<td><img src="pic1.jpg" style="border-style:solid; border- width:10px; float:left; max-height:240px; max-width:96%" ></td>
<td><img src="pic2.jpg" style="border-style:solid; border-width:10px; float:left; max-height:240px; max-width:96%" ></td>
</tr>
</tbody>
</table>
Disclaimer: I don't have Safari here, but I can solve the problems in such a way that the code works the same in Mozilla, Chrome and IE. Hope that helps!
Tables are meant for displaying data. That's what they're designed for; that's what they're good at. So one of their design paradigms is that they don't hide things; if the width would become too narrow to show everything, they ignore the width rules and display everything anyway.
With that in mind, look at what happens in Mozilla. If you have two images side by side that together are wider than the width of the window, the table ignores its width:100% rule and just displays the images, no matter what, even at the cost of a horizontal scrollbar.
So, what can you do; you can dispense with the table and just display the images side by side. Make the a elements 50% wide, just like the table cells did.
a {
float:left;
width:50%;
}
a img {
border-style:solid;
border-width:10px;
max-height:240px;
box-sizing:border-box; /* to account for the border */
max-width:100%;
}
<img src="http://lorempixel.com/270/240"/>
<img src="http://lorempixel.com/g/270/240"/>
Hello I am trying to make an online chat application.
I have the html:
<body>
<table align="center" width="80%">
<tbody class="scroll">
<!--All of the chat-->
</tbody>
<tbody class="formheight" style="width:100%">
<tr>
<td>
<form style="width:100%" action="Write-to.php" method="post">
<input autocomplete="off" name="txt" type="text" id="usermsg" style="font-size:2.4vw;" value="" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
And the css:
html, body
{
height: 100%;
max-height:100%;
overflow: hidden;
}
table
{
height: 100%;
}
tbody {
overflow: auto;
width:100%;
}
thead > tr, tbody{
display:block;
}
I want the 2nd tbody (The one that contains the form) to lie at the bottom of the page and the first to fill the rest of the page upwards.
Currently I am having to use jquery to (kind of) do what I want. Currently the form is half hidden. I would rather do this all with CSS so that it works better with mobile devices.
How could I do that?
Jquery:
var heighty = $(window).height();
var height = $('.formheight').height();
$(".scroll").css("height", heighty - height + "px");
I also can't for the life of me get the form text input to be 100% width?
Please see JSfiddle
I am also very open to another way of laying out this chat app all together!
This is possible in CSS, but would be very difficult to get working across all browsers. Instead, here is my recommendation:
Create an element that fills up 100% height with a bottom padding set to X px.
Create an element with position:fixed and a height of X px.
Give the latter element a z-index:2 and the former a z-index:1. z-index doesn't need to be assigned manually, elements further down in source code automatically have a higher priority and are displayed over previous elements (if they overlay visually).
If you want, you could use a different unit. Percents are very easy because you can have them add up to 100%, so no need for a margin. Of course each has its respective drawbacks, but in my experience what I've described generally has good compatibility and displays comparably on all devices. You could even use CSS #media queries to change the height, X, for different devices.
You need to use something what we call a "Sticky Footer", In your case, your second body goes in the sticky footer. Have a look at this http://ryanfait.com/sticky-footer/ or this http://www.cssstickyfooter.com/ for the css+html for a sticky footer
As it turns out I don't know CSS.
I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)
I have a table with this style
table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}
but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?
Thanks.
EDIT
This is my table
<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
<td class="rpt_stroke" style="width: 280px"> </td>
</tr>
</tbody>
</table>
The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:
all elements except table-row-group,
table-header-group,
table-footer-group, table-row,
table-column-group and table-column
So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.
Take a look at the last line in his css:
table {
border-collapse: collapse;
border-spacing: 0;
}
Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.
Try putting padding on the cells themselves or add a margin to the table.
Works fine for me. Did you declare a DocType?
You have to apply the style to the TD's not the table.
table.home_right_top td
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.