CSS - Test Your CSS Skills Number 34 - fix this

HTML & CSS
61

Sorry - that was my fault :slight_smile:

I always run the formatting option in my editor when I copy and paste as it highlights any html errors after you format. I actually made a mental note not to format yours as you obviously took time over it but I forgot when I was pasting everyones code. Iā€™ve re-instated your original from the PM you sent so hopefully the message boxes havenā€™t corrupted it :slight_smile:

62

Was just a gentle ribbing - the extra effort was NOT required on your part.

George, sometimes they canā€™t tell when your serious and when youā€™re joking

ā€œNot important for them to know, itā€™s only important for me to know.ā€

Though I donā€™t trust auto-formatters; too often they break my code.

63

Paul,

one thing puzzled me from the start: in IETester both IE7 and IE8 have a gap between the footer and the end of the viewport where as Opera puts the footer smack at the the end of the viewport. I couldnā€™t investigate it further because i was out for some time (sprained wrist and no pc ability lol). Do you have the same problem on your end?

Just for once i had the max-width element figured out quick and was about to enter the quizz when i noticed the IE problem ā€¦ :mad:

64

I have IEtesterā€¦which code segment are you referring to?

65

I canā€™t see a gap in the current code I posted but I vaguely remember when I originally constructed it that IE was out a little bit. I think it was just a margin somewhere I had forgotten about.

Youā€™ll have to post the code where you see this happening so we can check :slight_smile:

66

@Ryan: the footer doesnā€™t sit at the end: thereā€™s a few pixels left between the end of the footer and and the bottom of the viewport.
@Paul: i used the full code you posted on your solution.

67

Hmm, Iā€™m not seeing any gap with this code that I posted:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100&#37;;
    margin:0;
    padding:0;
}
#outer {
    width:910px;
    min-height:100%;
    border-left:5px solid #006f48;
    border-right:5px solid #006f48;
    background:#00ab6f;
    padding:0 10px;
    margin:auto;
    color:#fff;
}
h1, p {
    margin:0 0 2em;
    line-height:1.3;
}
* html #outer {
    height:100%
}
#fixedfoot {
    width:100%;
    height:60px;
    position:fixed;
    bottom:0;
    left:0;
    font-size:93%;
    color:#fff;
}
#fixedfoot p {
    width:100%;
    max-width:930px;
    min-width:300px;
    margin:0 auto;
    height:45px;
    padding:5px 10px 0;
    background:#20805e;
    border:5px solid #000;
}
a.back {
    float:right;
    background:#006f48;
    padding:5px;
    height:60px;
    border:2px solid silver;
    margin:-20px 20px 0 0;
}
p.last {
    padding-bottom:60px;
    margin:0;
}
#fixedfoot a {
    color:#fff
}
</style>
</head>
<body>
<div id="outer">
    <h1>Fixed footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">end</p>
</div>
<div id="fixedfoot">
    <p><a class="back" href="#">Back to top </a> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
</div>
</body>
</html>

Use that code and post me a screenshot so I can check.

68

Not for me (or Paul apparently)

69

@Paul and Ryan, sorry to not replied more quickly guys but hereā€™s a screenshot how it looks with the code Paul used in #45. As you will see thereā€™s a few pixels between the footer and the bottom viewport (marked in red with an arrow).

70

Hi Luki, thatā€™s part of the program (not the viewport). It took me a second to realize it though :). Look closely.

IEtabs (addon for FF) shows it correctly (as does IEtester, though with IEtabs you can see it clearerly) :slight_smile:

Change the border color to red, and increase the negative bottom margin to -24px (on the anchor a.back) until it only slightly shows.

You will see it then that it is just part of the program

71

Yes as Ryan said thatā€™s IEtesters chrome and not the viewport :slight_smile:

72

Aaaaarghhhhhh ā€¦ canā€™t believe i lost my uiz entrance over something silly like that :blush:

tnx guys

73

Someday Iā€™ll have time to solve these quizzes- but all I find time to do as of late is lurk a bit. Thanks for being here nonetheless- the quizzes are actually really cool. Itā€™s funny how most of them wouldnā€™t be here if IE didnā€™t exist. Think of the combined hours spent and hairloss trying to design/develop for IEā€™s quirkiness.

74

Dumb question from a lurker:

Do you guys ever post the answers somewhere?
Do I have to wait a certain amount of time until I can look at the answers?

How does this work?

75

That would be post #45 that youā€™re looking for.