I am having an issue in Outlook 2007/10 when coding an email.
I am getting added padding/margin between my tables and cant see what it could be.
I have one big tables, with 3 tables inside it, all aligned left. I would have put them in seperate td's but need them to be out of the td's for it to work how i want responsively.
I have added border-collapse:collapse and border-spacing:0px to every table and all the cellpadding and spacing is set to 0. All my code is inline. This gap doesn't show in any other clients.
Any ideas?
Have attached diagram of my tables.
Aligning (floating) tables will often cause a few pixels worth of gap, particularly in Outlook. Try adding this to your page:
<style type="text/css">
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
</style>
From memory, this doesn't remove it fully - there is still a stubborn 1px line, which is fine, unless you are using background colors that make it obvious. To get rid of it completely you'll have to play around with adding a border also, which is kinda silly, but that is Outlook for you...
However, for responsive, I'd recommend you go with the <td>'s instead, and just toggle width:100%; display:block; in the media query to control them responsively. Here is a basic example
Related
I am producing a 20+ page report in HTML and wish to control the page breaks, margins etc carefully.
I have one particular DIV that is repeated many times and contains various floated DIVs, SVGs etc. This is styled with page-break-before: always;, and works well.
However when printing in Chrome (and only seen in print preview and the final hard copy) the height of the DIVs appears to vary randomly, with other paras split across pages. It's as if Chrome gets confused about the height of one element and then carries this mistake on, causing other elements to split across page breaks.
I can fix this by putting border:1px solid white; on the DIV. Why does this work?
I guess this is something to do with box-sizing and collapsing margins or is it just a quirk?
And is there a better, more universal way to achieve this? I've tried box-sizing: border-box but this doesn't correct it like the white border does.
I'm trying to make a basic A4 document in HTML using mm CSS sizing. The document is sized perfectly - it prints fine on A4, covering virtually the full page, leaving a nice 3mm margin around it. I'm using a table for the layout, as the original document (that i'm re-creating in HTML) was created in Excel, and therefore has a table structure.
As I need the table to have an exact 3mm margin, i'm setting the width and height in mm, and using absolute positioning (3mm top and left). I had originally created the table-like layout using divs - but making the lines overlap perfectly using this is extremely fiddly - you can't really do it properly, as you're working with a mixture of millimetres and pixels, hence my choice for using a table.
The table displays perfectly, all rows uniformly fill the document. Some of the rows need to be split, so I chose to use floated divs within the s, within the s.
Despite resetting the CSS, and setting the <tr>s padding to 0, and the <td>s padding to 0, and giving the table border-collapse: collapse; and border-spacing: 0;, there's an annoying little margin between the div, that even Chrome can't explain why it's there:
https://www.dropbox.com/s/qt1n54m9fxxl6f2/job_sheet_template.html
You may need to open the image link, and zoom in, to see the green highlighted space below the divs (which is apparently the <td>s padding). In the bottom, right hand corner, you can see that the padding isnt set?
Why is this here?
Your image shows that border collapse isn't being applied. Try using:
table {
border-collapse: collapse !important;
}
I've fixed the problem -
The padding isn't set, but somehow setting the divs height to 100% doesn't work - I've now set it to 5.4mm which fits perfectly.
for html
html
{
font-size:0;
}
I'm looking to create a simple WordPress page that will display several images, along with some descriptions.
This page is for a customer who would like to update it on her own in the future. She has no familiarity with HTML or CSS.
I'm using a child theme based on "Attitude", although I think this issue would apply to most themes.
The layout I'm hoping for is one where an img is given the class "alignleft", to which I've appended the margin-right to be 50px.
So, it looks gorgeous as long as the text is beside the image. But, once the text gets below the image, it wraps back to the left of the page... just as it should, I suppose! :)
Only, for my page, I'd like for the text to stay "indented", even past the image.
The kicker is that the images are not all going to be the same height or width. Although the height and width dimensions will be between 100px and 300px in almost every case.
WHAT I'M HOPING FOR:
WHAT I'M GETTING:
Things I've already considered are...
div's. If it were just me updating the page, div's would be super easy to implement. But I don't want her to have to do any HTML. (Maybe I could make a template. Hmm...)
Tables. I feel like maybe this isn't ideal because of the variable widths of the images. I suppose I could set the alignment of the "images" column to be "right", and then set cell padding to 50px on the right side.
A NextGen Gallery. If I do this, then I lose the ability to have bullet points in the text part (since the "Description" section of NextGen photos doesn't appear to handle that sort of thing).
Adding a margin-bottom to the .alignleft class. But, again, the images will be different heights AND the paragraphs will be different lengths.
You know, I think I'm on to something here.
It may not be the most eloquent solution. But I think it's going to work.
I'm going with tables!
First off, I have the TinyMCE WordPress plugin installed, so adding tables using WordPress's visual editor is easy enough for anyone to do.
I've added the following CSS to my child themes style.css file (Again, I'm using a child theme of Attitude):
.entry-content table tr td { width:auto;text-align:justify;vertical-align:top;}
.entry-content table tr td:first-child { width: 36%}
.entry-content table tr td:first-child img {width:100%;height:auto;}
I might make a few tweaks. But otherwise, I think this'll work pretty well.
The images will now be the same width. Which is great. My friend can now upload images of different sizes (again, probably between 100px and 300px in height and width), and the CSS will take care of formatting. Huzzah!
Hopefully this should be short and sweet, I am making a website and i want two 40x40 images placed next to each other, the problem is that their seems to be a rogue margin or padding that is being applied to it. I have tried to remove it but with no luck.
Image:http://i.minus.com/jblfTtkLGRaE74.png
As you can see i have firebug open and it shows that there is no styles being applied to the images to cause the blank space inbetween the images to happen. Also the images are not childs of a div. and i have used a CSS Reset.
If you need anymore information please ask.
Thank you.
It's because images are inline elements. Options to remove the gap include adding float: left to your images or removing all whitespace between your images in the HTML.
If you're using firefox and you're certain that all the space taking values have been zeroed then it's probably the font size of of the white space, remove any whitespace or spaces between the 2 images, you can also try setting the font-size of the parent element to 0.
Interesting, without looking at any of the code / the reset that you claim to be using. Here is how I would quickly put two images right next to each other using CSS.
img {
float: left;
margin: 0;
padding: 0;
border: 0;
}
Sometimes you have go back and dig through your code a little bit and do a little rewriting. Best of luck!
You can use the CSS
word-spacing:-1em;
on the parent container to remove these spaces between images.
Have you tried using a table and placing each image within?
The main borders on the page tend to be wierd but I've realised the table method tends to allow for more refinement. Best part is it wont show up on the page.
This is a screenshot of a table in Chrome 5.
The same table rendered in IE8:
You can view the page here:
http://labs.pieterdedecker.be/vspwpg/?page_id=96
This CSS rule adds the padding that IE8 won't respect:
td#content table.subitems { padding: 5px; }
Try adding the padding to the td/th elements under the table, not the table itself. The table cells / headings get zeroed out by *{margin:0;padding:0;} as well, so you have to explicitly specify.
Edit: If you don't mean to put padding on every table cell/heading then try a margin on the table or padding on a table wrapper div.
I ran into the same problem with my site. The class was applied to the <td> tag but its padding was not showing up. Then I declared the padding inline, and it showed up fine. I nearly put a fist through my monitor, but when I realized that would hurt me and not IE, I refrained. It's not pretty, but it works.
<td class="doesntMatterBecauseIEHatesYou" style="padding:10px;">Horray, IE doesn't hate you anymore. But you still hate IE.</td>