http://www.newpathwaysretreat.com
I have been informed that this site is not working properly with IE8, the navigation bar is not showing up and the links which normally go across horizontally are now just an unstyled list in the top left corner.
Any help would be appreciated!
thanks
The navigation bar's styles are wrapped in #media screen which IE8 and below basically do not understand.
The <nav> tag isn't supported in IE8.
http://www.w3schools.com/tags/tag_nav.asp
Basically if a tag was added in HTML5 assume that IE8 isn't going to support it. That's part of the reason there's an IE9.
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I am pretty good with css, but can't figure out why my menu is being destroyed by IE7. Looks perfect in all other browsers I tested. First image link is correct. Second image link is how it looks in IE7.
http://www.asingularcreation.com/Forums/download/file.php?id=8368&mode=view/ie8+.jpg
http://www.asingularcreation.com/Forums/download/file.php?id=8367&mode=view/ie7.jpg
Here is the page: http://www.asingularcreation.com/calls-to-artists.php. Any help would be greatly appreciated.
You do not need to float (or clear) the menu container. It looks like it is causing IE7 to calculate the width incorrectly which forces the menu to flow down, underneath the sub-menu.
<div style="height:40px; line-height:40px; float:left; clear:both"><!--Main Menu --></div>
Removing the float and clear properties fixes the display in IE7 and also still works in Chrome and IE8 and IE9.
There is a lot of inline styles in the example page so I would also look at moving the CSS into an external file if possible.
I have some css used on a wordpress site. It looks as it should in chrome/safari etc but typically not correct in IE8.
The div has a background colour and moz-border-radius used for the border.The border is not important however the background colour only extends part of the way, or in the case of IE8, not at all.
Example: http://mesirow.btg340.co.uk
If you see the newsletter signup form midway down the page, in Chrome etc it has a nice blue background coupled with the border. However in IE its just showing as a white background and ignoring most of the styling.
If you then view: http://mesirow.btg340.co.uk/industries/airlines/
The newsletter signup is on the right hand sidebar. In IE8 the background only stretches half way?
This is no doubt css related. Ive tried various changes such as using fixed height etc but so far no luck :(
Any help is appreciated.
You have used <aside> tag that's why it's an Invalid Markup for IE 8
Using html5 markup in ie8/7 is causing the problem.
If you use http://modernizr.com/ it comes with an html5 shiv and should allow for html5 tags in ie7/8..
Finally i solve this question...:)
please check your html code
<aside id="wpmlwidget-2" class="wpmlwidget">....</aside>
please replace your aside code with div this will work..aside code not supported in ie-8.
<div id="wpmlwidget-2" class="wpmlwidget">....</div>
and for border radius in ie-7 or ie-8 possible via java script check this link http://davidwalsh.name/css-rounded-corners
If you look at the menu for this site: http://writershore.com/ltlaw/
The menu looks great in Firefox, Chrome, etc, but in IE7 the menu drop downs don't break through the nested DIVs.
Is this an overflow issue? A z-index issue? I've tried variations of both and doesn't fix the result in IE.
Thanks for any ideas!
The HTML code is broken. For starters you have two <html> tags. This will make the page render in quirks mode, which makes a dramatic difference for IE.
Fix the obvious errors in the html, then validate the page to see if there are any more problems in the code.
IF form elements or boxes are showing over top of the DIVs such as calendar popups it's not a bug in the javascript - it's a bug/feature of browsers. See this explanation