I have created css template that is working fine in mozilla but when i move to IE it is disording my design. what should i do to resolve problem.
hi, sending you the both html and css code and let me come to know where i need to change or where i was wrong. here is html code ============================================= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>NOW:design</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css/business.css" rel="stylesheet" type="text/css"> <link href="css/chromestyle.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="scripts/chrome.js"> </script> <script type="text/javascript"> <!-- window.onload=show; function show(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu1'+i)) {document.getElementById('smenu1'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> </head> <body> <div id="container"> <div id="topright"> <p> </p> <h4>Symbiosis Institute of Business Management</h4> <p> </p> </div> <div id="top"> <h2>SIBM</h2> <p align="center">logo goes here</p> </div> <div class="cl"></div> <div id="gallery"><img src="images/globe3t.gif" alt="Image of calculator" width="226" height="140"><img src="images/page_img_institute.gif" alt="Image of Laptop" width="226" height="140"><img src="images/page_img_newsroom.gif" alt="Image of network cable" width="221" height="140"></div> <div id="content"> <!-- <div id="menu"> <a href="#">Institute</a><a href="#">Admissions</a><a href="#">Corporates</a><a href="#"></a><a href="#">Alumni</a><a href="#">Placements</a> </div> --> <div class="chromestyle" id="chromemenu"> <ul> <li><a href="#" rel="dropmenu4">Institute</a> </li> <li><a href="#" rel="dropmenu1">Admission</a></li> <li><a href="#" rel="dropmenu2">Corporate</a></li> <li><a href="#" rel="dropmenu3">Alumni</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu4" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> <!--1st drop down menu --> <div id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> <!--2nd drop down menu --> <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com">MSNBC</a> <a href="http://news.bbc.co.uk">BBC News</a> </div> <!--3rd drop down menu --> <div id="dropmenu3" class="dropmenudiv" style="width: 150px;"> <a href="http://www.google.com/">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">MSN</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu") </script> <div id="pad"> <p><img src="images/team.jpg" alt="Team work" width="190" height="188" style="padding: 8px; padding-right: 0px;float:right; "></p> <p> </p> <h3> </h3> <h3>SIBM at a Glance</h3> <p>Established in 1978, SIBM is in its 29th year of service to the student community. It continues to be the flagship brand of Symbiosis and is recognized as one of the best Business Schools in India.</p> <p> </p> <p>In the year 1979, SIBM proved its pioneering self by becoming the only institute in Pune to organize a seminar outside the city precincts - in Mumbai. Soon the trend was set and others followed suit.<BR> </p> </div> </div> <div id="news"> <h1>Newsroom</h1> <p>Recent SIBM news goes here. A brief of the news will be displayed here, which will have a continuation link at the bottom and will take the user to another link.</p> <div id="menu1"> <dl> <dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt> </dl> <dl> <dt onmouseover="javascript:show('smenu11');">Research @ SIBM</dt> <dd id="smenu11" onmouseover="javascript:show('smenu11');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 1.1</a></li> <li><a href="#">sub-menu1 1.2</a></li> <li><a href="#">sub-menu1 1.3</a></li> <li><a href="#">sub-menu1 1.4</a></li> <li><a href="#">sub-menu1 1.5</a></li> <li><a href="#">sub-menu1 1.6</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:show('smenu12');">Student Council</dt> <dd id="smenu12" onmouseover="javascript:show('smenu12');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 2.1</a></li> <li><a href="#">sub-menu1 2.2</a></li> <li><a href="#">sub-menu1 2.3</a></li> <li><a href="#">sub-menu1 2.4</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:show('smenu13');">menu1 3</dt> <dd id="smenu13" onmouseover="javascript:show('smenu13');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 3.1</a></li> <li><a href="#">sub-menu1 3.2</a></li> <li><a href="#">sub-menu1 3.3</a></li> <li><a href="#">sub-menu1 3.4</a></li> <li><a href="#">sub-menu1 3.5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:show('smenu14');">menu1 4</dt> <dd id="smenu14" onmouseover="javascript:show('smenu14');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 4.1</a></li> <li><a href="#">sub-menu1 4.2</a></li> <li><a href="#">sub-menu1 4.3</a></li> </ul> </dd> </dl> </div> </div> <!-- this MUST remain intact, contact www.now-design.co.uk | info@now-design.co.uk if you wish to remove it! thanks! --><div id="footer"> <p> </p> <p> </p> </div> <!-- this MUST remain intact, contact www.now-design.co.uk | info@now-design.co.uk if you wish to remove it! thanks! --> </div> </body> </html> ============================================ and here is the css code ============================================== body { font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; font-size: 80%; } #container { width: 900px; margin: 0px auto; } #top { color: #FFFFFF; width: 221px; height: 140px; background-color: #778CB3; } #topright { float: right; height: 140px; width: 447px; text-align: right; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: none; border-top-color: #0000CC; border-right-color: #0000CC; border-bottom-color: #0000CC; border-left-color: #0000CC; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; } .cl { clear:both; } #gallery { width: 673px; padding-top: 5px; } #news { width: 216px; height: 354px; margin-top: 5px; background-color: #778CB3; color: #FFFFFF; padding: 4px; } #menu { width: 643px; background-color: #F7CB33; padding: 13px; border-bottom: 5px solid #FFFFFF; float: right; } #menu a:link, #menu a:visited, #menu a:active { background-color: #F7CB33; padding: 13px; text-decoration: none; color: #000000; } #menu a:hover { padding: 13px; background-color: #F01E1E; text-decoration: none; color: #FFFFFF; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu1 { position: absolute; top: 469px; left: 47px; height: 375px; } #menu1 { width: 223px; w\idth: 223px; } #menu1 dt { cursor: pointer; margin: 2px 0;; height: 20px; line-height: 20px; text-align: center; font-weight: bold; border: 1px solid gray; background: #ccc; padding-right: 10px; } #menu1 dd { border: 1px solid gray; } #menu1 li { text-align: center; background: #fff; } #menu1 li a, #menu1 dt a { color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; } #menu1 li a:hover, #menu1 dt a:hover { background: #eee; } #content { width: 446px; float: right; height: 380px; margin-top: none; background-color: #A0AFCB; padding-right:2px; } p { margin: 0 0 0 0px; } h1 { padding: 4px; margin: 4px; font-size: 120%; font-weight: bold; color: #FFFFFF; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #F7CB33; } h2 { text-align: center; font-size: 300%; font-weight: normal; color: #FFFFFF; } #pad { padding: 12px; background-color: #9999CC; color: #000000; width: 645px; height:300px; float: right; } #footer { background-color: #F7CB33; padding: 12px; float: top; width: 875px; color:#000000; font-size: 90%; text-align: center; clear:both; height:auto; border-top: none solid #FFFFFF; } #footer a:link, #footer a:active, #footer a:hover, #footer a:visited { color:#000000; } h4 { font-size: 180%; color: #F01E1E; } ========================== hope to get reply soon
here is ccs code ==================================== body { font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; font-size: 80%; } #container { width: 900px; margin: 0px auto; } #top { color: #FFFFFF; width: 221px; height: 140px; background-color: #778CB3; } #topright { float: right; height: 140px; width: 447px; text-align: right; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: none; border-top-color: #0000CC; border-right-color: #0000CC; border-bottom-color: #0000CC; border-left-color: #0000CC; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; } .cl { clear:both; } #gallery { width: 673px; padding-top: 5px; } #news { width: 216px; height: 354px; margin-top: 5px; background-color: #778CB3; color: #FFFFFF; padding: 4px; } #menu { width: 643px; background-color: #F7CB33; padding: 13px; border-bottom: 5px solid #FFFFFF; float: right; } #menu a:link, #menu a:visited, #menu a:active { background-color: #F7CB33; padding: 13px; text-decoration: none; color: #000000; } #menu a:hover { padding: 13px; background-color: #F01E1E; text-decoration: none; color: #FFFFFF; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu1 { position: absolute; top: 469px; left: 47px; height: 375px; } #menu1 { width: 223px; w\idth: 223px; } #menu1 dt { cursor: pointer; margin: 2px 0;; height: 20px; line-height: 20px; text-align: center; font-weight: bold; border: 1px solid gray; background: #ccc; padding-right: 10px; } #menu1 dd { border: 1px solid gray; } #menu1 li { text-align: center; background: #fff; } #menu1 li a, #menu1 dt a { color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; } #menu1 li a:hover, #menu1 dt a:hover { background: #eee; } #content { width: 446px; float: right; height: 380px; margin-top: none; background-color: #A0AFCB; padding-right:2px; } p { margin: 0 0 0 0px; } h1 { padding: 4px; margin: 4px; font-size: 120%; font-weight: bold; color: #FFFFFF; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #F7CB33; } h2 { text-align: center; font-size: 300%; font-weight: normal; color: #FFFFFF; } #pad { padding: 12px; background-color: #9999CC; color: #000000; width: 645px; height:300px; float: right; } #footer { background-color: #F7CB33; padding: 12px; float: top; width: 875px; color:#000000; font-size: 90%; text-align: center; clear:both; height:auto; border-top: none solid #FFFFFF; } #footer a:link, #footer a:active, #footer a:hover, #footer a:visited { color:#000000; } h4 { font-size: 180%; color: #F01E1E; } ======================= and here is the html code ========================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>NOW:design</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css/business.css" rel="stylesheet" type="text/css"> <link href="css/chromestyle.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="scripts/chrome.js"> </script> <script type="text/javascript"> <!-- window.onload=show; function show(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu1'+i)) {document.getElementById('smenu1'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> </head> <body> <div id="container"> <div id="topright"> <p> </p> <h4>Symbiosis Institute of Business Management</h4> <p> </p> </div> <div id="top"> <h2>SIBM</h2> <p align="center">logo goes here</p> </div> <div class="cl"></div> <div id="gallery"><img src="images/globe3t.gif" alt="Image of calculator" width="226" height="140"><img src="images/page_img_institute.gif" alt="Image of Laptop" width="226" height="140"><img src="images/page_img_newsroom.gif" alt="Image of network cable" width="221" height="140"></div> <div id="content"> <!-- <div id="menu"> <a href="#">Institute</a><a href="#">Admissions</a><a href="#">Corporates</a><a href="#"></a><a href="#">Alumni</a><a href="#">Placements</a> </div> --> <div class="chromestyle" id="chromemenu"> <ul> <li><a href="#" rel="dropmenu4">Institute</a> </li> <li><a href="#" rel="dropmenu1">Admission</a></li> <li><a href="#" rel="dropmenu2">Corporate</a></li> <li><a href="#" rel="dropmenu3">Alumni</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu4" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> <!--1st drop down menu --> <div id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> <!--2nd drop down menu --> <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com">MSNBC</a> <a href="http://news.bbc.co.uk">BBC News</a> </div> <!--3rd drop down menu --> <div id="dropmenu3" class="dropmenudiv" style="width: 150px;"> <a href="http://www.google.com/">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">MSN</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu") </script> <div id="pad"> <p><img src="images/team.jpg" alt="Team work" width="190" height="188" style="padding: 8px; padding-right: 0px;float:right; "></p> <p> </p> <h3> </h3> <h3>SIBM at a Glance</h3> <p>Established in 1978, SIBM is in its 29th year of service to the student community. It continues to be the flagship brand of Symbiosis and is recognized as one of the best Business Schools in India.</p> <p> </p> <p>In the year 1979, SIBM proved its pioneering self by becoming the only institute in Pune to organize a seminar outside the city precincts - in Mumbai. Soon the trend was set and others followed suit.<BR> </p> </div> </div> <div id="news"> <h1>Newsroom</h1> <p>Recent SIBM news goes here. A brief of the news will be displayed here, which will have a continuation link at the bottom and will take the user to another link.</p> <div id="menu1"> <dl> <dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt> </dl> <dl> <dt onmouseover="javascript:show('smenu11');">Research @ SIBM</dt> <dd id="smenu11" onmouseover="javascript:show('smenu11');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 1.1</a></li> <li><a href="#">sub-menu1 1.2</a></li> <li><a href="#">sub-menu1 1.3</a></li> <li><a href="#">sub-menu1 1.4</a></li> <li><a href="#">sub-menu1 1.5</a></li> <li><a href="#">sub-menu1 1.6</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:show('smenu12');">Student Council</dt> <dd id="smenu12" onmouseover="javascript:show('smenu12');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 2.1</a></li> <li><a href="#">sub-menu1 2.2</a></li> <li><a href="#">sub-menu1 2.3</a></li> <li><a href="#">sub-menu1 2.4</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:show('smenu13');">menu1 3</dt> <dd id="smenu13" onmouseover="javascript:show('smenu13');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 3.1</a></li> <li><a href="#">sub-menu1 3.2</a></li> <li><a href="#">sub-menu1 3.3</a></li> <li><a href="#">sub-menu1 3.4</a></li> <li><a href="#">sub-menu1 3.5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:show('smenu14');">menu1 4</dt> <dd id="smenu14" onmouseover="javascript:show('smenu14');" onmouseout="javascript:show('');"> <ul> <li><a href="#">sub-menu1 4.1</a></li> <li><a href="#">sub-menu1 4.2</a></li> <li><a href="#">sub-menu1 4.3</a></li> </ul> </dd> </dl> </div> </div> <!-- this MUST remain intact, contact www.now-design.co.uk | info@now-design.co.uk if you wish to remove it! thanks! --><div id="footer"> <p> </p> <p> </p> </div> <!-- this MUST remain intact, contact www.now-design.co.uk | info@now-design.co.uk if you wish to remove it! thanks! --> </div> </body> </html> ===========
I'd trash that non-semantic code and start over from scratch, then tell the person who wrote it to either learn how to write proper HTML or get a regular day job. Given that you are using images in this template, can you link me to a LIVE version of this page so I can re-write this without screwing anything up? (I work best with a visual reference.)
I'd do what the guy above said, scrap it. But thats harsh to say the rest. People have to start somewhere. Learn how to make your code XHTML strict, or even transitional. Then there should be minimal problems between browsers. There are also IE hacks you can use to make it look the same using css.
When I re-write something like this, I often include a tutorial explaining how I did it so that others can learn how to avoid such tag soup in the future.
really? Got any of these tutorials I could check out? Just like to see what kind of thing you mean really.
There's one (with an update) in this thread, though the coding practice is not what I'd do nowadays (I wouldn't use the H1 tag as the site title anymore). http://forums.digitalpoint.com/showthread.php?p=2619952