Hey Friends am working on a site with css and am constantly having this problem both with IE and FF. plzz some one help me plzz. Am enclosing both Live demo page and the zipped files of the site also. Plz some one help me plzz. Heres My CSS : body { background-image: url(../images/background.gif); background-repeat: repeat; margin: 0px; padding: 0px; } #topnav{ background-image: url(../images/topnav.jpg); background-repeat: repeat-x; width: 760px; height: 25px; } #headder{ background-image: url(../images/Header.jpg); background-repeat: no-repeat; height: 267px; width: 760px; } #middlenav{ background-image: url(../images/middlenav.jpg); background-repeat: repeat-x; height: 54px; width: 760px; } #maincontentholder{ background-color: #99FF00; width: 760px; background-image: url(../images/maincontent.jpg); background-repeat: repeat-y; } #wrapper { width: 760px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #000000; } #leftcontent { text-align: justify; padding: 0px; height: auto; float: left; width: 175px; } #rightcontent{ width: 585px; float: right; height: 100px; } .sideheading { width: 173px; font: normal bold 12px/12px Verdana, Arial, Helvetica, sans-serif; color: #DBB25A; background-color: #4C4129; text-align: center; border: 1px solid #BAA77F; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; } .navbar { height: 273px; width: 175px; background-color: #4C4129; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } .calendar1 { width: 173px; margin-top: 10px auto 10px auto; border: 1px solid #66546C; } .main { width: 173px; border: 0; } .month { background-color: #4C4129; font: normal bold 12px verdana; color: #DBB25A; padding: 5px 0px 5px 0px; border: 1px solid #BAA77F; } .daysofweek { background-color: #000000; font: bold 10px verdana; color: #C5BDC8; } .days { font-size: 9px; font-family: verdana; color: #FFFFFF; background-color: #999966; padding: 2px; } .days #today{ font-weight: bold; color: #ff0000; } #sidecontent { z-index: 2; width: 173px; height: 200px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border: 1px solid #DBB25A; } .shoutcontainer { z-index: 2; width: 173px; height: 100px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border: 1px solid #DBB25A; } .centernav { width: 740px; font-weight: normal; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; background-color: #53452B; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .maintext{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #DBB25A; } Code (markup): Heres My HTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="required/raja.css" rel="stylesheet" type="text/css" /> <script type="text/JavaScript"> <!-- function mmLoadMenus() { if (window.mm_menu_1007124456_0) return; window.mm_menu_1007124456_0 = new Menu("root",130,16,"Arial, Helvetica, sans-serif",10,"#E4B95D","#CCCCCC","#4C4229","#333333","center","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_1007124456_0.addMenuItem("MCA Programme"); mm_menu_1007124456_0.addMenuItem("MBA Programme"); mm_menu_1007124456_0.fontWeight="bold"; mm_menu_1007124456_0.hideOnMouseOut=true; mm_menu_1007124456_0.bgColor='#555555'; mm_menu_1007124456_0.menuBorder=1; mm_menu_1007124456_0.menuLiteBgColor='#000000'; mm_menu_1007124456_0.menuBorderBgColor='#BBA880'; mm_menu_1007124456_0.writeMenus(); } // mmLoadMenus() function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <script type="text/javascript" src="required/basiccalendar.js"></script> <script language="JavaScript" src="mm_menu.js"></script> </head> <body onload="MM_preloadImages('images/Home_f2.jpg','images/History_f2.jpg','images/Courses_f2.jpg','images/Campus_f2.jpg','images/Library_f2.jpg','images/Profile_f2.jpg','images/cpmpliments_f2.jpg','images/Management_f2.jpg','images/guestbook_f2.jpg','images/feedback_f2.jpg')"> <script language="JavaScript1.2">mmLoadMenus();</script> <div id="wrapper"> <div id="topnav"></div> <div id="headder"></div> <div id="middlenav"> <div class="centernav"> <img src="images/princi.jpg" title="Principals Desk" width="77" height="25" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="3,4,77,26" href="#" title="Principals Desk" /> </map> <img src="images/divider.gif" width="13" height="25" /><img src="images/staff.jpg" title="Faculty & Staff" width="77" height="25" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="rect" coords="2,4,78,31" href="#" title="Faculty & Staff" /> </map> <img src="images/divider.gif" width="13" height="25" /><img src="images/departments.jpg" title="Departments" width="77" height="25" border="0" usemap="#Map3" /> <map name="Map3" id="Map3"> <area shape="rect" coords="4,5,88,45" href="#" title="Departments" /> </map> <img src="images/divider.gif" width="13" height="25" /><img src="images/events.jpg" title="Events" width="77" height="25" border="0" usemap="#Map4" /> <map name="Map4" id="Map4"> <area shape="rect" coords="2,5,77,27" href="#" title="Events" /> </map> <img src="images/divider.gif" width="13" height="25" /><img src="images/programmes.jpg" title="Programmes" name="image1" width="77" height="25" border="0" usemap="#Map5" id="image1" /> <map name="Map5" id="Map5"> <area shape="rect" coords="4,4,82,53" href="#" title="Programmes" onmouseover="MM_showMenu(window.mm_menu_1007124456_0,82,4,null,'image1')" onmouseout="MM_startTimeout();" /> </map> <img src="images/divider.gif" width="13" height="25" /><img src="images/photo.jpg" title="PhotoGallary" width="77" height="25" border="0" usemap="#Map6" /> <map name="Map6" id="Map6"> <area shape="rect" coords="4,4,80,42" href="#" title="Photogallary" /> </map> <img src="images/divider.gif" width="13" height="25" /><img src="images/site.jpg" title="Site Map" width="77" height="25" border="0" usemap="#Map7" /> <map name="Map7" id="Map7"> <area shape="rect" coords="3,4,74,41" href="#" title="Site Map" /> </map> </div> </div> <div id="maincontentholder"> <div id="leftcontent"> <div class="sideheading">Navigation</div> <div class="navbar"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="17" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="17" background="images/Navtopresidue.jpg"></td> </tr> </table></td> </tr> <tr> <td height="27" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="27"><img src="images/Home.jpg" title="Home" name="Home" width="175" height="27" id="Home" onmouseover="MM_swapImage('Home','','images/Home_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/History.jpg" title="History" name="History" width="175" height="24" id="History" onmouseover="MM_swapImage('History','','images/History_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/Courses.jpg" title="Courses" name="Courses" width="175" height="24" id="Courses" onmouseover="MM_swapImage('Courses','','images/Courses_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/Campus.jpg" title="Campus" name="Campus" width="175" height="24" id="Campus" onmouseover="MM_swapImage('Campus','','images/Campus_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/Library.jpg" title="Library" name="Library" width="175" height="24" id="Library" onmouseover="MM_swapImage('Library','','images/Library_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/Profile.jpg" title="Profile" name="Profile" width="175" height="24" id="Profile" onmouseover="MM_swapImage('Profile','','images/Profile_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/cpmpliments.jpg" title="Compliments" name="Cpmpliments" width="175" height="24" id="Cpmpliments" onmouseover="MM_swapImage('Cpmpliments','','images/cpmpliments_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/Management.jpg" title="Management" name="Management" width="175" height="24" id="Management" onmouseover="MM_swapImage('Management','','images/Management_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="24"><img src="images/guestbook.jpg" title="Guestbook" name="Guestbook" width="175" height="24" id="Guestbook" onmouseover="MM_swapImage('Guestbook','','images/guestbook_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="25" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="25"><img src="images/feedback.jpg" alt="Feedback" name="Feedback" width="175" height="25" id="Feedback" onmouseover="MM_swapImage('Feedback','','images/feedback_f2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td> </tr> </table></td> </tr> <tr> <td height="12" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="175" height="12" background="images/Navbottomresid.jpg"></td> </tr> </table></td> </tr> <tr> <td height="7" bgcolor="#323216"></td> </tr> </table> </div> <div class="sideheading">Calendar</div> <div class="calendar1"> <script type="text/javascript"> var todaydate=new Date() var curmonth=todaydate.getMonth()+1 //get current month (1-12) var curyear=todaydate.getFullYear() //get current year document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); </script> </div> <div class="sideheading">Search This site</div> <div class="sideheading">Shoutbox</div> <div id="sidecontent"> <iframe frameborder=0 src="http://www.ourcollege.org/shoutbox/floodbox.php" width="173" height="200" align="right"></iframe> </div> <div class="sideheading">Latest News</div> <div class="shoutcontainer"> <script type="text/javascript"> //specify path to your external page: var iframesrc="external.htm" //You may change most attributes of iframe tag below, such as width and height: document.write('<iframe id="datamain" src="'+iframesrc+'" width="173px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>') </script> </div> <div class="sideheading">Counter</div> <div class="maintext" id="rightcontent"><img src="images/star.gif" width="12" height="12" /> This site is Temporarily off for Maintenance <img src="images/star.gif" width="12" height="12" /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> </p></div> </div> <div class="clearit"> </div> </div> </div> </body> </html> Code (markup): Here is the Live Demo of the page : http://www.raja.supersoftz.com/rajaprob/rajaprobe.htm Here the zip file: http://www.raja.supersoftz.com/rajaprob.zip
Oh, gosh! Where to start? Your code is needlessly complicated, there's no need to use image maps if the image itself is the link and is just one button. And then all those tables! And the cells coming on top of each other! No wonder the browsers get confused. You'll have to clean up your code a lot before even getting into CSS issues. Or if you're going to use tables, use them sensibly. I'm not trying to be rude or anything, but writing clean, sensible code goes a long way to make debugging easy. Anyway, enough lecturing. You're not closing your <div id="leftcontent"> before opening <div id="rightcontent">, so the main text gets rendered inside that div. And all those map tags are messing up your navigation. If you must use them move them to the end of the document before closing the <body> tag. There may be other issues but try fixing up those two first and see what happens.
Your Not Rude at all and infact ithank u for ur promt reply. Am a novice in css and i started it on trail and error bases.can u help me further fixing my problem please? Thanks in advance Regards Raja