ansaurus

Question

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

Answer 1

A:

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).

Secret Agent Man 2010-07-09 01:08:43

That was a good idea, but even that didn't work!

B T 2010-07-09 01:20:42

Answer 2

+1 A:

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.

Jason McCreary 2010-07-09 01:08:43

Answer 3

+1 A:

replace image with img on your style

Mowgli 2010-07-09 01:09:43

"image" was a typo, and 'img' doesn't fix it.

B T 2010-07-09 01:20:21

Answer 4

+1 A:

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"&gt;&lt;/a&gt;&lt;/div&gt;

hallie 2010-07-09 01:10:35

Was about to post the same thing. This fixes it.

David 2010-07-09 01:12:00

So did you guys actually try this? The "image" tag was a typo, I actually had 'img' in my original document. This doesn't in fact fix it.

B T 2010-07-09 01:20:03

I tested it. Did you make sure to leave no spaces between the beginning <div> and ending </div> tags? Thats the real fix. If you put whitespace, you will still have the problem.

David 2010-07-09 01:21:07

Sorry, I think i commented on the wrong one. This does work.

B T 2010-07-09 02:12:49

Answer 5

+1 A:

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"&gt; 

<html xmlns="http://www.w3.org/1999/xhtml"&gt;  
<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>

David 2010-07-09 01:22:25

Hey! I didn't even have any divs. But I introduced one and made sure to leave no space. This fixed the problem. Thanks dude.

B T 2010-07-09 01:26:00

Answer 6

+2 A:

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.)

Guffa 2010-07-09 01:23:53

This also worked

B T 2010-07-09 01:30:37

+1 I liked this answer better because it didn't add mystery divs to the HTML. And, it explained the source of IE's rendering "error".

Brock Adams 2010-07-09 01:37:11

ansaurus

tags:

views:

answers:

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

related questions