Robin Fisher wrote:
> Do you know why there is a couple of extra pixels under the header
> image? Firefox is respecting a max-height declaration of 150px but
> IE seems to be adding 3 pixels.
Depending on font-size...
An image is 'inline' by default, and that is the space reserved for
text-descenders. So if you change font-size in IE/win, you'll also
change the size of that space.
The reason that space only show up in IE/win, is that a 'Transitional'
doctype triggers something called "almost standard" in most other
browsers - making them add some non-standard "trickery" to images.
IE/win doesn't have this 'almost standard' mode.
The safe solution is to add/restyle a bit so the choice of doctype
doesn't matter. Floating an image turns it into a block-element - no
descender-space, but a bit more styling is needed to contain those
floating images and align them correctly.
Placing the following at the bottom of your stylesheet will work...
@media screen {
#header {width: 100%; display: table;}
#header img {float: left; margin-right: 29px;}
#wrapper {clear: both;}
}
...and the added @media-wrapper around the header-styles is there to
prevent IE/Mac seeing these styles, as it doesn't understand enough of
it to react properly.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
