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]-->
Related
My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.
I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)
header .logo img.standard {
display: none;
vertical-align: middle;
}
The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?
The difference in layout is because Firefox is not honouring the 30px padding on your body element. Firefox seems to be ignoring that.
The problem is highly likely to be the dreaded Quirks Mode.
Many browsers will put the page into quirks mode if the site does not begin with a valid Doctype. The problem with quirks mode is that it works differently in different browsers.
Your page does have a doctype, but importantly, it is not the first thing in the page, and that is why it is going into quirks mode -- you have some rogue CSS and javascript tags before it; these need to be moved into the <head> section of your page.
Fixing this will definitely solve the problem as far as IE is concerned. It will probably solve the problem for Firefox.
Hope that helps.
The problem comes from this css file:
Last row of this file is:
body { margin:0; padding:30px 0 0; }
if you delete the padding you'll have the same appearance with Firefox.
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 *\
}
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
I am working on a webiste http://www.kerin.net/who.cfm but its top menu is not format well in IE7.0 but it well in all ather browser .
Can anybody please suggest me some ways to rectify this problem.
First you have a table based layout. No wonder if any one will even try to help you. Table based layout is a big "NO NO" in modern web development. Not that I am against it.
To fix the issues, do as follows.
div.menu
{
width: 50px; /*you can have any width you like here */
}
It is not clear from you question that how are you testing in IE7. I tested it using the IE7 mode in IE9 from the web development toolbar and fixes the issue. The broken layout of the top menu is fixed and they sit along each other, same as in IE9 on windows 7.
If you are going to ask any further question as to why it is so or if it is a bug, I honestly dont't know. Your code is so messed up, it will take quite some time to dig in there. The same results can be achived using simpler markup. nav element in HTML5 and div element with nested ul and li elements in HTML/XHTML lower than 5. You current code goes like
div.sidemenu1 > div.menu > ul > li > div.nav-text > ................ and so on
A bloody management nightmare. You really should try to simplify your markup.
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.