Support » Themes and Templates » CSS3 multi-column layout: Baseline adjustment

  • WordPress: 3.1

    Hey,

    I use the CSS3 multi-column model for my WordPress theme with three columns. While it perfectly works with static text I have a problem with the baseline adjustment when using it with the the_content function in WordPress in Safari 5.0.1 and Chrome 5.0 (Firefox is fine).

    The lines in the first column run 2px lower than the lines in the second and third column.

    Here’s the link to the theme:
    http://moargh.de/wp-content/downloads/wp-themes/papaver/

    Here’s a screenshot:
    http://moargh.de/wp-content/downloads/wp-themes/screen.png

    CSS

    .entry-content {
    	-moz-column-count: 3;
    	-moz-column-gap: 20px;
    	-webkit-column-count: 3;
    	-webkit-column-gap: 20px;
    	column-count: 3;
    	column-gap: 20px;
    }
    
    p {
    	margin: 0;
    	padding: 0;
    }

    PHP

    <div class="entry-content">
    	<?php the_content('(...)'); ?>
    </div>

    Does anybody know how to solve that?

    Thank you in advance!

  • The topic ‘CSS3 multi-column layout: Baseline adjustment’ is closed to new replies.