Weird Google Chrome bug on text aligned to bottom of div.

[Corran]

I encountered a strange bug in Google Chrome (22.0.1229.79 m) where the first time it loads a page it shows a div positioned incorrectly.

However if you go to a different page on the site it shows everything correctly and if you then click a link to go back to the original page it will show correctly there too.

Reloading doesn’t work though; you *have* to visit another page which has the same layout.

This only happens when I use position: absolute and bottom: 29px on the div to get the text to align to the bottom.

To see the bug in action:

Go to http://www.victam.com/?i=228

You will see some text at the top of the page that’s put incorrectly over the logo there.

If you now click any of the nav links at the right of the page (Application Form, etc.) you will see that it looks fine now.

This only happens on pages with a 645 pixels wide logo and not on pages with a 302 pixels wide logo such as the homepage.

Everything works just fine in Firefox and even in IE9.

I hope someone knows a fix for this.

Thanks!

[xpy]

That probable happens because the first time you enter the page, the images are not loaded so the browser doesn’t know their actual dimensions, so the positioning is measured without them. After the images are loaded, the flow changes but the browser doesn’t render it, the second time you enter the site, or if you navigate, the browser already knows the dimensions of the images so the positioning is right this time!
Relying on images sizes for layout and positioning is not a very good practice and also sometimes causes visual errors, one should always define width and height for img elements.

[Paulie_D]

> This only happens when I use position: absolute and bottom: 29px on the div to get the text to align to the bottom.

Although @Xpy basically gave you the answer, using absolution positioning is not an clean way to position text. Use padding & margins.

Anyway, it looks like it’s working now.

[Corran]

The undefined width makes perfect sense. Unfortunately the logo size isn’t always the same so I’ll have to see what the best way to fix it is.

As to the alignment; I’ve googled a lot to find any ‘perfect’ way to do it but it seems vertically aligning text in a div is almost impossible to do in a way that always works.

I might have to go and put everything in a table cell if there really is no other solution.

[Author]

Posts