Home / Forums / DynamiX Support / Three Columns not displaying properly in IE9

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • Chris Kapelski
    Participant

    Hello,

    I am working on a site where I am using the columns shortcode.  Everything works great and shows up correctly in every browser EXCEPT IE9.  I even tested it on !E8 and it worked fine.  I have pasted some code below for anyone to review.

    <h2 style="text-align: center;">[three_columns height="250" border="border"]<span style="color: #40b459;">Sign Up for Classes!</span>

    &nbsp;

    <h3 style="text-align: center; font-weight: bold;">ONLY $5!  Limited time only<h5 style="text-align: left; font-weight: normal;">Have you ever wondered what it was like to feel weightless but completely supported? Now you can find out! Aerial Group Fitness is a HOT NEW way to tone, flex, and strengthen your muscles while decompressing your spine. Talk about feeling good!

    <strong>Think you can't do it? Think again.</strong>

    <a href="http://www.toughlotus.com/signupforclasses"><span style="font-size:14px;">Sign Up Now!</span></a>[/three_columns]</h5></h3></h2>

    <h2 style="text-align: center;">[three_columns height="250" border="border"]<span style="color: #40b459;">Our Training Philosophy</span>

    <h5 style="text-align: left; font-weight: normal;"> <img src="http://toughlotus.com/wp-content/uploads/2012/03/Help-Reach-your-goals-300×174.jpg&quot; alt="Reach Your Goals" title="Help Reach your goals" width="240" height="139" class="aligncenter size-medium wp-image-689" />

    Whatever your fitness goals, we are ready to help you reach them!  NO gym memberships or expensive equipment required.

    <a href="http://www.toughlotus.com/personal-training"><span style="font-size:14px;">How we do it</span></a>[/three_columns]</h5></h2>

    <h2 style="text-align: center;">[three_columns_last height="250" border="border"]<span style="color: #40b459;">Tough Lotus Gives Back</span>

    <h5 style="text-align: left; font-weight: normal;"> <a href="http://www.girlsrulefoundation.org&quot; target=_blank><img src="http://toughlotus.com/wp-content/uploads/2012/03/GirlsRuleCharity.jpg&quot; alt="Girls Rule Charity Logo" title="GirlsRuleCharity" width="195" height="140" class="aligncenter size-full wp-image-737" /></a>

    Through June, Tough Lotus donates a portion of ALL class proceeds to charity, the <br>Girls Rule Foundation!

    <a href="http://www.toughlotus.com/our-charity"><span style="font-size:14px;">Check out our charity</span></a>[/three_columns_last]</h5></h2>

    I am not sure what is exactly happening, but IE9 seems to be breaking the titles ex "Sign Up for Classes!" and the content into 2 different column boxes.  So instead of having 3 columns in total, I have 6, 3 with just the titles and 3 with the content.  Does anyone have any thoughts?  Thanks in advance!

    Chris

    Andy
    Andy
    Keymaster

    Hi,

    From that code the HTML markup is incorrect. The h tags should be open and closed properly and they should not wrap HTML elements other than text and span tags. e.g.

     [three_columns height="250" border="border"]<h2 style="text-align: center;"><span style="color: #40b459;">Sign Up for Classes!</span></h2>


    Chris Kapelski
    Participant

    fixed the coding.  But now there is another problem.  The boxes appear fine in all browsers except IE9 again, where they are now staggered.  See picture at http://www.interactivedesignsolutions.com/errorexample.jpg for details.  There also seems to be a fairly LARGE and uneccessary gap between the top of the column and the title text….

    [three_columns height="250" border="border"]

    <h2 style="text-align: center;"><span style="color: #40b459;">Sign Up for Classes!</span></h2>

    &nbsp;

    <h3 style="text-align: center; font-weight: bold;">ONLY $5! Limited time only</h3>

    <h5 style="text-align: left; font-weight: normal;">Have you ever wondered what it was like to feel weightless but completely supported? Now you can find out! Aerial Group Fitness is a HOT NEW way to tone, flex, and strengthen your muscles while decompressing your spine. Talk about feeling good!

    <strong>Think you can't do it? Think again.</strong></h5>

    &nbsp;

    <a href="http://www.toughlotus.com/signupforclasses"><span style="font-size: 14px;">Sign Up Now!</span></a>

    [/three_columns]

    [three_columns height="250" border="border"]

    <h2 style="text-align: center;"><span style="color: #40b459;">Our Training Philosophy</span></h2>

    <h5 style="text-align: left; font-weight: normal;"><img class="aligncenter size-medium wp-image-689" title="Help Reach your goals" src="http://toughlotus.com/wp-content/uploads/2012/03/Help-Reach-your-goals-300×174.jpg&quot; alt="Reach Your Goals" width="240" height="139" />

    Whatever your fitness goals, we are ready to help you reach them! NO gym memberships or expensive equipment required.</h5>

    <a href="http://www.toughlotus.com/personal-training"><span style="font-size: 14px;">How we do it</span></a>

    [/three_columns]

    [three_columns_last height="250" border="border"]

    <h2 style="text-align: center;"><span style="color: #40b459;">Tough Lotus Gives Back</span></h2>

    <h5 style="text-align: left; font-weight: normal;"><a href="http://www.girlsrulefoundation.org&quot; target="_blank"><img class="aligncenter size-full wp-image-737" title="GirlsRuleCharity" src="http://toughlotus.com/wp-content/uploads/2012/03/GirlsRuleCharity.jpg&quot; alt="Girls Rule Charity Logo" width="195" height="140" /></a>

    Through June, Tough Lotus donates a portion of ALL class proceeds to charity, the

    Girls Rule Foundation!</h5>

    <a href="http://www.toughlotus.com/our-charity"><span style="font-size: 14px;">Check out our charity</span></a>

    [/three_columns_last]


    Chris Kapelski
    Participant

    I am not sure why but the display error seems to only occur when a page is previewed in wordpress editing.  The live page looks like it works.

    http://www.toughlotus.com

    Andy
    Andy
    Keymaster

    I'm not sure why either – but you're right it does display fine on the live page in IE. 

    Andy
    Andy
    Keymaster

    BTW The site is looking great!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.