Viewing problems with Absolute Positioning

[murali]

Hello everyone,

I used absolute positioning with div tag in my website. The page looks
cool as long as someone doesn't try to zoom in by increasing the text
size (ctrl++ or thru changing font size in browser settings). When
someone does that, the layers seem to overlap and the layer with a
greater z value pops in front and the other layers are pushed back.

The most obvious solution will be to prevent the user from increasing
the text size. But how to do that ?? any help will be greatly
appreciated.

Thanks,
Murali.

[murali]

Hi,

The joy of pixel widths. Try using "em" units more often.
I dont follow what do you mean by this

You can't (except in broken browsers), and trying is a very bad idea. People
usually increase their font size becuase they can't read the text at the
size it was at before!

But how to get around this problem. Only thing I can think about is
making the text as images so that their size cannot be changed (I know
this idea sucks).
I appreciate the sagacity of the browser designers, but is it not
unfair when someone who wants a better view of the page, zooms in on
the page only to see the page go haywire.

Is there any other better method to keep this dirty thing at bay.

Any Help will greatly be appreciated,
Thanks,
Murali.

[David Dorward]

murali wrote:

The joy of pixel widths. Try using "em" units more often.

I dont follow what do you mean by this

CSS requires that all lengths include a unit. Many authors use pixels,
becuase that is what they are used to. There are several other options,
including em units - which are relative to the font size.

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

[kchayka]

murali wrote:

But how to get around this problem. Only thing I can think about is
making the text as images so that their size cannot be changed (I know
this idea sucks).

Yes, this idea sucks pretty badly. A much better solution would be to
fix the design so it wasn't dependent on a particular font size. Using
em or % units for absolute positioning, or using relative positioning
instead, could be solutions to your problem. It's hard to be very
specific without a URL.

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

[Alan J. Flavell]

On Sun, Jul 13, murali inscribed on the eternal scroll:

[quoting David Dorward , but without attribution!]

The joy of pixel widths. Try using "em" units more often.
I dont follow what do you mean by this

Well, the css.nu FAQs haven't been extensively updated recently, but
they still have plenty of good sense in them[1].

http://css.nu/faq/ciwas-aFAQ.html#QA01 and onwards.

You can't (except in broken browsers), and trying is a very bad idea. People
usually increase their font size becuase they can't read the text at the
size it was at before!

But how to get around this problem.

There isn't a problem - at least, not the one you think you've
identified.
Only thing I can think about is
making the text as images so that their size cannot be changed (I know
this idea sucks).
Please read the posting that you are following-up to, but *for
meaning* this time. "trying is a very bad idea", was what the chap
said, and rightly so too.
I appreciate the sagacity of the browser designers, but is it not
unfair when someone who wants a better view of the page, zooms in on
the page only to see the page go haywire.
So, learn to design flexibly.
Is there any other better method to keep this dirty thing at bay.

You haven't worked out yet what most of the regulars around here
reckon to be the "dirty thing". I'd recommend some quiet reading to
get yourself up to speed with the group.

good luck

[1] I have to admit that a few of the sentences in there were
originally written my me, in fact.

[Alan J. Flavell]

On Sun, Jul 13, kchayka inscribed on the eternal scroll:

Yes, this idea sucks pretty badly. A much better solution would be to
fix the design

....or indeed to un-fix the design (depending on which meaning of the
word 'fix' you had in mind) - SCNR.

[kchayka]

Alan J. Flavell wrote:

On Sun, Jul 13, kchayka inscribed on the eternal scroll:

Yes, this idea sucks pretty badly. A much better solution would be to
fix the design

...or indeed to un-fix the design (depending on which meaning of the
word 'fix' you had in mind) - SCNR.

LOL, yes perhaps a poor word choice. Just to avoid any possible confusion:

fix: to repair, correct, mend, revise, etc., etc., etc.

:)

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

[Nick Kew]

In article <6a************ **************@ posting.google. com>, one of infinite monkeys
at the keyboard of mu***********@y ahoo.com (murali) wrote:

I appreciate the sagacity of the browser designers, but is it not
unfair when someone who wants a better view of the page, zooms in on
the page only to see the page go haywire.

If the page goes haywire with different settings, your design is
*badly* broken.

--
Nick Kew

In urgent need of paying work - see http://www.webthing.com/~nick/cv.html

[murali]

"Daniel R. Tobias" <da*@tobias.nam e> wrote in message news:<pM******* *******@news2.n ews.adelphia.ne t>...

To me, though, the most obvious solution would be to rethink your
original idea of trying to absolutely position everything, and make your
design more flexible instead of trying to figure out ways to make it
even *less* flexible.

Thanks for the suggestions.

The URL is http://www.eng.uab.edu/me/etlab/cluster.htm

I wanted to place the headings as images, so I did so by placing them
in seperate layers. try zooming in on the page and see how it affects
the page.

The gurus in this thread asked me to rethink about design, but can
anyone lemme know what kind of design factors you take into
consideration before you design a page with layers.

[kchayka]

murali wrote:

The URL is http://www.eng.uab.edu/me/etlab/cluster.htm

I wanted to place the headings as images, so I did so by placing them
in seperate layers. try zooming in on the page and see how it affects
the page.
I don't even need to zoom text to see overlapping elements. It is not
pretty. There are other problems with the page as well, like no alt
text for images and some serious horizontal scrolling.
The gurus in this thread asked me to rethink about design, but can
anyone lemme know what kind of design factors you take into
consideration before you design a page with layers.

It really is a pretty simple layout, or at least should be. "Layers"
shouldn't be needed at all. The easiest thing would be to get rid of
all the positioning. Just arrange the sections in the order they should
display. You could keep the <div> tags, but they really serve no useful
purpose. The images really represent headings, thus they should be
contained in <hx> markup, presumably h2 (assuming there is an h1 on the
page). Add alt text to those images, too, so those with image loading
off can see some text.

For example, current code:
<div id="Layer10" style="position :absolute; left:1px; top:2069px;
width:110px; height:26px; z-index:19">
<a name =" resources"><img src="images/cluster-resources.jpg"
width="91" height="25"></a></div>
<div id="Layer11" style="position :absolute; left:19px; top:2106px;
width:1181px; height:199px; z-index:20">
<div align="justify" ><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">The cluster consists of one compile node...

Change to:
<h2><a name="resources "><img src="images/cluster-resources.jpg"
width="91" height="25" alt="Resources" ></a></h2>
<p align="justify" ><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">The cluster consists of one compile node...

The next thing would be to get rid of all the <font> tags and start
building an external stylesheet.

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.