Geek Answers Handbook

CSS text overflow error? in google chrome

I create my first website from scratch using PHP, MySQL, CSS, HTML and some script languages. This is a dating site. Sorry for my poor English, but that is not my native language. I have found a solution to any other problem / problem that I have encountered. But when I started testing compatibility with several browsers, a strange error appeared in Chrome. The website is here http://www.writech.net.ee/testsite

The idea of ​​the site is that everyone who wants to meet someone fills out a form with his contact details and description and sends them. Each ad appears as a floating div. These divs are placed on the left. Divs have a fixed height, so if someone writes a longer description and is not suitable for a div, a scroll bar appears. Divas that should contain description text are indicated by a 1px red frame.
The sections of ads in IE9 and Firefox 11 are fine, but in Chrome there is too much text to fit the div that needs to be applied. "Overflow: auto" to show a vertical scrollbar, for some reason, has an increased position compared to other divs. At first I thought the problem was with the appearance of the scrollbar, I tried "overflow: hidden" - overflow: hidden hides redundant text, but the div still seems to be elevated compared to other divs. So the problem is how much text the div contains.
Since I have no prior experience in cross-browser adaptation, I don’t know where to look and what to do. Anyone have any thoughts on what attempts to crack CSS?

+2
source share
3 answers

I have to say that it seems a little strange to me that this is happening, but if you set the vertical-align property of your .box es to top , it works: .box {vertical-align: top} .

+3
source

I had a similar problem before, and float: left worked for her. You can use the same solution, but you will need to change how the div containing the fields is centered. I managed to get it to look directly in Chrome on a Macbook with the following (you can, of course, move the style to your CSS file):

 <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>
+3
source

You can try to use block mapping (this is the built-in atm block) in the .box class, and also throw a float: to the left of it. (line 324)

+1
source

More articles:


All Articles