Layout problem - different results in browsers

I'm gradually upgrading and improving a website. it was bodged together by a
marketing agency so you can imagine the starting point. Things are much
improved but I've got a couple of layput problems that need addressing with
the following page: http://new.eminox.com/home/index2.shtml

The first is that the image above the menu is a pixel or so too high when
viewed in Opera or FF2 - I assume this is something to do with IE's
alternative implementation of the box model, but I'm unsure as to what the
best solution is. I'm aware there are all sorts of 'hacks' to fix this type
of issue, but perhaps there are alternative ways of avoiding the problem.
What is the current concencus on solving this sort of issue?

The second (and arguably more import issue) is that of the footer on this
page. This page is a modification of the original which is designed to
demonstrated various design options to the customer. In FF the footer
appears at the bottom of the page which is fine. However in IE it appears
midway through the text, and in Opera it doesn't display at all. In the case
of this version of the page, it has for news items shown, ordinarily there
would be two - in which case the IIE behaviour would not be an issue - the
footer would appear in an appropriate place (i.e. immediately below the
text), but I'd rather the design was more flexible and able to readily cope
with changes to the content. I'm not bothered whether the footer appears
immediately below the content; or at the bottom of the page; ideally it
would be great if the footer would appear at the bottom of the screen, or at
the bottom of the page if the page was longer than a screen - I'm not even
sure if this is possible, but if not, simply haveing the footer appear at
the bottom of the text would be fine.

Can anyone shed any light on these two problems (particulrly the second)?
I'm slightly surprised that the footer works so well in FF but not in IE -
normally these kind of designers test everything on IE first (and possibly
last)

Thanks in advance

CJM

CJM wrote:

I've got a couple of layput problems that need addressing with
the following page: http://new.eminox.com/home/index2.shtml

What you are seeing are the evils of absolute positioning. Get rid of it
until you fully understand the implications of using it. Get rid of the
fixed height on text blocks while you're at it, in particular those
colored blocks at the top of the page. If you're not sure why, zoom text
up 50% or so in Firefox and see what happens.

Start over, maybe with a ready-made 2 column template. There are plenty
out there to choose from. See also
http://brainjar.com/css/positioning/

I suggest using some floats instead of absolute positioning, though
absolutely positioning the left column probably won't do too much harm.

--
Berg

CJM wrote:

I'm gradually upgrading and improving a website. it was bodged together by a
marketing agency so you can imagine the starting point. Things are much
improved but I've got a couple of layput problems that need addressing with
the following page: http://new.eminox.com/home/index2.shtml

Fix the validation errors first.

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnew.eminox.com%2F home%2Findex2.shtml>

The text in the News boxes is too small to read.
The News boxes do not adapt to the text size they contain. When the text
size is increased to a readable size, it overlays into whatever is below it.
Lots of pixel-perfect positioning. Given the layout I see no reason for
all the absolute positioning.

The second (and arguably more import issue) is that of the footer on this
page. This page is a modification of the original which is designed to
demonstrated various design options to the customer. In FF the footer
appears at the bottom of the page which is fine. However in IE it appears
midway through the text, and in Opera it doesn't display at all. [...]

What is the second page? The Company Profile? Anything besides the home

page?
The .bottombar class is absolutely positioned without any placement
properties specified, i.e., no top/left/right/bottom. Who knows where it
will be placed?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

For the record - here was my starting point: http://old.eminox.com/. This
was what the agency produced. So you'll agree we've come along way since
then!

As for validation, I'm working on it, bit by bit. We don't have the
resources to do a complete redesign anytime soon, so I'm doing what I can,
when I can. At some point, I hope to get rid of the ridiculous background
image and use a more liquid layout instead. There are plenty of other things
to get 'fix' like fixed font sizes, missing alt text... the list goes on.
But Rome wasn't built in a day.

In the meantime, I still have the same problems to tackle - the footer and
the top-left image. I need an interim solution for the footer, but more
importantly, I wanting to understand why the behaviour is different on this
page compared to any other.

Jim - The second page? There are plenty of other pages - see the menu.I'm
not sure what you are getting at.

Thanks in advance.

CJM wrote...

The second (and arguably more import issue) is that of the footer on this
page. This page is a modification of the original which is designed to
demonstrated various design options to the customer. In FF the footer
appears at the bottom of the page which is fine. However in IE it appears
midway through the text,

I am using Firefox2 here and the footer appears midway through the text.
--
Martin Clark

"Martin Clark" <martin (AT) spl (DOT) at> wrote

I am using Firefox2 here and the footer appears midway through the text.
--
Martin Clark

Curious... I'm using FF 2.0.0.5 @ 1280x1024 resolution.. and I've just
double-checked an it seems to be displaying fine.

CJM wrote:

Jim - The second page? There are plenty of other pages - see the menu.I'm
not sure what you are getting at.

My mistake. I read the "second issue" as the issue on the second page.

I also offered a possible solution to the footer problem. Did it work?

The validation errors are relatively minor. Why not just fix them?
The worst validation problem is the multiple use of the same CSS ID
selector. Change that to a class since it is used repeatedly. IDs are
supposed to be unique.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Beauregard T. Shagnasty wrote...

In comp.infosystems.www.authoring.html, CJM wrote:
"Martin Clark" <martin (AT) spl (DOT) at> wrote:
I am using Firefox2 here and the footer appears midway through the
text.

Curious... I'm using FF 2.0.0.5 @ 1280x1024 resolution..

Screen resolution is unimportant. Browser window size is important, to
some degree. Your page seems to be jammed to the left side of a large
browser window.

and I've just double-checked an it seems to be displaying fine.

I see the same as Martin, with Firefox 2.0.0.5
http://k75s.home.att.net/show/eminox.jpg

Not quite what I'm seeing - on mine (FF2.0.0.6) it really is midway

through the text...
http://www.tamevalley.freeserve.co.uk/images/eminox.jpg
--
Martin Clark