Unwanted margin beneath footer on IE8

Hello,

I would like to understand why the attached code shows a margin beneath the footer block in the attached code. It is only a few pixels high but causes the vertical scrollbar to appear.

I would like to fix this CSS so it is consistent across IE7, IE8, Chrome and Firefox. With the current code there is no margin beneath the footer in Chrome and Firefox.

Regards,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<HEAD>
   <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <TITLE>Mondizen</TITLE>

<style>
html, body {
       margin:0;
       padding:0;
       font-size: 12px;
       height:100%;
       background-color: #000000;
}

#page {
    min-height:100%;
    height: auto !important;
    height: 100%;
}


#footer {
        line-height: 18px; /* was defaulting to 14px for Font in Chrone 18px in IE*/ 
        height: 138px; 
        width: 100%;
        margin-top: 0px;
}
#page {
        margin-bottom: -138px;
}
#front_frame {
        width: 100%;
        height: 120px;
}
</style>

</HEAD><BODY>
		
<DIV id="page">
</DIV>
<DIV id="footer">
Contactex-re
<IFRAME allowtransparency="true" frameborder="0" id="front_frame" src="http://www.google.com"></IFRAME>
</DIV>

</BODY >
</HTML >

Open in new window

howtogetitrightAsked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
Hello,

First of all... why are you using a frameset doctype? Putting your code through validator.w3.org gives a lot of errors.


The problem is simply being caused by some default padding on the div. Adding div {padding:0} fixes it.

I suggest you get some good reset css to get rid of some default settings in browsers so that you get a level playing field. Search for reset css in a search engine and you will find some

 
0
 
AidiakapiCommented:
Set the css property overflow to hidden, it'll hide the scrollbar. Example:
CSS:
elem.class#id /* change or remove */
{
  overflow: hidden;
}

Open in new window

0
 
c_a_n_o_nCommented:
I found this:  position:relative; top/*\**/:1px\9; *top:0;
Source: http://readableweb.com/ie8-bug-html-spacer-entities-create-one-pixel-jog-in-line-height/

I added it to your #footer like so

#footer {
        line-height: 18px; /* was defaulting to 14px for Font in Chrome 18px in IE*/  
        position:relative; top/*\**/:1px\9; *top:0;
        height: 138px;  
        width: 100%;
        margin-top: 0px;
}

I tested it on IE8 in Vista, there still remains from time to time the scrollbar on the far right, but the space on the bottom is gone.  

Hope this helps.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
c_a_n_o_nCommented:
Thanks to Aidiakapi above, I added the       overflow: hidden;  to your html, body.  This fixed the other part of your issue.

html, body {
       margin:0;
       padding:0;
       font-size: 12px;
       height:100%;
       background-color: #000000;
       overflow: hidden;
}
0
 
howtogetitrightAuthor Commented:
Hi Steggs,

I was using the frameset doctype because there is an iframe in the document. I think I should be using transitional - so thanks for pointing that out.

The code snippet below passes the validator and sets the div padding but the vertical scroll is still displayed.

However it seems that by simply moving the last </div> tag into the same line as the iframe the vertical scrollbar disappears - is this really a possible cause ?

Regards,


<!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" xml:lang="fr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Mondizen</title>

<style type="text/css">
/*<![CDATA[*/
html, body {
       margin:0;
       padding:0;
       font-size: 12px;
       height:100%;
       background-color: #000000;
}

#page {
    min-height:100%;
    height: auto !important;
    height: 100%;
}


#footer {
        line-height: 18px; /* was defaulting to 14px for Font in Chrone 18px in IE*/ 
        height: 138px; 
        width: 100%;
        margin-top: 0px;
}
#page {
        margin-bottom: -138px;
}
#front_frame {
        width: 100%;
        height: 120px;
}
div {
        padding:0;
}
/*]]>*/


</style>

</head>
<body>
		
