468,545 Members | 1,714 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,545 developers. It's quick & easy.

size independent positioning

hi all. probably a trifle put google didn't tell me much. I notice there are
size units such as 'pt' and 'px'. is there one that will position the same
regardless of browser size, screen resolution, browser type?

Thanks

Aug 15 '05 #1
4 1533
Darren wrote:
hi all. probably a trifle put google didn't tell me much. I notice
there are size units such as 'pt' and 'px'. is there one that will
position the same regardless of browser size, screen resolution,
browser type?


Basically, no.

Read http://www.w3.org/TR/CSS21/syndata.html#length-units for the
descriptions of all the different units.

In theory, if you use an absolute unit (in, cm, mm, pt or pc) it should
display the same size on all devices (although that may be a varying number
of physical pixels as resolution varies), but in practice different
browsers have different interpretations, and fixed sizes are pretty
unfriendly as far as accessibility is concerned.

Even if you think you have tied the sizes down pretty tightly (e.g. width
and font size specified in pixels) you will still find that text
displays at different sizes in different browsers and wraps differently on
different devices in the same browser.

The best thing is to make your layouts flexible so that they display well
over a wide range of conditions (and test over a wide range of systems as
well).
Aug 15 '05 #2

"Duncan Booth" <du**********@invalid.invalid> wrote in message
news:Xn*************************@127.0.0.1...
Darren wrote:
hi all. probably a trifle put google didn't tell me much. I notice
there are size units such as 'pt' and 'px'. is there one that will
position the same regardless of browser size, screen resolution,
browser type?
Basically, no.

Read http://www.w3.org/TR/CSS21/syndata.html#length-units for the
descriptions of all the different units.

In theory, if you use an absolute unit (in, cm, mm, pt or pc) it should
display the same size on all devices (although that may be a varying

number of physical pixels as resolution varies), but in practice different
browsers have different interpretations, and fixed sizes are pretty
unfriendly as far as accessibility is concerned.

Even if you think you have tied the sizes down pretty tightly (e.g. width
and font size specified in pixels) you will still find that text
displays at different sizes in different browsers and wraps differently on
different devices in the same browser.

The best thing is to make your layouts flexible so that they display well
over a wide range of conditions (and test over a wide range of systems as
well).


The problem is its like s slide out menu using two divs. when you move the
mouse over one, the other flies oout next to it but sadly it you resize the
window, screan or change the browser to one like konquerer the fly out
appears elsewhere usually above where it should. I am looking at locking the
flyout menu to the vertical position of its parent but its tricky because
its parents don't have any coords to work with.

Darren
Aug 16 '05 #3
Darren wrote:
The problem is its like s slide out menu using two divs. when you move
the mouse over one, the other flies oout next to it but sadly it you
resize the window, screan or change the browser to one like konquerer
the fly out appears elsewhere usually above where it should. I am
looking at locking the flyout menu to the vertical position of its
parent but its tricky because its parents don't have any coords to
work with.

You don't need any coordinates for that. You just need to make sure you
understand positioning. In particular, position:absolute doesn't always
mean an absolute position on the page.

Put a containing div around where your menu is to appear and give it
position:relative, but don't specify any top or left. Now put your menu
inside this div and use position:absolute on the menu. The top/left
settings for the menu are then relative to the enclosing div.
Aug 16 '05 #4

"Duncan Booth" <du**********@invalid.invalid> wrote in message
news:Xn*************************@127.0.0.1...
Darren wrote:
The problem is its like s slide out menu using two divs. when you move
the mouse over one, the other flies oout next to it but sadly it you
resize the window, screan or change the browser to one like konquerer
the fly out appears elsewhere usually above where it should. I am
looking at locking the flyout menu to the vertical position of its
parent but its tricky because its parents don't have any coords to
work with.

You don't need any coordinates for that. You just need to make sure you
understand positioning. In particular, position:absolute doesn't always
mean an absolute position on the page.

Put a containing div around where your menu is to appear and give it
position:relative, but don't specify any top or left. Now put your menu
inside this div and use position:absolute on the menu. The top/left
settings for the menu are then relative to the enclosing div.

Thanks Duncan. I had the right idea first time but had it backwards. I was
setting the inner divs as relative and the outer as absolute. I changed it
round and the problem was fixed

Best regards

Aug 16 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Billy | last post: by
2 posts views Thread by David Winter | last post: by
5 posts views Thread by Joe Bonavita | last post: by
3 posts views Thread by MG | last post: by
1 post views Thread by Achim Domma (SyynX Solutions GmbH) | last post: by
5 posts views Thread by Robert | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.