Footer driving me mad

Discussion in 'HTML' started by Marc, Jul 8, 2003.

  1. Marc

    Marc Guest

    OK, someone put me out of my misery please and solve my CSS footer
    nightmare.

    I can't get this footer to work in IE or Mozilla. I have two stylesheets -
    one for IE, one for everything else (namely stylesie.css for IE and
    stylessc.css for more Standard Compliant browsers).

    Here's the page: http://portsmouth.anglican.org/readers/home/index.php

    And the footer is just:
    <div id="footer">&copy; Portsmouth Readers' Board 2003</div>

    Thanks in Advance!

    Marc
    Marc, Jul 8, 2003
    #1
    1. Advertising

  2. Marc

    P@tty Ayers Guest

    > I can't get this footer to work in IE or Mozilla. I have two
    stylesheets -
    > one for IE, one for everything else (namely stylesie.css for IE and
    > stylessc.css for more Standard Compliant browsers).


    Marc - I'm not sure I understand why you have your style sheets set up that
    way. The point of using two style sheets, one linked by the @import
    directive, is to hide some styles from Netscape 4.xx, because it doesn't
    understand the @import directive.

    So what is usually done is that one style sheet is linked with a normal
    <link> - that style sheet has rules which all browsers will read, ancient
    and modern. Then another sheet is linked @import, and that one has rules
    which work well with all modern browsers, but need to be hidden from NN4.xx.

    All recent versions of IE, and all other recent browsers, will read both of
    your style sheets, so as far as I know, there's no point in having two of
    them.

    I didn't look further at why the footer wasn't working, because I figured it
    made sense to address this first.

    --
    P@tty Ayers
    http://www.WebDevBiz.com
    Web Design Contract, Estimate Worksheet
    --
    P@tty Ayers, Jul 8, 2003
    #2
    1. Advertising

  3. Marc

    Marc Guest

    > > I can't get this footer to work in IE or Mozilla. I have two
    > stylesheets -
    > > one for IE, one for everything else (namely stylesie.css for IE and
    > > stylessc.css for more Standard Compliant browsers).

    >
    > Marc - I'm not sure I understand why you have your style sheets set up

    that
    > way. The point of using two style sheets, one linked by the @import
    > directive, is to hide some styles from Netscape 4.xx, because it doesn't
    > understand the @import directive.


    Point taken. In actual fact, the same stylesheet is referred to with both
    methods - which stylesheet to use is decided by PHP before it gets to the
    HTML stage.

    I've removed the @import directive as I suppose it's a bit pointless.
    Thanks.

    Any idea as to the footer problem?
    Marc, Jul 8, 2003
    #3
  4. In article <beej1h$48r5a$>,
    says...
    > OK, someone put me out of my misery please and solve my CSS footer
    > nightmare.
    >
    > I can't get this footer to work in IE or Mozilla. I have two stylesheets -
    > one for IE, one for everything else (namely stylesie.css for IE and
    > stylessc.css for more Standard Compliant browsers).
    >
    > Here's the page: http://portsmouth.anglican.org/readers/home/index.php
    >

    ....
    I've only had a quick look, but as far as I can see you've got
    everything absolutely positioned. That's a problem, because absolutely
    positioned elements are ignored for the purposes of laying out other
    things - for instance they don't give a containing element any height.

    So positioning the footer absolutely at the bottom of the body is a bit
    undefined - because the body's height is probably just the height of the
    viewport.

    I'd probably take out all the absolute positioning, float the menu left,
    but an item after it with 'clear:both' and give the main contents a left
    margin >= the width of the menu.

    You can absolutely position the header & pics at the top & just use
    margins to make the main body avoid them.

    Your html is nice and clean, so it shouldn't be too hard. Post back if
    you get stuck!
    Jacqui or (maybe) Pete, Jul 8, 2003
    #4
  5. Marc

    Marc Guest

    > > Here's the page: http://portsmouth.anglican.org/readers/home/index.php

    > I'd probably take out all the absolute positioning, float the menu left,
    > but an item after it with 'clear:both' and give the main contents a left
    > margin >= the width of the menu.
    >
    > You can absolutely position the header & pics at the top & just use
    > margins to make the main body avoid them.
    >
    > Your html is nice and clean, so it shouldn't be too hard. Post back if
    > you get stuck!


    OK, I implemented these ideas, and played around a bit, and the footer is
    nearly working but I still have the following problems:

    On large screen resolutions, the footer tended to go up behind the news
    section, so I added the following CSS to the footer:

    margin-top: 20px;
    margin-bottom: 5px;

    And although this solved the problem in IE (even though the second statement
    didn't work on lower resolutions), it did nothing in mozilla, and so this is
    still a problem - remember I have a separate stylesheet for IE, so I can
    implement completely separate CSS if needs be.

    In IE, the 'Designed by' note at the top causes a horizontal scroll bar, and
    I can't figure why.

    In Mozilla, both the 'Designed by' note and the footer cause a horizontal
    scroll bar, and I can't figure why that is either.

    There is also a problem with the content images not staying in the content
    <div> on large resolutions, but as they are currently only positioned using
    <img align="left"> or <img align"right">, I'm not too fussed about that -
    I'll implement some CSS using float.

    Any help with the rest would be much appreciated.

    Marc
    Marc, Jul 9, 2003
    #5
  6. Marc

    Marc Guest

    > > I'd probably take out all the absolute positioning, float the menu left,
    > > but an item after it with 'clear:both' and give the main contents a left
    > > margin >= the width of the menu.
    > >
    > > You can absolutely position the header & pics at the top & just use
    > > margins to make the main body avoid them.
    > >
    > > Your html is nice and clean, so it shouldn't be too hard. Post back if
    > > you get stuck!

    >
    > OK, I implemented these ideas, and played around a bit, and the footer is
    > nearly working but I still have the following problems:
    >
    > On large screen resolutions, the footer tended to go up behind the news
    > section, so I added the following CSS to the footer:
    >
    > margin-top: 20px;
    > margin-bottom: 5px;
    >
    > And although this solved the problem in IE (even though the second

    statement
    > didn't work on lower resolutions), it did nothing in mozilla, and so this

    is
    > still a problem - remember I have a separate stylesheet for IE, so I can
    > implement completely separate CSS if needs be.
    >
    > In IE, the 'Designed by' note at the top causes a horizontal scroll bar,

    and
    > I can't figure why.
    >
    > In Mozilla, both the 'Designed by' note and the footer cause a horizontal
    > scroll bar, and I can't figure why that is either.


    OK, I figured that these problems are becuase I have width: 100%; for both
    the div with the 'Designed by' note, and for the footer. I can reduce these
    percentage wise, or I could put a pixel measurement, but neither of these
    woudl ensure they stretch to meet the edges.

    Any ideas?

    > There is also a problem with the content images not staying in the content
    > <div> on large resolutions, but as they are currently only positioned

    using
    > <img align="left"> or <img align"right">, I'm not too fussed about that -
    > I'll implement some CSS using float.
    >
    > Any help with the rest would be much appreciated.
    >
    > Marc
    Marc, Jul 9, 2003
    #6
  7. In article <beh6of$4oc1j$>,
    says...
    > > > I'd probably take out all the absolute positioning, float the menu left,
    > > > but an item after it with 'clear:both' and give the main contents a left
    > > > margin >= the width of the menu.
    > > >

    ....
    > >
    > > OK, I implemented these ideas, and played around a bit, and the footer is
    > > nearly working but I still have the following problems:
    > >
    > > On large screen resolutions, the footer tended to go up behind the news


    Add 'clear:both' to the footer css?

    > > In IE, the 'Designed by' note at the top causes a horizontal scroll bar,

    > and
    > > I can't figure why.
    > >
    > > In Mozilla, both the 'Designed by' note and the footer cause a horizontal
    > > scroll bar, and I can't figure why that is either.

    >
    > OK, I figured that these problems are becuase I have width: 100%; for both
    > the div with the 'Designed by' note, and for the footer. I can reduce these
    > percentage wise, or I could put a pixel measurement, but neither of these
    > woudl ensure they stretch to meet the edges.


    Take out the width! In IE6.0+ width refers to the content width, so
    total-width = width + borders + padding + margin. The default for a div
    is to stretch to fill the available width, so just don't specify it.

    IE5.5- takes 'width' to mean the total width - so that's the main change
    you'll need in your css for old browsers.

    > > There is also a problem with the content images not staying in the content
    > > <div> on large resolutions, but as they are currently only positioned

    > using
    > > <img align="left"> or <img align"right">, I'm not too fussed about that -
    > > I'll implement some CSS using float.
    > >

    Yep. You may run into problems with IE6 when floating images within a
    floating div.

    You can take out the 'best viewed' thing - it now looks fine at all
    resolutions & text sizes.

    I might do it something like this:

    http://porjes.com/prb/

    (a fairly quick job, just to give you some alternative ideas).
    Jacqui or (maybe) Pete, Jul 10, 2003
    #7
  8. In article <>,
    says...
    > In article <beh6of$4oc1j$>,
    > says...

    .... http://portsmouth.anglican.org/readers/home/index.php

    Oh, and use an image editor to make the images smaller - don't specify a
    size in the html that's different to the real size. That'll speed up
    the load time no end.
    Jacqui or (maybe) Pete, Jul 10, 2003
    #8
  9. Marc

    Pete Guest

    I just had a look, my resolution is 1280 x 1024, and it still scrolls to the
    right!!


    "Marc" <> wrote in message
    news:beej1h$48r5a$...
    > OK, someone put me out of my misery please and solve my CSS footer
    > nightmare.
    >
    > I can't get this footer to work in IE or Mozilla. I have two

    stylesheets -
    > one for IE, one for everything else (namely stylesie.css for IE and
    > stylessc.css for more Standard Compliant browsers).
    >
    > Here's the page: http://portsmouth.anglican.org/readers/home/index.php
    >
    > And the footer is just:
    > <div id="footer">&copy; Portsmouth Readers' Board 2003</div>
    >
    > Thanks in Advance!
    >
    > Marc
    >
    >
    Pete, Jul 13, 2003
    #9
  10. Marc

    Marc Guest

    > ... http://portsmouth.anglican.org/readers/home/index.php
    >
    > Oh, and use an image editor to make the images smaller - don't specify a
    > size in the html that's different to the real size. That'll speed up
    > the load time no end.


    Those aren't our images - that was just a test article from the client.

    How do I distinguish between IE 6+ and -IE 5.5?
    Marc, Jul 14, 2003
    #10
  11. In article <betpi9$86o9i$-berlin.de>,
    says...
    > > ... http://portsmouth.anglican.org/readers/home/index.php
    > >
    > > Oh, and use an image editor to make the images smaller - don't specify a
    > > size in the html that's different to the real size. That'll speed up
    > > the load time no end.

    >
    > Those aren't our images - that was just a test article from the client.
    >
    > How do I distinguish between IE 6+ and -IE 5.5?
    >

    IE6+ is just shorthand for 'Internet Explorer 6.0 or better' and IE5.5-
    for 'Internet Explorer 5.5 or worse'.
    Jacqui or (maybe) Pete, Jul 14, 2003
    #11
  12. Marc

    Marc Guest

    > > > ... http://portsmouth.anglican.org/readers/home/index.php
    > > >
    > > > Oh, and use an image editor to make the images smaller - don't specify

    a
    > > > size in the html that's different to the real size. That'll speed up
    > > > the load time no end.

    > >
    > > Those aren't our images - that was just a test article from the client.
    > >
    > > How do I distinguish between IE 6+ and -IE 5.5?
    > >

    > IE6+ is just shorthand for 'Internet Explorer 6.0 or better' and IE5.5-
    > for 'Internet Explorer 5.5 or worse'.


    Ha Ha. I know that. I meant how do I distinguish between users with IE6+
    and users with IE5.5- ?

    I managed to fix the width problems, had to re-do the header CSS, but you
    were right, the 100% width was the problem, though IE gave me funny results
    to do with the top padding when I removed the footer 100% width, so it's
    still in there, and seems to be working ok.

    The only issues AFAICS is backwards IE compatability, (we *must* support
    versions 5.5 and 6, but I'd like to get it working on 5+ if possible), and
    the footer in mozilla still hiding under the news div (#chalice). I did try
    putting the news div into the menu div, and changing the CSS a bit, but
    couldn't get anything to work. IE is fine, just with mozilla - I suppose
    this is due to the Mozilla margin-top bug I have heard about?

    Also, other than downgrading IE, how am I supposed to test 5 and 5.5 ? Can
    I have more than one version installed?

    Any help would be appreciated.

    Thanks,
    Marc
    Marc, Jul 14, 2003
    #12
  13. Marc

    Marc Guest

    > > OK, someone put me out of my misery please and solve my CSS footer
    > > nightmare.
    > >
    > > I can't get this footer to work in IE or Mozilla. I have two

    > stylesheets -
    > > one for IE, one for everything else (namely stylesie.css for IE and
    > > stylessc.css for more Standard Compliant browsers).
    > >
    > > Here's the page: http://portsmouth.anglican.org/readers/home/index.php
    > >
    > > And the footer is just:
    > > <div id="footer">&copy; Portsmouth Readers' Board 2003</div>


    > I just had a look, my resolution is 1280 x 1024, and it still scrolls to

    the
    > right!!


    Thanks, Pete. I've fixed this now.
    Marc, Jul 14, 2003
    #13
  14. In article <betv2h$8pj8h$-berlin.de>,
    says...
    > > > > ... http://portsmouth.anglican.org/readers/home/index.php
    > > > >
    > > > > Oh, and use an image editor to make the images smaller - don't specify

    > a
    > > > > size in the html that's different to the real size. That'll speed up
    > > > > the load time no end.
    > > >
    > > > Those aren't our images - that was just a test article from the client.


    You still shouldn't resize them in html.

    > > > How do I distinguish between IE 6+ and -IE 5.5?
    > > >

    > > IE6+ is just shorthand for 'Internet Explorer 6.0 or better' and IE5.5-
    > > for 'Internet Explorer 5.5 or worse'.

    >
    > Ha Ha. I know that. I meant how do I distinguish between users with IE6+
    > and users with IE5.5- ?


    Sorry, various ways, this one is pretty easy:

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

    > I managed to fix the width problems, had to re-do the header CSS, but you
    > were right, the 100% width was the problem, though IE gave me funny results
    > to do with the top padding when I removed the footer 100% width, so it's
    > still in there, and seems to be working ok.
    >
    > The only issues AFAICS is backwards IE compatability, (we *must* support
    > versions 5.5 and 6, but I'd like to get it working on 5+ if possible), and
    > the footer in mozilla still hiding under the news div (#chalice). I did try
    > putting the news div into the menu div, and changing the CSS a bit, but
    > couldn't get anything to work. IE is fine, just with mozilla - I suppose
    > this is due to the Mozilla margin-top bug I have heard about?
    >
    > Also, other than downgrading IE, how am I supposed to test 5 and 5.5 ? Can
    > I have more than one version installed?


    It's not easy to install multiple versions, although you can use multi-
    boot methods. The 'old laptop' method is the most common, I think.

    Or there's a website that will do snapshots for you - I forget the URL,
    you can google for it or wait for someone to post it here...
    Jacqui or (maybe) Pete, Jul 14, 2003
    #14
  15. Jacqui or (maybe) Pete, Jul 14, 2003
    #15
  16. Marc

    Marc Guest

    Marc, Jul 15, 2003
    #16
  17. Marc

    Marc Guest

    > >> Looks OK to me (Moz 1.5b) - what's the problem?
    >
    > > Did you mean 1.4 ?
    > >
    > > I looked at mozilla.org, and even at
    > > http://ftp.mozilla.org/pub/mozilla/releases/ and all I could find was up
    > > to 1.4... :-s

    >
    > 1.4 is the latest _stable_ release. Mozilla has released both alpha and

    beta
    > versions of 1.5.
    >
    > http://ftp.mozilla.org/pub/mozilla/nightly/latest/


    Yeah, I thought this was the case, just couldn't find them. Thanks.

    Presumably mozilla-win32-installer-sea.exe is the latest *full* version?

    Marc
    Marc, Jul 15, 2003
    #17
  18. Marc

    Headless Guest

    Mozilla (was: Re: Footer driving me mad)

    Jacqui or (maybe) Pete <> wrote:

    >Personally, I'm just waiting for a version that includes the javascript
    >debugger and DOM inspector but doesn't have bloody composer. It's a
    >shame they've given up on CSS standards compliance, though:
    >http://bugzilla.mozilla.org/show_bug.cgi?id=3247


    It's also a pity that they can't be arsed to implement CSS2
    inline-tables and run-in headers (and they have no plans to do so in the
    near future). They seem to be more interested in adding bits of CSS3
    (prone to change) with a proprietary -moz prefix. I'd wish they'd
    implement something much more useful like CSS 2.1 inline-blocks (a nasty
    omission in CSS2 imo).

    I've stopped downloading new versions of Mozilla hoping for bug fixes
    and enhancements to Gecko, rarely did I find any. The development seems
    to be focused on other things like moving towards the Phoenix/Firebird
    code base (which is as much of a resource pig on my pc as Moz is).


    Headless
    Headless, Jul 15, 2003
    #18
  19. Marc

    Marc Guest

    > > > > > > > ... http://portsmouth.anglican.org/readers/home/index.php
    > > > > > > >

    > > Thanks, any ideas about the mozilla footer issue?
    > >

    > Looks OK to me (Moz 1.5b) - what's the problem?


    OK, I downloaded 1.5b and the problem is still there.

    If you put your screen resolution to 1280 by 768 you'll see that the footer
    goes 'under' the news div.

    Any suggestions? Really I need to ensure it stays *below* the news div.
    Marc, Jul 15, 2003
    #19
  20. Marc

    Marc Guest

    > > > > > > > > > ... http://portsmouth.anglican.org/readers/home/index.php
    > > > > > > > > >
    > > > > Thanks, any ideas about the mozilla footer issue?
    > > > >
    > > > Looks OK to me (Moz 1.5b) - what's the problem?

    > >
    > > OK, I downloaded 1.5b and the problem is still there.
    > >
    > > If you put your screen resolution to 1280 by 768 you'll see that the

    footer
    > > goes 'under' the news div.
    > >
    > > Any suggestions? Really I need to ensure it stays *below* the news div.
    > >

    > Weird - I don't see that effect. 1024x768/15" plasma/XP/Moz1.5b/20030713


    That's because at 1024x768 the content pushes the footer down. Change your
    Text zoom to 75% and you'll see what I mean.
    Marc, Jul 15, 2003
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul King

    ASP_WP driving me mad...

    Paul King, Sep 24, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    479
    Paul King
    Sep 24, 2004
  2. Alan Silver
    Replies:
    9
    Views:
    4,397
    Alan Silver
    Dec 6, 2005
  3. DaLoverhino

    J2EE is driving me mad.

    DaLoverhino, Jun 26, 2006, in forum: Java
    Replies:
    2
    Views:
    276
  4. Grey Knight

    An error which is driving me slowly mad

    Grey Knight, Oct 14, 2004, in forum: C Programming
    Replies:
    2
    Views:
    303
    Rouben Rostamian
    Oct 14, 2004
  5. Allan Wenham
    Replies:
    3
    Views:
    195
    Allan Wenham
    Oct 27, 2004
Loading...

Share This Page