Unwanted Spacing Below Images in Xhtml 1.0 Strict

Unwanted spacing below images in XHTML 1.0 Strict

http://www.schoonzie.com/rogue-padding-below-images

If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.

The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

The other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. For example, you could try the following:

div img {vertical-align: bottom;}

How to remove unwanted space between rows and columns in table?

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

line-height not working after change from XHTML1 Trans to HTML5 doctype

The HTML5 doctype, being the more modern doctype, causes standards mode in browsers. The XHTML 1.0 Transitional doctype causes limited-quirks mode. The behaviour you get with the HTML5 doctype is the correct one, so you are really asking "How do I make line-height behave like it shouldn't?". That's going to be difficult.

Here's a description of the differences in line-height calculations between limited-quirks(aka almost standards) and standards modes: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

You will need to embrace the standards mode behaviour and adjust your layouts accordingly.

How can I show a hyperlinked image with two different size/color borders around it?

On img, set the background to black and add 1px of padding then the border can be the 9px of white.

img {
background-color:#000;
padding:1px;
border:9px solid #fff;
}

This will give a double border as long as you don't have transparent images.

HTML 5 Doctype creates extra space for justified horizontal unorderd list menu

Add line-height:0 to the div with class nav, line-height:1.2 to the ul and vertical-align:top to the span.

Also consider replacing the span with a .nav:after pseudo-element.

Like this: http://jsfiddle.net/frhxS/13/

The principle behind the changes is to remove the effect of the strut on the two line boxes. The strut has no effect on the height of the line boxes when using XHTML 1.0 Transitional doctype or the HTML 4.01 Transitional doctype but does set a minimum height for the line boxes when used with either the HTML5 doctype or the XHTML 1.0 Strict or HTML 4.01 Strict doctypes.

---

Related Topics