<div id="page"></div>
<div id="footer">Contactex-re <iframe frameborder="0" id="front_frame" src="http://www.google.com" name="front_frame"></iframe>
</div>
</body>
</html>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
howtogetitright,

the frameset doctype has nothing to do with iframes. Frameset doctype is for <frameset> elements. Please read: http://www.w3schools.com/tags/tag_frameset.asp

You should use a strict doctype like:

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

Hmmm, I thought padding solved the issue but guess I messed up. Adding overflow:hidden to #footer should fix it

Hope this helps
0
 
howtogetitrightAuthor Commented:
Hi Steggs & Aidiakapi & canon,

I can't use a strict doctype because I need the iframe.

I don't want the vertical scroll bar to be removed when it should be there so setting overflow:hidden is not possible.

As I mentioned in the previous post, the problem is solved by removing a newline between the </iframe> and </div> tag at the end of the document. I'm just surprised that this works and I don't understand why it works.

I've attached a version of the working code

If I have to start playing with whitespace to get pages working in IE it seems a crazy amount of effort !Does anyone know why that newline should make a difference ?

Regards,
<!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" xml:lang="fr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Mondizen</title>

<style type="text/css">
/*<![CDATA[*/
html, body {
       margin:0;
       padding:0;
       font-size: 12px;
       height:100%;
       background-color: #000000;
}

#page {
    min-height:100%;
    height: auto !important;
    height: 100%;
}


#footer {
        line-height: 18px; /* was defaulting to 14px for Font in Chrone 18px in IE*/ 
        height: 138px; 
        width: 100%;
        margin-top: 0px;
}
#page {
        margin-bottom: -138px;
}
#front_frame {
        width: 100%;
        height: 120px;
}
div {
        padding:0;
}
/*]]>*/


</style>

</head>
<body>
		
<div id="page"></div>
<div id="footer">Contactex-re <iframe frameborder="0" id="front_frame" src="http://www.google.com" name="front_frame"></iframe></div>
</body>
</html>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
hello,

You can use object tag instead of iframe http://aplus.rs/web-dev/insert-html-page-into-another-html-page/

Adding overflow hidden to footer will not stop a scrollbar appearing on the page. It's just saying that anything that is more than 138px from the top of the footer will not be shown. This does not affect the page itself just the footer.
0
 
AidiakapiCommented:
Hey Steggs,

overflow: hidden does remove the scrollbar.
Overflow doesn't only mean that parts won't be shown, it also determinate the scrollbar(s). Because overflow: auto for example will only show a scrollbar if it doesn't fit.
Also you solution for 'removing' the iframe is incorrect, because it uses conditional comments (<!--[if IE]>).
This is also not valid in the doctype, so then you can better use the transitional doctype.

-Aidiakapi
0
 
Mark StegglesWeb DeveloperCommented:
@Aidiakapi: Adding overflow <strong>to the footer</strong> has no effect on the scrollbar for the page itself... it only affects the footer

Even if a few parts of the code are not valid in strict... it is still better to use strict.. transitional should not be used at all

Thanks
0
 
AidiakapiCommented:
That's your opinion about it, I think using a valid code is more important then the strict dtd.

Well anyways, the problem is solved so :)
0
 
howtogetitrightAuthor Commented:
Thanks I agree the problemis solved. But I don't understand why the solution works :(

Adding overflow:hidden to the footer does not impact the vertical scrollbar of the page. I am not trying to remove the vertical scrollbar from the footer but from the entire page.

Steggs picked up the issue with the doctype and I've integrated that change into the page.

I agree that there is no point using a strict doctype if the code does not validate - this is why the transitional doctype exists.  Until IE7 is used by only a small number of people I don't see a good alternative to iframes.

Thanks for the discussion. I found another issue with the code and I will post another question in regards to this.

Regards,
0
 
howtogetitrightAuthor Commented:
It did not resolve the problem of the scrollbar appearing but put me on a path to finding a solution myself.
0
All Courses

From novice to tech pro — start learning today.