Prev: 246335 Information portals for computer and Web technology 44
Next: Italic fonts vs. Slanted letters
From: Gabriel Gilini on 25 Mar 2010 12:22
I have a stack of LI elements on a sidebar with an anchor inside each
of them. In every browser I've tested in every OS except Chrome and
Safari on Mac, I've managed to keep the text vertically centralized.

The page can be seen at http://blog.agenciameteoro.com.br/.

I've already tried searching the archives for a similar behavior with
no success, so if anyone ever stumbled on this problem any help would
be appreciated. I'd try and fix it all by myself but I don't have
access to a mac right now.

Thanks
From: David Stone on 25 Mar 2010 13:18
In article
<6651cf08-cecc-4217-a0d0-04a30ae1fd88(a)35g2000yqm.googlegroups.com>,
Gabriel Gilini <gabrielgilini(a)gmail.com> wrote:

> I have a stack of LI elements on a sidebar with an anchor inside each
> of them. In every browser I've tested in every OS except Chrome and
> Safari on Mac, I've managed to keep the text vertically centralized.

I think the word you are looking for is "centred" or "centered"
(depending on your preferred English usage). Incidentally, Mac Webkit
does indeed honour both line-height and vertical-align, provided
circumstances have not been created that otherwise prevent this.

> The page can be seen at http://blog.agenciameteoro.com.br/.
>
> I've already tried searching the archives for a similar behavior with
> no success, so if anyone ever stumbled on this problem any help would
> be appreciated. I'd try and fix it all by myself but I don't have
> access to a mac right now.

If you are referring to the entries under "BlogsParceiros",
they look exactly the same to me on my Mac between FireFox 3.6.2
and Safari 4.0.5. There are problems in BOTH browsers if I text
zoom in or out to extremes: smaller, and the text is not vertically
centred between the borders for each item; larger, and the text
pops out and overhangs the borders. This happens because you have
set an explicit li height in pixels - if a user overrides your own
font-size setting, layouts based on pixels can break!

As far as vertical alignment of the link elements within the list
items goes, I think you may be running into a problem here:

[http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align]
"middle
Align the vertical midpoint of the box with the baseline of
the parent box plus half the x-height of the parent."

[http://www.w3.org/TR/CSS21/syndata.html#ex]

I suspect that a combination of the way "middle" is calculated
for the font in use on any given system, combined with the
explicit li height, may result in the anchor text not always
being exactly centred vertically within each li. You might be
happier ditching both the li height and the a vertical-align
completely, and letting things take care of themselves.

You might also want to try a stripped down version of the page
with all your explicit pixel heights, margins, and padding
removed, and see what you get.

Note that you have three errors associated with a non-existent
attribute - "role", as well as 13 errors and 26 warnings in your
CSS (see the validators @ http://validator.w3.org/ and
http://jigsaw.w3.org/css-validator/).
 | 
Pages: 1
Prev: 246335 Information portals for computer and Web technology 44
Next: Italic fonts vs. Slanted letters