I am creating my first site from scratch using PHP, MySQL, CSS, HTML, and some script languages. It is a dating site. Sorry for my bad english, but it’s not my native language.
I have found a solution to every other problem/issue I have faced. But as I started testing cross-browser compatibility, a weird bug happened in Chrome.
The website is here http://www.writech.net.ee/testsite
The site’s idea is that everyone who wants to date someone fills a form with his/her contact data and description and submits it. Every advert shows up as a floating div. These divs are floated left. The divs have fixed height, so if anyone writes a longer description and it doesnt fit to the div a scrollbar appears. The divs which should hold the description text are outlined with 1px red border.
The advert divs are OK in IE9 and Firefox 11 but in Chrome the div with too much text to fit the div which should be applied the “overflow: auto” to show vertical scrollbar for some reason renders to elevated position compared to other divs. At first I thought the problem is related to appearing scrollbar, tried “overflow:hidden” – overflow:hidden hides the excessive text but the div still appears elevated compared to other divs. So the problem is related to how much text the div contains.
As I have no previous cross-browser adaption experience I don’t know where to look and what to do. Does anyone have thoughts on which CSS hacks to try?
Have to say I think it’s a bit weird that this happens, but if you set the
vertical-alignproperty of your.boxes totopit works:.box {vertical-align: top}.