Jump to content
mitzelumir

IE8 problem with random space

Recommended Posts

mitzelumir    0
mitzelumir

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
James B    436
James B

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


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

Hi there, that link doesn't seem to be working.. I'm assuming though turning off the compatibility didn't do the trick?


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
mitzelumir    0
mitzelumir

no it didnt work. it just made everything plain text basically

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Please remove all your custom CSS, then refresh your page and see if the problem persists. The issue is most likely related to your custom CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mitzelumir    0
mitzelumir

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
James B    436
James B

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/


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
trassel    1
trassel

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mitzelumir    0
mitzelumir

unfortunately I cannot try any of these until monday. 

Share this post


Link to post
Share on other sites
Rob    547
Rob

No worries.  We'll be here!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mitzelumir    0
mitzelumir

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
James B    436
James B

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



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
mitzelumir    0
mitzelumir

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
mitzelumir    0
mitzelumir

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mitzelumir    0
mitzelumir

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
James B    436
James B

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

 


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
mitzelumir    0
mitzelumir

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
James B    436
James B

No worries keep us posted


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
mitzelumir    0
mitzelumir

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
James B    436
James B

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.


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
mitzelumir    0
mitzelumir

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

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


×