Jump to content
Sign in to follow this  
jamiewalden

Unwanted Paragraph Spacing in IE

Recommended Posts

jamiewalden    1
jamiewalden

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

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

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; }

 
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jamiewalden    1
jamiewalden

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jamiewalden    1
jamiewalden

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jamiewalden    1
jamiewalden

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

As check this thread as the user was having the same issue, there's some code that worked for him at the bottom of this thread - http://www.pagelines.com/forum/topic/25626-ie8-problem-with-random-space/page-2#entry150990


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • dloos
      By dloos+
      ONEPAGE has visual errors in IE, objects do not stay separated, and image elongated on next section.  Any Suggestions?  It is coming up with this error from Pagelines on site. 
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
      Thanks
      Michael
    • arno
      By arno+
      Site that looks great on other browser, are is rendered wrong on IE: http://foodfunded.us/
      We got multiple complaints.
      The height of sections is way too high. Not sure which section is causing the problem, as they are in containers.
      Or is the size of the images?

      While most of us probably don't use IE, it might prevent professionals from getting client engagements with the PL5 tool, if the browsers don't have coverage.

    • MissT
      By MissT+
      On more than one website I'm building there is a massive blank space after the content and pagination within the loops section when viewed on Internet Explorer 11. It looks like the loops-wrap section is about twice the depth it needs to be. Screenshot attached.
      Can provide url via private message.
      WP version 4.4.2
      Platform5 Version 5.0.132
      Loops version 5.0.18
      Many thanks.

    • Audun MB
      By Audun MB+
      This is a boxes section with media at left in IE11
      :
      Boxes with media on top works without issues. 
       
×