CODEWITHSUNDEEP
cssgoogle-chromeoverflow
Robert
Robert

Reputation: 467

CSS text overflow bug? in Google Chrome

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?

Upvotes: 2

Views: 4089

Answers (3)

tsherif
tsherif

Reputation: 11710

I had a similar problem once before, and float:left worked for it. You can use the same solution, but you'll have to change how the div containing the boxes is centered. I managed to get it to look right in Chrome on a Macbook with the following (you can move the styling to you CSS file, of course):

<div style="margin-left: auto; margin-right: auto; width: 1080px;">
  <div class="box" display="float:left">
    ...
  </div>
  <div class="box" display="float:left">
    ...
  </div>
  ...
</div>

Upvotes: 3

powerbuoy
powerbuoy

Reputation: 12838

Have to say I think it's a bit weird that this happens, but if you set the vertical-align property of your .boxes to top it works: .box {vertical-align: top}.

Upvotes: 3

Ray
Ray

Reputation: 119

You could try applying block display(it's inline-block atm) on the .box class and also throw a float:left on it. (line 324)

Upvotes: 1

Related Questions