HTML5 Posted August 16, 2010 Share Posted August 16, 2010 I have a question why does this code not work in IE but does work in Firefox and Chrome? Using Webs as a host <!--THE DOCTYPE: Required to be able to validate your XHTML pages. It tells the browser what your page is.--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <!--HEAD: This is where you put content that is not visible on the page--> <head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <!--TITLE: The page's title. Appears in the tab on your browser--> <title>RoadRanger</title> <!--LINK: Provides a link to the CSS page which gives all the formatting to this page. Everything would be a MESS without it--> <link rel="stylesheet" type="text/css" href="blog.css" /> </head> <!--BODY: All the visible content goes in here--> <body> <!--My master div the whole page would go amuck without this ID: Provides an unquine id for this div a CSS rule applies to this.--> <div id="master"> <!--My header where my title goes also has it's own id--> <div id="header"> <!--H1: My title SUP: Creates super-text--> <h1>ROADRANGER<sup>Blog</sup></h1> </div> <!--My navagation menu--> <div id="menu"> <!--UL: This is a ordinary list but transformed in a working navagational menu all by CSS--> <ul> <li><a href="index.html">Blog</a></li> <li>Pictures <ul> <li><a href="ont.html">Ontario</a></li> <li><a href="qbc.html">Quebec</a></li> <li><a href="nbk.html">New Brunswick</a></li> <li><a href="nvs.html">Nova Scotia</a></li> <li><a href="pei.html">P.E.I</a></li> <li><a href="nfl.html">Newfoundland</a></li> </ul> </li> <li>Videos <ul> <li><a href="vont.html">Ontario</a></li> <li><a href="vqbc.html">Quebec</a></li> <li><a href="vnbk.html">New Brunswick</a></li> <li><a href="vnvs.html">Nova Scotia</a></li> <li><a href="vpei.html">P.E.I</a></li> <li><a href="vnfl.html">Newfoundland</a></li> </ul> </li> </ul> </div> <!--My sub header where the HTML and CSS validator links are--> <div id="sub"> <!--Displays the picture link to the HTML Validator by W3C--> <a href="http://validator.w3.org/check?uri=referer"><img src="w3c.png" alt="Valid XHTML 1.0 Strict" /></a> <!--P: A paragraph--> <p>Our blog about our travels!</p> <!--Displays the picture link to the CSS Validator by W3C--> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="css.png" alt="Valid CSS" id="cssvp" /></a> </div></div></body></html> The CSS for it is: body { background-image: url("bg.png"); background-repeat: repeat-x; } /* The div that encloses the entire webpage NOTE: */ #master { width: 800px; margin-left: auto; margin-right: auto; clear: both; } /* The title section NOTE: */ #header { position: absolute; top: 0px; width: 800px; text-align: center; clear: both; }#header h1 { font-family: fantasy; font-size: 50px; margin: 0px; } #header sup { font-family: cursive; font-size: 20px; margin: 0px; } /* Navagation menu section NOTE: */ #menu { width: 800px; position: absolute; top: 85px; z-index: 1; } /* The navagation menu itself NOTE: Add an Experment section? */ #menu ul { margin-left: 152px; margin-right: 152px; } #menu li { list-style-type: none; border: black 1px solid; width: 150px; text-align: center; background-color: #888888; float: left; } #menu a { text-decoration: none; color: #000000; display: block; } #menu a:hover { background-color: #444444; color: #FFFFFF; }#menu li ul { display: none; margin-left: -2.5em; } #menu li:hover > ul { display: block; } #menu li li li { margin-left: 10px; } /* The section below the navagation menu NOTE: Needs better centering */ #sub { width: 800px; position: absolute; top: 150px; text-align: center; } #sub img { float: left; border: 0; margin: 10px; width: 100px; height: 35px; } #sub p { float: left; margin-left: 180px; margin-right: 180px; width: 200px; } It works just fine when I run it from notepad++ in IE, Firefox, and Chrome.My guess is that it's an problem with the Host.This code is not all the code in my webpage just the part that is having troubleMy XHTML and CSS validates in the W3C validator Link to comment Share on other sites More sharing options...
ApocalypeX Posted August 16, 2010 Share Posted August 16, 2010 It would be nice if you told us WHAT isn't working... Link to comment Share on other sites More sharing options...
HTML5 Posted August 16, 2010 Author Share Posted August 16, 2010 Opps sorry I thought I did, The navigation menu is the one experiencing the problems Link to comment Share on other sites More sharing options...
thescientist Posted August 16, 2010 Share Posted August 16, 2010 what kind of problems? Link to comment Share on other sites More sharing options...
Howdy_McGee Posted August 16, 2010 Share Posted August 16, 2010 From what it looks, his dropdown menu isn't working in Internet Explorer - also his content isn't centered in IE. strange... Yeah i'm a little stumped on this too - It's like IE isn't taking the "li:hover" (which wouldn't surprise me) but even if I put the list items (pictures/videos) into anchor tags and hover it that way; it disables the hover effect altogether. Strange. Link to comment Share on other sites More sharing options...
HTML5 Posted August 16, 2010 Author Share Posted August 16, 2010 What the exact problem is:The navigation menu shows on all browsersThe link to Blog worksBut Pictures and Videos will not drop down to reveal links to Ontario, Quebec, etc in IEbut the funny thing is when I run it from Notepad++ in IE it works.But when I run it from Webs (The host) it doesn't work in IE but works just fine in Firefox and ChromeHopefuly the problem is clear nowI've gone through the code and double checked and nothing seems to stick out. Link to comment Share on other sites More sharing options...
dink Posted August 17, 2010 Share Posted August 17, 2010 I googled it and found it is an IE quirk. IE does not always understand the css even if it is valid.There are work arounds suggested but I have yet to get them to work on your code.dink Link to comment Share on other sites More sharing options...
Ingolme Posted August 17, 2010 Share Posted August 17, 2010 It sound silly but I belileve this this comment is triggering quirks mode in Internet Explorer: <!--THE DOCTYPE: Required to be able to validate your XHTML pages. It tells the browser what your page is.--> Link to comment Share on other sites More sharing options...
dink Posted August 17, 2010 Share Posted August 17, 2010 I believe you are correct. I removed the comment and it works fine. I for one am grateful to know the answer to this.Thanks!dink Link to comment Share on other sites More sharing options...
HTML5 Posted August 17, 2010 Author Share Posted August 17, 2010 really? i'll have to see if that is really what's going on be right back.Edit:Wow you're right I wonder why it messed up in IE.Thanks Ingolme and dink! Link to comment Share on other sites More sharing options...
ApocalypeX Posted August 17, 2010 Share Posted August 17, 2010 lol IE fails so hard. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.