Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Why the difference: FF vs. IE

    Hi Gary

    I feel you are stuck between a rock and a hard place here as FF does not like the heights defined as percentages and prefers min-height and even then it is a bit flaky.

    I have tried a few hacks with this and reckon you may want to use it in a slightly different way. I fixed the footer to the "bottom of the page" using the absolute syntax

    .footer
    {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: xx-small;
    FLOAT: right;
    PADDING-BOTTOM: 0px;
    MARGIN-left: 10%;
    WIDTH: 90%;
    COLOR: black;
    TEXT-INDENT: 0px;
    PADDING-TOP: 0px;
    FONT-FAMILY: Verdana, Tahoma;
    position: absolute;
    bottom: 0;
    height: 9%;
    BACKGROUND-COLOR: yellow;
    TEXT-ALIGN: center
    }

    The other trick is to use this:

    html, body {
    height: 100%;
    }
    #container {
    position: relative;
    min-height: 100%;
    }

    where #container is a container div that surrounds everything between the body. Not an answer to your problem but a method to fix. Firefox is well known for this problem. Other ideas would include javascript to adjust the css view but..... <img src=/S/barf.gif border=0 alt=barf width=64 height=23> I hate that kid of fix.
    Jerry

  2. #2
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Why the difference: FF vs. IE

    In addition

    I seem to have solved this using a slightly different method. The attached file expalins my thinking better but it basiccaly uses the !important attribute to tell FF what it has to do as it seems to be reading the CSS in a different way to IE...it is quite a useful CSS hack to know.

    BTW You have done nothing wrong in your code at all <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  3. #3
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Why the difference: FF vs. IE

    Hi Jerry and thanks a bunch,
    I'm just now trying to walk away and get maybe a little sleep tonight....... <img src=/S/nosleep.gif border=0 alt=nosleep width=27 height=15>.......... <img src=/S/yawn.gif border=0 alt=yawn width=15 height=15>
    Thanks for the workarounds.....I'll give them more of a go tomorrow and see if what is happening is not just me playing with my mental blocks. <img src=/S/hmmn.gif border=0 alt=hmmn width=15 height=15> my guess .......... <img src=/S/yep.gif border=0 alt=yep width=15 height=15>
    Thanks again
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  4. #4
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Why the difference: FF vs. IE

    Adding this at the top seems to fix it:

    html {height:100%}

    Personally I think it should be sufficient to set the body element's height to 100%, but apparently the designers of Firefox disagree.

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Why the difference: FF vs. IE

    Gary

    I went off to tweak this but it appears Jefferson has confirmed it. I went back to my original post to you and decided just to use your sets of code this time.

    All I added was:

    html, body {
    height: 100%;
    }

    to your test.css and it works fine. I may have changed some of the values of the heights ( I honestly can't remember so you will have to check yourself)


    Just a very small point about the a tags and the pseudo classes make sure you put them in the order Link, Visited, Hover, Active in the CSS file best rememebred as LoVeHAte, this will ensure they work correctly when viewed....A Jezza top tip and one we all fall into.

    Your files attached
    Jerry

  6. #6
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Why the difference: FF vs. IE

    Hi Jefferson,
    Thanks. Check out the link now and that was the only thing changed from what didn't and did work.
    Man, it's tough enough getting what isn't idiosyncratic to work, let alone what is. <img src=/S/dizzy.gif border=0 alt=dizzy width=15 height=15>
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  7. #7
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Why the difference: FF vs. IE

    Hi Jerry,
    Thanks for your help with this. I'd still be <img src=/S/brickwall.gif border=0 alt=brickwall width=25 height=15> without it.
    This is my first <big>BIG</big> web project, I've done some small, static, intranet type thingy's and dang if it isn't a lot of work doing this.......the hardest part, I think, is that the form only gets to load once.......that's it. Another variation on Xeno's paradox, eh?
    Thanks again.
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  8. #8
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Why the difference: FF vs. IE

    Sorry if I seem to be fussing around you like a mother bear, but I was playing around with your model ( I have borrowed the code BTW as it is a good template <img src=/S/grin.gif border=0 alt=grin width=15 height=15>)

    There is a problem in the way it is laid out as there maybe a problem when somebody reduces the width of the visible window which causes the header div to shoot downwards in IE. You can get around this in FF by using min-width but IE does not recognise this so you have to do a clever work around which I have included here as it is relevant and could be used as a reference for other loungers

    MIN-WIDTH FOR INTERNET EXPLORER


    <img src=/S/cheers.gif border=0 alt=cheers width=30 height=16>
    Jerry

  9. #9
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Why the difference: FF vs. IE

    Hmmmm, there is a strange consistency to this if you think of the <form> tag as just another rectangle.

    Change the first line of your style sheet from

    BODY

    to

    BODY, FORM

    (or the lower case forms of those words)

    and the <form> element should no longer collapse to fit its contents tightly, and therefore the "100%" measurements in your <div> elements should have their intended effect.

  10. #10
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Why the difference: FF vs. IE

    Well at least your wife is talking to you <img src=/S/sad.gif border=0 alt=sad width=15 height=15>

    I shall have a look for you sir... may not be immediate but very very soon
    Jerry

  11. #11
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Why the difference: FF vs. IE

    Thanks Jerry,
    It'll be a couple of hours before I'm back <img src=/S/compute.gif border=0 alt=compute width=40 height=20> , if I can't get a reasonable handle on this it just may be <img src=/S/hushmouth.gif border=0 alt=hushmouth width=16 height=16> at home as well.
    I hope the "lack of communication" will be over soon. <img src=/S/crossfingers.gif border=0 alt=crossfingers width=17 height=16>
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  12. #12
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Why the difference: FF vs. IE

    Isn't it the exact same problem as the last time?

    div.minwidth, div.container
    {
    height:100%;
    }

    You added two containers that naturally collapse to fit their contents. Thus, anything inside that uses a % dimension will be taking a percentage of the actual content size, and not the desired full height content size.

  13. #13
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Why the difference: FF vs. IE

    I'm asking questions because I don't know....is it the same problem or not? So if it is, how do I get both sides of this problem to work.
    In my ignorance I see that I can
    a) either have it so the div's do not collapse or.....
    [img]/forums/images/smilies/cool.gif[/img] I can have it so portions of my page don't scream down into the nether regions of the web page or.....
    c) I don't know if I do have a c)

    Thanks Jefferson.
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  14. #14
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Why the difference: FF vs. IE

    Gary

    I have been playing with this and , yes, I can see your problem...it is the squishy mattress problem I have have mentioned before in other posts...you push one side and the other side bulges.

    I have a Jezza cunning plan which I am tinkering with. I think we need a redesign of the model... we don't need to introduce CSS hacks so early on as I think we are too focused on FF and IE conflict. I will contact you soon....
    Jerry

  15. #15
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Why the difference: FF vs. IE

    The snippet above will fix (a), but I don't really understand what ([img]/forums/images/smilies/cool.gif[/img] means. There is a lot of flickering if I resize using the mouse to drag the edge of the window in IE6. I guess the browser is doing a lot of higher math to redraw the bits and pieces. In the original design (http://sitonabeach.com/TestCSS.htm), at some sizes, the body shifts down in an odd way.

    I don't understand the 500px/-500px left margin thing in the more recent version, so if that behaves oddly, well...

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •