Sent by Gunlaug_Sørtun on 11 January 2005 04:04
> http://www.salvosconnect.org.au/ The problem is that when you resize
> the browser window, my containing #frame doesn't centre properly
> over the top of the centred background GIF. I need them to be
> pixel-perfect. It's almost like a rounding error, but it happens in
> several different browsers.
The actual center will shift 1px no matter what, so it is not possible
to hit the same spot on all browser-widths. Just try to calculate the
exact center of a 1001px wide window, and you'll see what I mean.
Browsers handle this differently, so my Firefox and IE6 is stable. Opera
is 1px off, and keep on centering on narrow windows, and Safari flickers
and has no stable center.
The way to do it is to change method, which you should do anyway since
your brown background-color makes text invisible without that
background-image in place. Brown on brown doesn't show.
1: split the image. A brown background, and a white/pink center image
with side-shadows.
2: let the brown background-image repeat on body-- no positioning
necessary. The width doesn't matter, as it will fill the body anyway.
Just make it large enough so it renders fast.
3: create a div#wrapper inside body, and style centering on that.
Similar to your div#frame now.
4: set the white/pink background on that new div, and offset it to the
left with px until it is where you want it. Repeat-y. Again, make it
large enough so it renders fast.
5: you can make most browsers stretch div#wrapper down to the bottom, so
it will look like your original.
I can't go further into the details, because you have several
stylesheets/styles which override styles. It was hard enough to find the
actual background-image, and I had to comment out a lot of styles just
to see what was behind each layer.
You should have told us what images/styles to look for-- where. :)
Nothing wrong with your cascade, but hard to work on for an "outsider".
---------
Side notes:
<img src="arrow007.gif" width="8" height="8" border="0">
....should look more like:
<img src="arrow007.gif" width="8" height="8" alt="→" /> or
something, with alternative for the arrow. Also; close the element in
xhtml. Style those images with "border: none;".
target="_top" on links is regarded as "disturbing", but it is valid.
<br clear="all" /> is "not nice", but valid xhtml transitional. It does
what your comment says. I use it all the time, but for a different
reason. We usually style clearers with "clear: both;" for this purpose
though.
---------
regards
Georg
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
