Alright, the funny thing about this is, i've been using adobe dreamweaver and testing the website in firefox offline. I publish the website online, and firefox is the only browser that does not seem to be working properly. my website is http://shalvey-h.com.au my footer div is being placed above and to the right of my main content divs. Then my flash menu isnt expanding to its full length like it is supposed to. I do not know how to fix it my coding is probably really messy and theres probably a few mistakes in it but its come out fine for me apart from these few things. my CSS code looks like this @charset "utf-8"; /* CSS Document */ html, body { height:100%; z-index:-9999; position:relative; } body { font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; height:100%; text-align:center; background-color:#000; z-index:1; } #container { margin-left:auto; margin-right:auto; z-index:2; height:100%; width:100%; position:inherit; padding:1px; } #innercontainer { width:1000px; height:100%; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom::0px; background-color:#000; padding-top:10px; padding-bottom:0px; text-align:center; position:relative; z-index:3; } #headercontainer { width:100%; height:150px; text-align:center; margin-left:auto; margin-right:auto; position:relative; } #menucontainer { width:100%; height:50px; text-align:center; margin-left:auto; margin-right:auto; position:relative; } #swfcontainer { position:relative; top:auto; left:auto; width:100%; height:40px; overflow:visible; text-align:center; margin-left:0; margin-right:auto; margin:0; padding:0; min-width:1000px; } #leftcontentcontainer { width:125px; min-height:625px; overflow:hidden; float:left; text-align:center; margin:0; margin-top:75px; padding:11.99px; position:relative; background-color:#000080; color:#FFF; } #maincontentcontainer { width:550px; min-height:625px; overflow:hidden; float:left; text-align:left; margin:0; margin-top:75px; padding:11.99px; position:relative; color:#FFF; background-color:#039; } #rightcontentcontainer { width:235px; min-height:625px; overflow:hidden; text-align:center; float:right; margin:0; margin-top:75px; padding:11.99px; position:relative; color:#FFF; background-color:#000080; overflow:hidden; } #footer { width:994px; height:20px; overflow:hidden; text-align:center justify; margin:0; color:#FFF; background-color:#009; position:relative; } .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix {display:inline-block;} /* Don't show IE (Mac) \*/ * html .clearfix {height:1%;} .clearfix {display:block;} Code (markup): I also have some basic background CSS coding and stuff but thats all working properly so i dont think it should be needed. anyway here comes the really messy part. my website design html code. I'm just going to give the whole thing because i have a feeling it may be something to do with the body of the container. here goes: <!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=utf-8" /> <title>Welcome</title> <link rel="stylesheet" href="CSS/container.css" type="text/css" /> <!--[if IE]> <link rel="stylesheet" href="CSS/containerie.css" type="text/css" /> <![endif]--> <script type="text/javascript" src="scripts/swfobject.js"></script> <script src="scripts/swfobject_modified.js" type="text/javascript"></script> <script src="scripts/swfobject_modified.js" type="text/javascript"></script> <script src="scripts/swfobject_modified.js" type="text/javascript"></script> <!-- Below is the javascript that edits the dropdown menu. This is only to embed it into the page, go to dropdown.xml if you need to edit the menu --> <script type="text/javascript"> dropdownXML = {}; var flashvars = {}; flashvars.folderPath = "flash/"; var params = {}; params.quality = "high"; params.scale = "noscale"; params.bgcolor = "transparent"; params.wmode = "transparent"; params.salign = "tc"; var attributes = {}; swfobject.embedSWF ("flash/dropdown2.swf", "dropdownDIV", "100%", "100%", "7.0.0", false, flashvars, params, attributes); </script> <!-- Below is the javascript that edits the side menu. This is only to embed it into the page, go to vmenu.xnk if you need to edit the menu --> <script type="text/javascript"> function changeSize(id, valueHeight) { document.getElementById(id).style.height = valueHeight + 'px';} </script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("flash/vmenu.swf", "vmenuDiv", "125", "400", "9.0.0", "scripts/expressinstall.as", flashvars, params, attributes); </script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("../../../flash/docmenu.swf", "docmenuDiv", "125", "200", "9.0.0", "scripts/expressinstall.as", flashvars, params, attributes); </script> <!-- Do not edit the coding here. This is to connect this webpage the the style sheets that create the theme. --> <link href="CSS/background.css" rel="stylesheet" type="text/css" /> <link href="CSS/borders.css" rel="stylesheet" type="text/css" /> <link href="CSS/heading.css" rel="stylesheet" type="text/css" /> </head> <!-- The head section has ended, body is where you edit your actual content. --> <!-- This is the main body, all coding goes here --> <body> <!-- Below is the main container, do not edit this unless you want to change the background --> <div id="container"> <img src="images/download.jpg" alt="lol" name="background" width="100%" height="100%" class="clearfix" id="background" style="padding:0; z-index:-10000; overflow:0; margin:0; top:0; left:0;"/> <!-- Below is the inner container, this projects the width of the content, only change this, if you want to change the width (make the entire website wider) --> <div id="innercontainer"> <!-- Below is the header and its containter. This contains the chifley college banner, edit this if you want to change the banner. --> <div id="headercontainer"> <img src="images/chifcoshal.jpg" width="1000px" height="150px"/> </div> <!-- Below is the dropdown menu and its container. This contains the flash dropdown menu. The menu is not edited from here, it is edited from dropdown.xml --> <div id="menucontainer"> <div id="Layer1" style="position: absolute; left:0px; top: auto; width: 1000px; z-index: 100; overflow-x: visible; overflow-y: visible; height: 520px;" onMouseOver="changeSize ( 'Layer1', '520')" onMouseOut="changeSize ( 'Layer1', '50')"> <div id="dropdownDIV"> </div></div> <!-- Below is the left content container. This contains the flash side menu for each webpage. --> <div id="leftcontentcontainer" class="border"> <p class="leftheader"> Links </p> <div id="vmenuDiv"> </div> </div> <!-- Below is the main content container. This is where you edit all of your text. This will be the most edited section. --> <div id="maincontentcontainer" class="border"> <p class="header"> Welcome </p> <p> <img src="images/school.jpg" width="550" height="350" alt="" align="middle" /></p> <p> Welcome to the Chifley College, Shalvey Campus Website. </p> <p> Please use the links to the left or above for more information about Chifley College Shalvey Campus. </p> </div> <!-- Below is the right hand side container. This is for the pictures and other dynamic material. This may be edited to be wider/smaller if necessary. --> <div id="rightcontentcontainer" class="border"> <img src="images/principal.jpg" width="176" height="246" /></div> <!-- Do not edit any coding below this point unless you have added new content and need to add a closing DIV container. --> <div id="footer" class="border"> Copywrite 2011 </div> </div> </div> </div> </div> </div> </body> </html> Code (markup): I really hope its just a small oversight. Thankyou in advance, if you are willing to help that is.
Take a look at all your divs and make sure you are closing them properly and in the right spot. It appears as if your footer div is being placed in your menucontainer div. Again check all divs and make sure they are being closed in the right spot. It appears you need to move one of the divs on the bottom of your code up to the menucontainer. Try that and let us know
BTW, it's copyright, not copywrite. (Not that you need a copyright notice, but if you did, yours isn't one. You're protecting your right to copy, not the fact that you wrote it.)
yeah i know, i wrote it incorrectly, will change it later, and i also know that, its just a placeholder for links and stuff later. It isnt patented or anything, it will be deleted when the school gives me the information to pt into there. Will try that when i have the opportunity to log into it, thankyou for the help.