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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark StegglesWeb 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.