I wonder why IE doesn't seem to recognize the width I specify?
Basically I have this code:
<table>
<tr>
<td valign="top" align="right" class="left_frame"></td>
</tr>
</table>
CSS:
.left_frame {
background: url(images/side.gif) repeat-y;
width: 17px;
}
Even if I add width="17" inside the <td></td> tags, the width still doesn't change. This is quite frustrating because the problem seems to be very simple.
I'd say it's because there's no content in your <td>
Try adding a in there so the cell has some content, and see how that goes.
Alternatively, placing a height on the cell may work as well, depending on your requirements.
Basically the cell is a flat line at the moment, and needs something to tell it how tall it is, in order to draw the background in.
Example: http://jsfiddle.net/MvBf5/
Related
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding.
https://www.campaignmonitor.com/css/box-model/padding/
The way to fix this is simple and it will work with every email client:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftsidespacer" width="30"></td>
<td class="maincontent" width="140">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer" width="30"></td>
</tr>
</tbody>
</table>
</body>
</html>
I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly.
Edit: Base table in Outlook 2007
This is the base table in Outlook 2007 with no extra css that I posted above:
This image came out of Litmus.
I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue.
Good luck.
Here is something you can try.
Code:
<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
<tr>
<td height="200"></td>
<td valign="top" style="color:#ffffff;">
All content here
</td>
</tr>
</table>
Result in Outlook version 1803 (tested: 20/04/2018)
What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is.
Note: You can make do without the left column if you wish but do add the height
Hope this is the answer you were looking for.
I want to change the size of my table cell to be smaller in height. The first cell has an image of 300px width. I'd like the second cell to have a height of 100px. I've tried html solutions like <td height="10"> but that hasn't worked. What I'm looking to do is have an image on the left and a text block on the right.
<table>
<tr>
<td> <img id="plattOverlook" src="images/Scenic/plattOverlook.jpg"/> </td>
<td style="background: white"> This is an overlook. </td>
</tr>
</table>
In a simple table adjacent table data cells will always be the same height unless you use
rowspan=*
Have a look at this page (about half way down) -
http://www.htmlcodetutorial.com/tables/_TD_COLSPAN.html
You will have to use rowspan for the image.
Other wise I don't think there's any possible solution
Use rowspan.
Check this fiddle:
http://jsfiddle.net/10z7ya28/
td {
width: 100px;
height: 50px;
}
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.
So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
I have a table nested as such:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
More precisely:
some style info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop. Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell. I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain. If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?
As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.
The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.
It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).
NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])
PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an
answer.
Try set padding:0px; on cointaner and inner table.
Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.
Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.
Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?
You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:
Iframe { height:70%;} not working in IE 8 and Firefox