Netscape CSS - Pixel perfect design possible with centered background?

Author

Pixel perfect design possible with centered background?

Per Djurner

2005-02-23, 6:45 pm

Hi, I have a design that I need to be pixel perfect but also on top of a
centered background image.

I can do the pixel perfect design no problem using a wrapper div with
relative positioning and then have absolute positioning on the divs
inside the wrapper.
The wrapper div is then centered and placed on the background image
which is also centered (with 50%).

This, of course, causes the 1px rounding problem when you resize the
browser window.

Does anyone know a way around this?

Thanks.

Markus Ernst

2005-02-24, 6:33 pm

Per Djurner wrote:
> Hi, I have a design that I need to be pixel perfect but also on top
> of a centered background image.
>
> I can do the pixel perfect design no problem using a wrapper div with
> relative positioning and then have absolute positioning on the divs
> inside the wrapper.
> The wrapper div is then centered and placed on the background image
> which is also centered (with 50%).
>
> This, of course, causes the 1px rounding problem when you resize the
> browser window.

I am sure you have a reason not to apply the background image to the wrapper
div.

If you can afford being unperfect for the part of the community that has
disabled Javascript, you could resize the window by -1px if the width is an
odd (or even, however) number. If you need help on this you will find it in
a Javascript group.

--
Markus

Per Djurner

2005-02-24, 6:33 pm

Markus Ernst wrote:
> Per Djurner wrote:
>
>
>
> I am sure you have a reason not to apply the background image to the wrapper
> div.
>
> If you can afford being unperfect for the part of the community that has
> disabled Javascript, you could resize the window by -1px if the width is an
> odd (or even, however) number. If you need help on this you will find it in
> a Javascript group.
>
Wow, talk about obvious solution!
I'm new to this whole CSS/XHTML thing so I think I was just to used to
applying the background to the body.
Thanks a lot!

Per Djurner

2005-02-25, 7:24 am

Justin Wood (Callek) wrote:
> Per Djurner wrote:
>
>
>
> THE problem is the "pixle perfect" philosophy,
>
> Not everyone has the same vision as you, some people need enlarged
> fonts, (which they can do via USER stylesheets), some people need better
> contrast, which they can do via USER stylesheets, implementations of
> pixle's vary slightly from OS to OS and UA to UA... (IE Win to Mac IE,
> to Safari, to Firefox...etc.)
>
> Your best bet is to design your HTML to semantics, not "visual". (XHTML
> if you feel daring and willing to exclude support for IE6, pre XP-SP2,
> since XHTML is _not_ xhtml unless you serve the mime-type as
> text/xhtml+xml text/html is _not_ xhtml, it is still html, just using
> XML semantics)
>
> Once your HTML is done, you can then design your CSS to be fluid, "scale
> the fonts", test on a few systems, if you design your CSS correctly, and
> "fluid" rather than things like |font-size: 11px; width: 100px;| and
> instead use relative units, (em/%/ex etc.) where possible you will save
> yourself and your visitors alot of trouble.
>
> The problem with you (as I currently see it), is that you design based
> on "Visual", which is the way PDF works, main concept is visual
> layout/design...secondary is content. HTML + CSS is about CONTENT
> first, preferrably correct content (as in just looking at the HTML you
> should be able to understand what the page is, a table _is_ a table of
> data, not a presentational helper). After that the CSS assists in
> visual PRESENTATION, which you apply based on semantics, ID's, classes,
> elements, etc.
>
> <img> only used for structural images, background-image, ::before{
> content: url(foo.img); }, etc being used for Presentational images...
>
> Again it doesnt need to be "pixel" perfect to be "visually perfect".
> In-fact designing "Pixel Perfect" for _your ua+system+font-settings_
> causes more harm than otherwise.
>
> In with this all is changing the "default" UA font size...if the font is
> "too large for you" scale your UA's font size, and design based on 100%
> as the main content font size, Your site's users wont want to be
> surprised with a font-change to be smaller than their acceptable level,
> this font-change in UA's is meant for people who need to change it for
> reasons of poor eye-sight, LET THEM determine what size is appropriate
> for them. (Co-incidentally Tahoma is a bad font for web-design since it
> is inertly larger than most other Windows fonts and is not available on
> all systems).
>
> I hope my rant is read through by you and thuroughly considered.
>
> ~Justin Wood (Callek)

I hear you Justin!

The need for pixel perfection in this case is that I'm coding a page
with an embedded windows media player and a GUI that our graphic artist
did. It's simply not acceptable in this case for the graphics to move a
pixel in any direction.

I must admit though that for normal designs I do tend to use pixels and
fixed width designs. It's probably just because I feel more comfortable
doing it that way at the moment (+ I haven't had a single complaint from
customers).

Justin Wood (Callek)

2005-02-25, 6:35 pm

Per Djurner wrote:
> Justin Wood (Callek) wrote:
>
> I hear you Justin!
>
> The need for pixel perfection in this case is that I'm coding a page
> with an embedded windows media player and a GUI that our graphic artist
> did. It's simply not acceptable in this case for the graphics to move a
> pixel in any direction.
>

Perhaps use this GUI as an img + imagemap, and use the areas with
javascript to do what you need?

As for the embedded windows media player, do not try to size that thing,
let it size appropriately for the system it is on, intrisicly.

> I must admit though that for normal designs I do tend to use pixels and
> fixed width designs. It's probably just because I feel more comfortable
> doing it that way at the moment (+ I haven't had a single complaint from
> customers).

I would argue that the reason you havent had a single complaint from
customers stems from one of two reasons.

1) They dont realize it is a problem with your website and not their
browser.

2) Those who do understand how to resize stuff and/or develop websites
accessably do not even bother with your website once they find it is
broken, I am sure that any contact information is near-impossible to
find for these people if they have zoomed fonts for example.

~Justin Wood (Callek)

Per Djurner

2005-02-25, 6:35 pm

Justin Wood (Callek) wrote:
> Per Djurner wrote:
>
>
> Perhaps use this GUI as an img + imagemap, and use the areas with
> javascript to do what you need?
I could but CSS does the job very well now that I applied the background
to the wrapper DIV instead of the BODY.

>
> As for the embedded windows media player, do not try to size that thing,
> let it size appropriately for the system it is on, intrisicly.
All files are of a certain size though so why not size the player to
that size? The design will look a lot better that way.

>
>
>
> I would argue that the reason you havent had a single complaint from
> customers stems from one of two reasons.
>
> 1) They dont realize it is a problem with your website and not their
> browser.
>
> 2) Those who do understand how to resize stuff and/or develop websites
> accessably do not even bother with your website once they find it is
> broken, I am sure that any contact information is near-impossible to
> find for these people if they have zoomed fonts for example.
You could be right of course but we're very used to people complaining
about the site when it is in fact their browser/computer that is the
problem ;)

/ Per

>
> ~Justin Wood (Callek)