CSS - Test Your CSS Skills Number 34 - fix this

HTML & CSS
21

Same as this guy :confused:

22

Submitted my answer between meetings. I hope I got it right. :wink:

-Joe

23

I submitted an answer but it seems too simple. I must have missed somethingā€¦

24

Hi Mark,

That works in IE7 - well done :slight_smile:

It does need a little tweak in Firefox though to be perfect.:wink:

25

Joe (etherworld) - you have the fixed foooter working fine but the back to top link is no moving into position - yet :slight_smile: Good try but keep trying :slight_smile:

I have a correct entry form Kravvitz that is working as expected and using slightly different (although more complicated) methods than others. Good work :slight_smile:

26

You can change the footer html and css as much as you like

Does the back to top HTML have to stay inside the fixedfoot div?

27

You can change the footer html as much as you like and in any format you want. It can be separate elements if that works for you.

Just donā€™t bother changing any of the html above the footer as you donā€™t need to bother.

There are a couple of ways to do this and some may even involve not changing the html at all perhaps - or perhaps Iā€™m lying :slight_smile:

28

Iā€™ve made it work in other browsers now, Opera doesnā€™t re-position the footer when you drag the window though - a refresh moves the back to top link to where it should be?

Is there a way to force a repaint on resize in Opera?

29

There is Javascript to force repaint, although (I havenā€™t looked at the code) could one of the sticky footer fixes that we used fix it? (Sorry if that doesnā€™t make sense)

The fix I used <snip> and was quite easy to impliment. No refresh problems ocured (not that I tested in Opera extensively)

30

wasnā€™t the opera refresh fix something like

#element:after {
content:ā€œā€;
float:left;
width:0;
height:100%;
overflow:hidden;
}

although im thinking that this would be better:
#element:after {
content:ā€œā€;
position:absolute;
width:100%;
height:100%;
visibility:hidden;
}
but havenā€™t tested that.

31

Iā€™ve had a few more entries but they need a bit more work so keep trying :slight_smile:

Thanks Mark that works fine now :slight_smile: - Well done.

I didnā€™t notice anything strange in opera?

Which version and what do you have to do to get it to do wrong.

Opera always has had a problem with the 100% height aspect but I didnā€™t notice anything with the fixed footer in opera 10.5.

32

I came across the same type of bug in IE8 messing with this. IE wonā€™t keep the box at the bottom of the browser window (when dragged up/down) if itā€™s in a position relative container.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<div style="position:relative">
<div style="position:fixed; bottom:0; height:200px; width:200px; background:red;"></div>
</div>

</body>
</html>
33

Yes IE8 has problems with fixed containers when they are inside relative parents even though they should have no effect. There was a thread in the forums last year where we came across this issue.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100%
}
div {
    position:relative
}/* remove position relative from here and re-test */
div div {
    position:fixed;
    height:60%;
    overflow:auto;
    width:200px;
    border:1px solid #000;
}
p {
    margin:0 0 1em;
    padding:0 10px;
}
</style>
</head>
<body>
<div>
    <div>
        <p>This is a fixed element with a 60% height set to overflow:auto.</p>
        <p>It is inside a div that has position:relative set which seems to stop the 

vertical scrollbar from working properly in IE8 and also stops the element expanding when 

the window is resized higher unless refreshed.</p>
        <p>Remove the position:relative and it all works as it should.</p>
        <p>It's fine in IE7 and other browsers (except opera leaves the scrollbar track 

visible).</p>
        <p>content</p>
    </div>
</div>
</body>
</html>

The issue is that if you resize the viewport vertically the element does not expand and contract with the viewport as it should. Itā€™s set to 60% height and should keep track but doesnā€™t.

Remove the position:relative from the rule above and then re-test and everything is back to normal.

34

Hi Paul,
After a very busy week without any free time I finally found time to do the quiz today.

I think I may have found a fairly simple solution to the quiz, it renders the same in all my browsers.

My solution has been submitted. :slight_smile:

35

Bruno Fassino posted some interesting thoughts on that problem in IE8 and Opera: css-d (scroll to begin of thread)

Nice quiz series, btw!

36

Thanks Ingo and thanks for the link - it was an interesting read :slight_smile: Nice to see you around.

We ran into similar problems with IE8 and Opera in the Sticky footer quiz we ran a year ago and came up with [URL=ā€œhttp://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htmā€]similar answers which you may find of interest to that thread. (The methods used seem to be still working today and in most of the older versions of opera also.)

37

Thanks Ray - Yes you got it :slight_smile: Well done and thanks for the entry.

38

Submitted my answer, the ā€œback to topā€ box made me think.

39

Thanks xscott - that seems to work - well done and thanks for taking part :slight_smile:

Off Topic:

Note to all: I am away this week having a minor knee op so may not be able to reply quickly for the next few days

40

The first quiz in which the first idea that came to my mind worked.
This is suspicious :slight_smile: