0

I'm using the following code to allow text to flow over to a second column. Everything is fine except that the top of the letters are cut off at the bottom of the first column and the remaining portion of the letters appear at the top of the second column.

.two-column-flow {
column-count: 2;
column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
height: 150px;
padding-bottom: 10px;
}

Click the "Features" tab on the left of the page and look in the "Entertainment" section to see what I am talking about. http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

Any help is greatly appreciated :)

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
Alex Williams
  • 99
  • 1
  • 3
  • 15

1 Answers1

1

I've just checked this issue on Windows Chrome, Firefox and IE with different results - the text is cut off in Chrome like you described, in IE the text in question isn't displayed at all (last two lines - "Game Room" and "VCR"), in Firefox the 2 columns are only displayed as one column, with the whole copy that should be displayed in the second column at "Entertainment" overlapping the copy in the "Communications" section below, last entry "VCR" covering "Broadband Access".
I was able to fix this for all mentioned browsers with two adjustments: removing "display:inline-block;" for ".text-wrap" (line 351 in style.css) and increasing the height:150px; to height:200px; for class ".two-column-flow" (line 109 in style.css).
As I don't know if these styles are used elsewhere on the site, I'm not sure if these adjustments would cause other issues, but in case that would solve the current issue, you can just add a specific class to the entertainment section and apply the mentioned changes to this class only.

Update: For the follow up issue with the first line of text being out of alignment I just found a solution (again - "only" tested on Windows Firefox, Chrome and IE) - change the padding of class .text-wrap (line 351 in style.css):

.text-wrap
{  
  padding: 0 2% 30px;  
}

to 

.text-wrap
{  
  padding: 0 0 30px;  
}

then the 1st line is displayed aligned again.
As already mentioned I'm not sure about possible consequences for other sections on your site, so maybe consider to apply all the changes to fix the issues for the 2-column layout only e.g. to sections having both classes .text-wrap and .pre-wrapped-text (for completeness that'd be .text-wrap.pre-wrapped-text without a space) or to .two-column-flow .text-wrap (= elements having class .text-wrap and are children of elements with class .two-column-flow).

While I was checking this issue I just noticed another issue on Internet Explorer only - your header .ribbon is "broken", meaning the navigation with "About us Chat My Account" is not displayed in one line above your main nav, but on the right side one above the other - "About us" above "Contact", "Chat" overlapping "Contact" and "My Account" below. This can easily be fixed - it's caused by the setting width: initial; that IE can't handle. To fix this for IE and not causing any issues for other browsers, just add width: auto; before width: initial;. IE recognizes width: auto; and the navi is fixed, other browsers - recognizing both width-settings - will ignore the first setting for width and using width: initial;. This applies to 2 settings: header .ribbon (line 42) and .ribbon ul (line 47). As example for header .ribbon (not meant to replace all, just add width: auto;): 

header .ribbon
{
  width: auto;    // for IE
  width: initial; // for the rest, will be ignored by IE
}

As reference for the mentioned IE-issue: use initial width for element not working in IE

Community
  • 1
  • 1
matthias_h
  • 11,356
  • 9
  • 22
  • 40
  • Thanx so much for time on this matter and for the cross-browser testing! – Alex Williams Oct 07 '14 at 16:04
  • One thing... after removing the display: inline-block rule from the .text-wrap class by adding .text-wrap {display: initial} to the end of my style sheet, I now get a tiny space before the first line of text which makes everything seem slightly out of alignment within the column. Any suggestions? – Alex Williams Oct 07 '14 at 16:29
  • @AlexWilliams Glad that I was able to help you, and just updated my answer for the follow-up issue with the first line and an additional IE-problem. – matthias_h Oct 07 '14 at 19:11