Archived

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

  • 0

IE8 problem with random space

Question

Posted · Report post

So when viewed on ie8 (and probably earlier versions) the site looks normal until completely loaded and then it creates these random spaces. I looked into the css and can't find any margins or anything. this problem is only occurring on ie8 and the site looks great on ie9, chrome, and firefox. My client uses ie8 though and is extremely bothered and unsatisfied that I can't find a solution to this problem. Is there any possible fix for this?

 

Share this post


Link to post
Share on other sites

30 answers to this question

Posted · Report post

I have to say, I have never heard of this issue. Therefore, can you or your client install a free application called Jing. Jing captures anything you see on your computer screen, as an image or short video, and lets you share it instantly.

 

http://www.techsmith.com/jing.html

 

Once installed, ask them to record the issue and then provide a link to the uploaded recording, so we can take a look.

Share this post


Link to post
Share on other sites

Posted · Report post

Barry,

 

Please don't hijack topics. Kindly open a new topic and feel free to reference a topic as a similar one.  Thanks for your understanding.  We want to make sure you get proper attention, as you deserve.

Share this post


Link to post
Share on other sites

Posted · Report post

could the problem be that ie8 is reading the header and footer tags wrong?

is there a fix for something like that?

Share this post


Link to post
Share on other sites

Posted · Report post

I deleted all my custom css and the problem still persists. ive tried, my custom css, and all my plugins. is there a way to re install pagelines, maybe the problem is with my version of the framework.

Share this post


Link to post
Share on other sites

Posted · Report post

You can re-download the framework from your launchpad account at http://www.pagelines.com/launchpad/ just go to the 'your products' tab abd you'll be able to redownload as a zip file and upload.

 

But I'd imagine this is coming from somewhere else rather than the core code. Another option would be to use browser specific css to target ie8 and remove the spaces manually.

 

The browser specific css plugin can be downloaded from - http://www.pagelines.com/wiki/Custom_CSS

Directions on using the specific css can be found at - http://support.pagelines.me/docs/plugins/browser-specific-css/

Share this post


Link to post
Share on other sites

Posted · Report post

So when viewed on ie8 (and probably earlier versions) the site looks normal until completely loaded and then it creates these random spaces. I looked into the css and can't find any margins or anything. this problem is only occurring on ie8 and the site looks great on ie9, chrome, and firefox. My client uses ie8 though and is extremely bothered and unsatisfied that I can't find a solution to this problem. Is there any possible fix for this?

 

attachicon.gifwebpage.pngattachicon.gifwebpage-show.png

And you've got no other plugins thats make the empty space? I'd a map locator before and it made some empty spaces... But when I took it away no more empty spaces and a little css

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, it shouldn't do no, we're had no other reports of anything like that.

 

The only browser specific code i can see in your custom css box is the body.ie8, did you remove the rest?

 

body.ie #dynamic-content {margin-top: -50px !important;
padding:0;
margin:0; }
 

If you try the above as a test, do you get any result at all in ie? That code is for the area directly under the nav, that should move the content up and remove all padding and margins.

 

Or

 

body.ie .section-boxes .content .content-pad {
    padding: 15px;
}

 

Share this post


Link to post
Share on other sites

Posted · Report post

Danny: for what it's worth, this problem (in my experience; mitzelumir can correct me if his is different) was introduced with the latest 2.4.1 release. Prior to this latest release, I had other difficulties with IE8, but this formatting issue is new. BTW, without "Include Google IE Compatability Script?" checked, 2.4.1 made an absolute hash of my layout in IE8; when checked the difficulties resolve to mitzelumir's relatively minimal spacing issues. Prior to 2.4.1 I didn't even have that box checked and had no layout issues with IE8.

 

Mitzelumir: You may wish to consider the IE8 solution I've decided to revert to: http://wordpress.org/extend/plugins/advanced-browser-check/. I've had enough.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, looking at the screen shot for ie, it looks like compatibility mode is on. This has been known to affect the layout as it previews the page so it can be seen in older editions of ie, deactivate this and see if there is a change. More info can be found here - http://windows.microsoft.com/en-us/internet-explorer/use-compatibility-view#ie=ie-10

Share this post


Link to post
Share on other sites

Posted · Report post

It would seem something in your site, likely a plugin, is adding that spacing, or, IE is seeing some CSS it cannot understand, thus it adds the space. 

 

While I don't recommend using negative margins, you might want to do this in conjunction with our free Browser Specific CSS plugin found at Dashboard > PageLines > Store > Plugins > Top Free.

 

You can use the plugin to apply CSS specifically for IE8.  I'm not promising this will work, but it's surely a positive step that should be tried.

Share this post


Link to post
Share on other sites

Posted · Report post

I will give that a try, 

I didnt get an email of your response so I didn't see it til now, 

i'll keep you posted.

Share this post


Link to post
Share on other sites

Posted · Report post

that did not resolve the problem. so I think the problem has to do with margins between the header, content, and footer.

there is approximately 15px spacing between those sections when viewed on ie8. I dont think it has anything to do with the sections themselves. 

is there an id or class that the sections are put in?

 

here are some pictures to illustrate what margins I am talking about.

 

http://24.media.tumblr.com/4cedbc0b43e32aeabd34a79a41d5604e/tumblr_mjigwavvgk1qbukhmo1_250.jpg

http://25.media.tumblr.com/3e299670c23a4bdd253cda4392394560/tumblr_mjigwavvgk1qbukhmo2_500.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

May we have a link to the site?  The snapshots you've made of the layout are not representing any specific padding or margins between the sections.  They're show to demonstrate that there is spacing between them and to give you a clear visual representation of each.

 

Margins, and padding between sections may be adjusted with custom CSS if you know exactly which you need to change.  One must take care not to modify on too broadly a scale as this may cause damage to other things.

Share this post


Link to post
Share on other sites

Posted · Report post

So I implemented the fix and it works satisfactory. 

the only problem my client has now is that when the page is loading, the content jumps around before fully loaded.

I'm sure that that's just how the browser is reading the code but just wondering if there is anything that could be done...

Share this post


Link to post
Share on other sites

Posted · Report post

So i tried the browser specific css and it worked for the space at the top, but the space in the nav is still there.

here is the custom css i tried to fix the navbar:

 

 

#boxes.ie8,
#banners.ie8,
#content.ie8,
#footer.ie8{
 margin-top:-50px;
}
 
#boxes.ie8,
#banners.ie8,
#content.ie8,
#footer.ie8{
 position: relative;
bottom: 50px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

unfortunately I cannot try any of these until monday. 

Share this post


Link to post
Share on other sites

Posted · Report post

No worries.  We'll be here!

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, the page is responding to that code, so im gonna fiddle around with it until it works, unfortunately I can only view the results on my clients laptop so it might take a bit to know when exactly i'll need your help again or when this will be marked as solved. 

 

Thanks, and ill keep you guys posted.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, looking at the css above there's nothing in there for the header or the nav sections... if the padding/margins are showing in and around those areas you'll need to go into the section using the inspector to edit the code. If you just move everything up by 50px it won't hide the padding if its applied to another section.

 

You'll need to be specific on the section which is causing the gap. Like below,

 



    body.ie .section-navbar .content {
    padding:0;
    }


Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, I've not heard of that before. When you say jumps around do you mean that it rearranges as the css loads? would you be able to take a snapshot for us.

Share this post


Link to post
Share on other sites

Posted · Report post

yeah, it rearranges as the css loads. the content is out of the screen on the right side until the page is fully loaded then it appears as it should.

Share this post


Link to post
Share on other sites

Posted · Report post

No worries keep us posted

Share this post


Link to post
Share on other sites