Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’m having issues in Chrome where paragraph text is overlapping floating elements. The floating elements are pushed down to force an image in the lower left-hand corner of a container. I’ve setup http://jsfiddle.net/VMJGX/ which recreates the issue. The text overlaps the .indenter elements in Chrome but not in Firefox or IE. Is this a Chrome bug or is there a better way to accomplish this?
Chrome Version 21.0.1180.82
Firefox Version 15.0
The problem looks to be that the top of your indenters are getting caught in the middle of lines because of the varying heights compared to the linehieght in the paragraph. I’m guessing FF and Chrome render the heights slightly differently. If you want continue to use the same method you are using, I would recommend getting rid of the height class styles and instead just use nbsp; to fill the indenter divs so you get height that is consistent with the line height of the paragraph.
Here’s a fiddle with an example.
UPDATE:
I updated the fiddle to use spans as the indenters inside the paragraph (instead of divs) and put the width properties back in. Because of the margin-bottom on the paragraphs and the clear on the indenters, you need a matching margin-bottom on the intenders so they will stay aligned.