[css-d] background image shifts next to heading??

[Rob freeman]

Hi everyone, My site is near completion. The only problem is a
background image which appears next to the headings (Styles and
Effects headings etc..) seems to drop slightly in Firefox at work,
though it seems fine in Firefox and safari on my Laptop and PC.

I'm sure its to do with the headings at 110% how can I make sure the
arrow icon always sits centred vertically next to the headings?

here is the link:
http://www.coloursense.net/testfolder/


could anyone help



Rob Freeman
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background image shifts next to heading??

[Gunlaug Sørtun]

Rob freeman wrote:
 I'm sure its to do with the headings at 110% how can I make sure the 
 arrow icon always sits centred vertically next to the headings?

 http://www.coloursense.net/testfolder/

Don't know why you get variations between two setups of Firefox -
different screen-resolutions maybe.
However, position of background with pixel-values next to text, depends
on frozen font-size, line-height and other setup-alterable variables,
and none of these variables can be controlled or guaranteed across
browser-land and setups. The vertical line-up is for instance easily
disturbed by introducing even the slightest font-resizing.

Somewhat improved control can be achieved by playing along with the
unknown variables, and leave to the browsers to calculate line-ups. They
are usually quite good at it when fed balanced and tested styles.

One way to do it in your case, is to...

1: even out the top and bottom padding, and get back the
position/line-up by adding a margin-top:

#content h1 {
padding: 3px 0;
margin-top: 7px;
}

2: you now have two options.

2 a: make the background center vertically no matter what - even if the
headline-text breaks into 2 lines:

#content h1 {
background-position: 0 50%;
}

Note: the vertical centering is in the headline itself, so if the text
breaks into two lines the background will center vertically between
those lines. Background-image is positioned by its vertical center with
the given value.

2 b: make the background center vertically with the text-line - also if
the headline-text breaks into 2 lines:

#content h1 {
background-position: 0 .5em;
}

Note: exact em-value depends on case and size of background-image.
Since the background doesn't change size with font-resizing, some slight
misalignment will take place if the font-resizing is made large enough,
because the background-image is positioned by its top edge and not its
vertical center.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background image shifts next to heading??

[Rafael]

Gunlaug Sørtun wrote:
 2 b: make the background center vertically with the text-line - also if
 the headline-text breaks into 2 lines:

 #content h1 {
 background-position: 0 .5em;
 }

 Note: exact em-value depends on case and size of background-image.
 Since the background doesn't change size with font-resizing, some slight
 misalignment will take place if the font-resizing is made large enough,
 because the background-image is positioned by its top edge and not its
 vertical center.
   
I'd just like to point out that the use of line-height could affect 
the positioning. It would be good to set line-height and position the 
image at half that value. E.g.
  line-height: 1em; /* Whatever value that's OK with you */
  background-position: 0 0.5em; /* Half the value above */
Remember the order doesn't really matter, as long as they're in the same 
rule set.

Rafael.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/