«

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

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

> > 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?

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!

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

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

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).

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.

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

> ... 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?