If you view this page: http://www.sussexjewelers.com/product_search.php?cid=69
The drop down menus (horizontal green bar) do not drop down in ie7. They do drop down in ie6, firefox, and chrome. Also if you view the homepage the same drop downs DO work in ie7. I cannot figure out why they are not working on this page in ie7. They are pure CSS drop down menus.
Any help is appreciated.
Thanks!
You have a bunch of style and script tags before the actual HTML document. Those should be in the head tag of the page.
The doctype tag has to be the first tag in the source, otherwise IE will render the page in quirks mode. Other browsers may also render it in quirks mode, but it makes a lot more difference for IE. One big difference is that the box model is handled incorrectly.
Once you get the basic structure of the code correct, you should validate the html, and the css to see if there are more problems in the code. I can see right away that you have an HTML doctype but you are using XHTML tags in the code.
If the menues still doesn't work after cleaning up the code, I would guess that it's a problem with the z-index so that the menues show up but is hidden behind the main content. IE doesn't handle z-index correctly for elements that has layout.
Your <style> and <script> tags should be inside your <head> tag, not outside your <html> tag.
Also add a DOCTYPE
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Take your pick.
TonyF is right. In the future, try running this in your URL bar to see if you're actually in Standards Mode (CSS1Compat) vs Quirks Mode (BackCompat):
javascript:alert(document.compatMode)
I have that in a bookmarklet in IE.
Related
I've been spinning my head for 2 days trying to find out why my site looks so messy in IE8, and 9. It looks fine in Chrome and Firefox. I need help, I can't find the CSS issue...
http://tytonsound.com/ is the web site.
In IE, there's some scripts that aren't being noticed. (Like the nav bar). In addition, the nav bar is off center, and shifts down a little.
Please let me know if you notice anything that would be causing the site to be off center.
You're missing a doctype which is causing IE to render your site in Quirks Mode.
If you're using any HTML5 you should place <!doctype html> at the top of your file (make sure nothing precedes this, not even white space) otherwise use an XHTML or HTML 4 doctype.
You are lacking !DOCTYPE element before your html tag (IE is very picky about this)
http://www.w3.org/TR/xhtml1/#dtds
Look through the different types for xhtml and decide which fits your needs.
Example:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html ...>
...
My website is not rendering properly in IE browser and in other browsers like chrome, safari and firefox it displays fine. I am not sure if any div has a problem or is it the style sheet.
Below is the url for which I am talking about:
http://unyforme.com/demo/
Not sure what is causing the bad layout in IE.
Please advise if any one finds a clue and/or point out some thing for me?
Your DOCTYPE must must must be the first line, or IE renders in quirks mode.
Remove everything before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Also, to make the site load significantly quicker, move all your javascript to the bottom, just before the end of your body tag.
For one reason or the other IE8 is not displaying my webpage properly. It works on every other major browser but everything is helter-skelter when I try to open the page on IE8 and since majority of the users of this page primarily use IE8, I cannot ignore it. Here's the link to it: http://www.gradschool.purdue.edu/gradexpo/mailinglist/
You haven't set a doctype. Put this at the very top of your page:
<!DOCTYPE html>
IE put itself into 'quirks' or Compatibility mode when it doesn't see a doctype, which will mess up your layout. Specifying a doctype will kick it into Standards mode which will remedy most problems. IE is still pretty useless at rendering CSS properly, so you might still have some issues.
Note you could also use the HTML 4.01 Strict doctype, but this will give the same result:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
get a doctype at the top of your html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
then run it through http://validator.w3.org
and fix other errors
In addition to the critical error of a missing doctype as others have pointed out, you have a few serious HTML errors.
W3C Validation
You have repeated your closing tags for </body> and </html>. You also have a couple unused closing div tags, </div>. All of the meta tags in your <body> need to be moved to within the <head> section. Browsers will handle these kinds of errors with unpredictable rendering.
The page not working in IE8 is http://gainntrain.com/shopping/index.php
It IS working chrome and firefox...
This page loads from CubeCart, but the page I edited to alter the skin http://gainntrain.com/shopping/skins/KitaBlue/styleTemplates/global/index.tpl
That page has the same problem in IE8
The thing I don't understand is that the same header works fine on other pages of the site in IE8
Changed the <header> and <nav> tags to divs with classes using the styles that the tags had and that seems to be handling it just fine so thanks for the answers!
Look at
Validator
and
Jigsaw
Notice that the only errors in Jigsaw are CSS3 rules.
I would suggest looking at the HTML because of this line in Validator's analysis of your page
Line 11, Column 107: end tag for "link" omitted, but OMITTAG NO was specified
…="http://www.gainntrain.com/site/css/style.css" type="text/css" media="screen">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
It looks like your document is using HTML5 features but is using an older doctype declaration. I would suggest changing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to:
<!doctype html>
<html>
That is as long as it doesn't break the site. :]
Try an online HTML validator on the output, like this one. If you choose the right validator, it's likely to be able to pick out the sticky bits that work better in some browsers than others. Sifting through code by hand to find a solution like this is difficult and time-consuming.
I've had 2 people looking at this all morning, and I can't seem to figure out why IE 8 and 7 is pushing my entire page over to the left. Not having any issues in any other browsers. There is also an problem with the menu, it doesn't seem to work on this page either. Can anyone spot what is going on here? Any help would certainly be appreciated.
http://wineexcursion.com/dev/index.php/event_info/event_schedule/
The comment at the top of the markup is forcing IE to render in Quirks mode, which is what is causing the problems. In IE, if anything precedes the doctype in the markup, it triggers Quirks mode rendering.
From the page source:
<!-- Brown Callout/Brown Sidebar -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
If I use IE dev tools to force the page into standards mode, the page centers as it should and the menu works.