I've got a small table on one of my pages and I'd like it centered so have coded <table cellpadding="0" cellspacing="0" align="center">which works fine in IE but the table still left aligns in Firefox.
If i use
text-align:center n align:-moz-centerits not working in IE
What do I need to change to get the table to center in Firefox? If I should use -moz-center how to make it work in IE?
I'm stuck here.
Add margin: auto; to the table. That is the standard way to do it.
As Lekensteyn mentioned, here is some code to show it in action:
<div style="margin: 0 auto; text-align:center;">
<table border="1" style="width:200px;">
<tr>
<td>Hello</td>
<td>How</td>
</tr>
<tr>
<td>are</td>
<td>you?</td>
</tr>
</table>
</div>
it should center itself based on the width & margin style definition.
Related
I've created a mailer view in rails, which displays great on all clients except outlook. The limiting factor is the lack of the 'position' attribute.
I'm trying to place an image on top of a table row, so that the top and bottom edges sit above/below the row. I've achieved this for other email clients, by putting the image in another row above this, making the position absolute, and giving it a negative top margin. I can then bring the image down and overlap the bottom row as much as I like by adjusting the top margin value. (See Code)
<tr>
<td>
<%= image_tag(attachments['logo.png'].url, style:"text-
align:left;height:100px; width:100px; margin:-30px 10px 10px 10px;
position: absolute") %>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 125px;">
Some Text
</td>
</tr>
position: absolute does not work in outlook, what would be a good alternative to help me achieve this?
Thanks!
You won't be able to achieve this in the same way as position:absolute.
Your alternatives are:
Split the image up into three and have each slice in each of the three sections.
Make the three row sections into a background image and place the image in as normal.
I understand neither of these are ideal but you're limited with Outlook and the usual margin and position tricks won't work.
With the options I've suggested, rather than restructuring your code, you could simply add a new block just for Outlook, using Outlook specific conditional statements:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Outlook content</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>All other clients</td>
</tr>
</table>
<!--<![endif]-->
I have an issue about vertical white line on Chrome, also on Opera. Microsoft Edge doesn't have this problem.
Js Fiddle
<div id="mainContainer" style="margin:auto; text-align: center">
<table cellspacing="0"; cellpadding="0">
<tbody>
<tr>
<td class="left">Lolo1</td>
<td class="right" style="background-color: green">BlaBla1</td>
</tr>
<tr>
<td class="left">Lolo2</td>
<td class="right" style="background-color: green">Blabla2</td>
</tr>
</tbody>
</table>
As you see there is an unexpected line on the right, I tried to manipulate it with many ways but no luck yet. It feels like its about the font-size difference between browsers, but it shouldn't be.
Also if you try to remove body elements margin-top, you will see a horizonal white line occurs on the bottom too, thats another strange detail.
It seems table element's display: inline value causes this problem. Removing it or changing it as display: inline-table made tds perfectly fit into my table.
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 the following structure
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE HERE
</div>
</td>
</tr>
...
</table>
The first td takes 60px, the second one takes the rest of the 100%, but when I have some long text with no spaces and no dashes the table becomes larger then the 100%.
How to display the non-breakable text in one line or on multiple lines (both ways are acceptable) and keep the table on 100% of the screen?
I've tried to fix this with overflow-hidden but it has no effect.
Here's a screenshot of the problem:link
Set table-layout : fixed in your css or <table style='table-layout : fixed'> that oughta fix it.
Here is the code sample. Check it out.
try the following:
<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE no longer HERE !
</div>
</td>
</tr>
...
</table>
There is a CSS3 property, word-wrap:break-word; that does exactly what you need. But unfortunately it doesn't work with table cells. I think you need to rethink your structure, opting for a table-less design.
I wrote this example for you
<style>
section { /* your table */
display:block;
width:300px;
background-color:#aaf;
}
section:after {display:block; content:''; clear:left}
div { /* your cells */
float:left;
width:100px;
background-color:#faa;
word-wrap:break-word;
}
</style>
<section>
<div>Content.</div>
<div>Loooooooooooooooooooooooooooooooooooooooong cat.</div>
</section>
P.S: word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
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