Having a huge problem with my Wordpress site displaying incorrectly only in IE. The whole site should be centered in the middle of the page but in IE it floats left. Also my nav options (on the sidebar once hovered over) have to much space in between them. Lastly if you click on one of the nav options it will take you to a page containing a slide deck, that in IE is way to tall. I've been googling this for the past few hours trying to fix it. I know my page doesn't validate fully, but I can't find a good way to find and fix the errors since the each page is generated from wordpress and there are many different parts to each page. I'm about to go crazy, let me know if you can help. Thanks in advance.
http://www.buildingthemiddleclass.org
Look at your page code; you have this
<style type="text/css">
#headimg {
height: HEADER_IMAGE_HEIGHTpx;
width: HEADER_IMAGE_WIDTHpx;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
above the Doctype in header.php. Anything above the Doctype whacks IE. Fix that.
Related
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
Hi I'm having problem with a site in IE 10 Compatibility View (and in IE7 view as well, they are the same problem). Originally I have a background div behind the sidebar called .info-bg, and it's suppose to hide behind the sidebar .info-area, using position: absolute. However, in IE7, it looks like the background is not hidden. The only way to get it to hide is using position: static, which leaves an empty spot.
get the background to hide completely (like display none) is not an option because the right side loads more content as I scroll down. Which, without .info-bg just returns a blank space on the left. Live Site Link
maikelsabido's answer is valid but only covers half of the issue. There is no point to supporting IE10 while it is rendering as IE7. So few people do this (my statistics are based on JavaScript/DOM object detection, not the user agent and therefore are extremely reliable, my site triggers an error 9999 if you try forcibly overriding the rendering mode) so just don't bother with IE10 rendering as IE7. However to test IE7 you should keep a copy of XP in a virtual machine.
That being said while Microsoft did a very small update to clean things up in IE7 it still has numerous issues. You'll want to use an Internet Explorer Conditional Comment Style Sheet which I have a full tutorial on how to implement at my site here...
http://www.jabcreations.com/web/css/ieccss
Once you've implemented an IECCSS for IE7 you don't need to use any hacks, just position it for IE7 specifically.
That being said your page layout doesn't look like you need CSS level 2 positioning at all. Even IE 5.0 has respectable CSS level 1 support if you know how to do basic layouts correctly, but don't feel bad because besides my site I always see people jumping head-first in their tutorials to use position instead of float. So if you want much more stable CSS in general and limit positioning for SEO purposes I recommend reading my CSS level 1 tutorial here as well...
http://www.jabcreations.com/web/css/nested-divisible-elements
If you do that it will limit your need to use CSS level 2 position. With your layout the only thing I was use position for is to keep the content at the top of the body element and then put the menus below the content in the code...and then use position to visually put the menus where they are on the page. If you disable CSS (e.g. Firefox's Web Developer toolbar does this easily or Firefox --> View [menu] --> Page Style [menu] --> No Style) that is how a search engine sees your page.
Also you really should fix your header elements. You have two h4 and then several h2 elements. You want to think of your page like a newspaper, yours currently has nothing about winning the war using h1 but at the top of the front page the most important story is h4 saving a cat from a tree in a retirement home. Understanding the semantics of HTML can be a powerful tool in combination with search engines in getting more people to find your site because you've made it easier for the search engine to understand the semantics of your content.
I hope this helps and if you have any other questions feel free to ask.
Add style rule position:relative to wraper id main-wrap like
#main-wrap{
position:relative;
}
and the add the following CSS to the ".info-bg" div
.info-bg{
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
height: 600px; /* change according to your need */
box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);
}
Further you can check out this page to know how z-index property actually works - http://www.tutorialrepublic.com/css-tutorial/css-layers.php
I fixed the issue you highlighted in IE7. But I need you to see this gist https://gist.github.com/anonymous/6607075 and try it on your side.
It's quite hard to fix on my side because I don't have your Wordpress theme.
Anyway, with regards to the gist (https://gist.github.com/anonymous/6607075 )
For the css, look at the code at line 108. For the #info-wrapper
For the html, at line 94, I added a <div id="info-wrapper">
See if this fix the issue? If not, let me know in the comments.
--
Edit: You can download the files that I did test in IE7, here at wetransfer
You can put this on the section of your website:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This will disable the Compatibility mode and stop messing your site.
I am trying to resolve an issue with an image slider in IE9.
Please see http://betelec2.placeneuve.com/index.html
The same page is rendered using php at http://betelec2.placeneuve.com/index.php and it works fine, but the load time is slow, so the home page has been "recreated" using static content with the .html file extension.
The site is htpassword protected and the username and password are placeneuve and patali123 respectively.
The issue I am having is that in IE9, the slider is disregarding the list styles. It is displaying the images stacked one above the other (rather than in a row with overflow hidden) and it is using default unordered list styles (with bullets). Furthermore, it is ignoring the positioning of the text overlay. Finally, it is doing the same thing to the image thumbnails that appear below the slider.
If you look at the site in Chrome, FF or Safari, it works without a glitch.
IE9's developer tools are not very useful, at least for me, and I am a bit lost as to how to resolve this.
Unfortunately, I received this site from someone else who had concatenated and minified the CSS and didn't provide the original CSS, so finding the selectors is pain as well. However, the relevant CSS selectors start with .rg-ss-
Anyone able to assist would be most appreciated.
Use following:
.fatfooter2 ul li {
list-style: none outside none;
margin-bottom: 0;
display: inline; /* display inline should put your list items in line *\
}
http://philliesnation.com/
I am currently debugging this site for Internet Explorer and am running into two issues:
In IE7/8/9 at the bottom of each post there is a "Filed Under:" section that has a ul set at 200px wide. But for some reason in IE it is being shrunk down to 50px by adding an inline style to each li item. Therefor, the section shows up vertical instead of horizontal. In FF/Ch/Saf it looks fine.
In IE7 the main navigation is not properly working. If you scroll over nav points you get a dropdown with more information, but on on three tabs: News/Features/Multimedia these dropdowns dont work at all.
I did not build this site but am helping to debug it and have been trying for numerous hours on end to figure out why these bugs occur. Any help is much appreciated.
To fix your first issue: In your func.js you have the following line:
if( $.browser.msie ) {
$('.post-links ul li').css({ 'width' : '50px' });
};
Thats whats messing up the width of your "File Under.." section in IE. Remove that and all is well (i see no reason why to keep it).
For your second issue: I can't quite diagnose the problem because your site keeps freezing my IE browser (it's so heavy!!) but from what i can tell your nav script is not firing in IE correctly, so you're going to have to force it with some conditional comments in the header of your document, like so:
<!--[if lt IE 9]>
#navigation li:hover .dd-menu {
display: block;
}
<![endif]-->
I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.