Click here to get back home

Layout problem - different results in browsers
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Layout problem - different results in browsers CJM 08-07-2007
Posted by CJM on August 7, 2007, 12:07 pm
Please log in for more thread options

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



Posted by Bergamot on August 7, 2007, 3:32 pm
Please log in for more thread options

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

Posted by Jim Moe on August 7, 2007, 3:41 pm
Please log in for more thread options


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%2Fhome%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)

Posted by CJM on August 8, 2007, 5:05 am
Please log in for more thread options


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.



Posted by Jim Moe on August 8, 2007, 2:00 pm
Please log in for more thread options


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)

Similar ThreadsPosted
Inconsistent results across browsers June 1, 2007, 3:29 pm
Layout/spacing problem May 12, 2007, 3:50 pm
Form layout problem December 26, 2007, 6:49 pm
Table layout problem in Firefox/IE6 June 14, 2005, 8:42 am
August 14, 2004, 10:42 pm
CSS and Submit Button problem (across browsers) February 6, 2006, 2:20 am
POSTing form/showing results within div March 13, 2008, 7:34 am
Empty SGML parser results in w3 validator November 20, 2004, 1:42 am
New webhosting service. Same search engine results? December 20, 2004, 10:32 pm
W3C XHTML Media type test results August 29, 2005, 9:29 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap