Footer driving me mad

M

Marc

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
 
P

P@tty Ayers

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).
Click to expand...

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

Marc

I can't get this footer to work in IE or Mozilla. I have two
stylesheets -

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.
Click to expand...

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

Jacqui or (maybe) Pete

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
Click to expand...
....
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!
 
M

Marc

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!
Click to expand...

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
 
M

Marc

I'd probably take out all the absolute positioning, float the menu left,
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.
Click to expand...

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

Jacqui or (maybe) Pete

Add 'clear:both' to the footer css?
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.
Click to expand...

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

Jacqui or (maybe) Pete

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?
Click to expand...
IE6+ is just shorthand for 'Internet Explorer 6.0 or better' and IE5.5-
for 'Internet Explorer 5.5 or worse'.
 
M

Marc

... http://portsmouth.anglican.org/readers/home/index.php
IE6+ is just shorthand for 'Internet Explorer 6.0 or better' and IE5.5-
for 'Internet Explorer 5.5 or worse'.
Click to expand...

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
 
M

Marc

OK, someone put me out of my misery please and solve my CSS footer
I just had a look, my resolution is 1280 x 1024, and it still scrolls to the
right!!
Click to expand...

Thanks, Pete. I've fixed this now.
 
J

Jacqui or (maybe) Pete

You still shouldn't resize them in html.
Ha Ha. I know that. I meant how do I distinguish between users with IE6+
and users with IE5.5- ?
Click to expand...

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?
Click to expand...

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

Headless

Jacqui or (maybe) Pete said:
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
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
IE it's driving me crazy, I need some help 2
code driving me crazy, any assistance? 3
Is There A Better Way 7
IE vs. Firefox color issues? First Site 2
What's with it anyway? Div inside a div 4
What is causing the overlap? 1
IE is frolocking with my #content 6

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 452

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top