473,378 Members | 1,544 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

Layout problem - different results in browsers

CJM
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
Aug 7 '07 #1
8 2130
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
Aug 7 '07 #2
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)
Aug 7 '07 #3
CJM
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.
Aug 8 '07 #4
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
Aug 8 '07 #5
CJM

"Martin Clark" <ma****@spl.atwrote in message
news:+r**************@getta.life...
>
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.
Aug 8 '07 #6
In comp.infosystems.www.authoring.html, CJM wrote:
"Martin Clark" <ma****@spl.atwrote:
>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

Why do you have that little "printer" icon on the page? Wouldn't it be
simpler just to use a print style sheet?

--
-bts
-Motorcycles defy gravity; cars just suck
Aug 8 '07 #7
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)
Aug 8 '07 #8
Beauregard T. Shagnasty wrote...
>In comp.infosystems.www.authoring.html, CJM wrote:
>"Martin Clark" <ma****@spl.atwrote:
>>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
Aug 9 '07 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

39
by: Zak McGregor | last post by:
Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak
47
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
19
by: Michael Schuerig | last post by:
In my experience most available books and web publication on CSS are related to web page/site design. Little attention is payed to the design and construction of web-based application for data...
4
by: NWx | last post by:
Hi, I develop an ASP.NET app which should be used from Internet, so I don't have control over what browsers will be used. I don't want to target every possible users, so I don't really mind is...
6
by: Don Collins | last post by:
Can anyone point me to a white paper discussing the advantages / disadvantages to using “grid layout” vs. “flow layout” on webforms? I’m looking to address performance issues in particular.
3
by: Samuel Shulman | last post by:
I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman
16
by: Jef Driesen | last post by:
I have created a nice idea for a website and now I would like to translate that idea in (x)html and css. The layout is quite basic: a header, two columns and a footer. For a graphical presentation,...
8
by: sethp | last post by:
I have a question about table layout in IE. I have a table with two columns. The left column has two rows and the right column has 1 row that has a column span of 2. In the left column I have...
26
by: mark | last post by:
The idea of this is very simle. The site is 800px wide and sits in the middle of the browser window, on either side of the site I want a different background image aligned against it. If I were...
3
by: Andy B | last post by:
I am creating a CSS layout and need to test it with different browsers. I have the framework for the layout done with contrasting colors for each section. Can anybody if possible, go to...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.