281391 - Bad render of text using 800x600 resolution

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Raúl Moratalla]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.7.5) Gecko/20041108 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.7.5) Gecko/20041108 Firefox/1.0

In the page http://www.eps.ua.es you can see the text at the bottom(right):
"como usuario anonimo" and "como usuario de la EPS".
If I use resolution 800x600 the links are mixed with the text below and it's no
posible to acces to the link.
If I use 1024 I can view the page without any problem

Reproducible: Always

Comment 1

[Hermann Schwab]

This Page Is Valid HTML 4.01 Transitional!
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.eps.ua.es%2F

but has an error in CSS:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.eps.ua.es%2F

Errors
URI : http://www.eps.ua.es/
 * Line: 63
 Invalid number : vertical-alignsupper is not a vertical-align value : supper

From the source:
<p class="gn" style="vertical-align:supper">Titulaciones</p>

but that is not the reason for wrong display on 800x600.
Having a 100% validated HTML and CSS doesn´t prevent you from making a visually
broken layout.

Some <div>s have height specified in %, others in px.

If you add 55% and 21 px, you get 87 px in 800x600 screen resolution.
If neigbouring <div>s are specified 87px and 21 px, this will fit in 800x600
What will that give if you change the total heigth?
55% and 21px then will add to 105 px, the neighbours will stay, so adding up to
98px, and you will see a 7 px difference somewhere.
You can use DOM Inspector to check the positions and see the structure of the page.

I would suggest resolving this bug as invalid.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Yep, this is just a bug in the page... it sets explicit heights that are too
small for the content.