Archived

This topic is now archived and is closed to further replies.

  • 0

Unwanted Paragraph Spacing in IE


Question

Posted · Report post

Hey guys,

 

I am have a problem with some unwanted spacing in IE using the grid system. We are in the process of upgrading from platform pro to pagelines. I previously had our product pages designed with the banner system. On pagelines though, some of the images didn't respond like they used to (to be clear, the respond in pagelines how they are supposed to, I was just using them differently in platform-pro), and I was advised on this forum to switch the the Pagelines Grid system.

 

Everything seems to look how I want now except for one errant paragraph space. It is the paragraph to the right of the red icon and below the header "Know Where You Stand." You can see a side by side of IE and Chrome in the screenshot. 

 

You can see the page at http://stage.americandatanetwork.com/clinical-benchmarking/

 

Thanks for your help. 

post-17731-0-71427900-1363127198_thumb.j

1 person likes this

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

Hi there,

 

Chromes on the right and that's how you want it to look? I'm in firefox and i see it the same as you're seeing in ie. So you might need to check in other browsers to and see if they display it in other positions. It looks like it's the margin for the paragraph which is pushing it out of alignment. 

 

The only way I've found to fix that is the below, but if it's happening in different browsers you might need to use some browser specific prefixes to make sure it looks the same in each one etc.

 

Browser prefixes can be found at - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

.product-textbox-main img {

    margin-top: 14px; }

 
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

I think I figured out part of the issue: I didn't have a div wrapped around that icon image, which for some reason was causing the line break in IE and Firefox. I'm not a veteran coder so no idea why, but figured I'd post the solution if anyone else has the same issue. 

 

I am still, however, getting more space between the highlight section (Clinical Benchmarking System and the the sentence below) and the span 12 grid that includes the "Know where you stand" and the browser window graphic. There is less space in chrome and firefox, like it should be. I'm not sure what properties on what element i should adjust because IE's inspection tool blows. 

 

Thoughts?

Share this post


Link to post
Share on other sites

Posted · Report post

When you view the source in IE, what is the code that appears for the highlight and span 12 grid?

Share this post


Link to post
Share on other sites

Posted · Report post

This is the code:

 

 
<!-- Highlight | Section Template -->
<section id="highlight" class="container no_clone section-highlight fix"><div class="texture"><div class="content"><div class="content-pad"> <div class="highlight-area">
<h1 class="highlight-head"><span class=splashhead>Clinical Benchmarking System</span></h1><h3 class="highlight-subhead subhead">Clinical, quality, financial and physician data that can be analyzed to identify and monitor hospital efficiencies.</h3> 
</div>
</div></div></div></section>
 
<!-- Content | Section Template -->
<section id="content" class="container no_clone section-content-area fix"><div class="texture"><div class="content"><div class="content-pad"> <div id="pagelines_content" class="fullwidth fix">
 
<div id="column-wrap" class="fix">
 
<div id="column-main" class="mcolumn fix">
<div class="mcolumn-pad" >
 
 
<!-- PostLoop | Section Template -->
<section id="postloop" class="copy no_clone section-postloop"><div class="copy-pad"><article class="post-885 page type-page status-publish hentry fpost post-number-1" id="post-885"><div class="hentry-pad"><div class="entry_wrap fix"><div class="entry_content"><div class="row">
<div class="span12" style="border-bottom: 1px solid #e1e1e1; display: block;"><img class="product-image-main" src="/wp-content/uploads/2011/10/main-cbs.jpg" />
<div class="product-textbox-main">
<div class="splashsubhead">Know Where You Stand</div>
<div class="product-ftext">
<div style="float:left; padding-top: 5px;"><img src="/wp-content/uploads/2013/03/icon-cbs.png" alt="icon-cbs" width="35" height="51" class="size-full wp-image-2751"/></div>
<div style="margin-left: 50px;">Access monthly-updated clinical, quality and financial information and benchmarks (peer and national) to identify areas that are performing well, and those that merit your immediate attention and action.</div>
</div>
</div>
</div>
</div>

Share this post


Link to post
Share on other sites

Posted · Report post

Have you already removed the margin spacing for highlight (specifically the bottom margin)?

Share this post


Link to post
Share on other sites

Posted · Report post

I removed the padding-bottom on the #highlight .content-pad 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Which version of IE are you testing in? Make sure compatibility mode is off in case that's whats causing the spacing issue.

 

I would say try removing the padding and margins again (using the same code but with the browser specific css prefix) in case its missing or adding additional padding something somewhere.

 

I'll check with the core team when they're in to see if they have suggestions. Will post back

Share this post


Link to post
Share on other sites