CODEWITHSUNDEEP
cssinternet-explorer
B T
B T

Reputation: 60855

How do I get rid of the space at the bottom of the page in IE

I'm trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. Heres my simplified source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <style>
        body, a, head, img
        {   margin: 0;
            padding: 0;
            border: none;
            border-width: 0px;
        }
    </style>
</head>

<body>
    <a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>

You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. Where the crap is that space coming from?

Upvotes: 1

Views: 497

Answers (6)

Guffa
Guffa

Reputation: 700252

The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.

One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:

a, img { display: block; }

(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.)

Upvotes: 2

David
David

Reputation: 2795

This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. Make sure NOT to introduce whitespace after the </a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<title>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css"> 
body, a, head, img 
{   
    margin: 0px; 
    padding: 0px; 
    border: none; 
    border-width: 0px; 
} 
</style> 
</head>
<body> 
    <div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body> 
</html>

Upvotes: 1

hallie
hallie

Reputation: 2845

Put your "a" and "img" tag inside a div like this

<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>

Upvotes: 1

m0g
m0g

Reputation: 969

replace image with img on your style

Upvotes: 1

Jason McCreary
Jason McCreary

Reputation: 72971

All browsers come with default styles. Although you are resetting your tags for the page, there's no such tag as image in your CSS.

I suggest using a more global reset stylesheet. I like the one from Eric Meyer. Something as simple as this can help level the playing field between browsers.

Upvotes: 1

Scott DePouw
Scott DePouw

Reputation: 3889

All Internet browsers have a small bit of padding they add to the pages themselves. One surefire way to get rid of it is to simply nuke all margin and padding from every element.

*
{
    margin: 0px;
    padding: 0px;
}

Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do).

Upvotes: 0

Related Questions