SlickAU

Woops this was a mistake i made on the post itself...the code is actually seperate... Here is the CCS Code: #topnav { margin:0; padding:0; height:20px; width:100%; background-color:#87c8fb; z-index:1; } #navcontainer { margin-left:220px; float:left; z-index:1; position:relative; height:20px; } #navbox { width:120px; height:17px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-align:center; color:#FFFFFF; padding-top:2px; float:left; text-decoration:none; } #navbox:hover { background-color:#666666; border-bottom:1px solid #333333; border-top:1px solid #333333; color:#FFFFFF; } #navdrop { height:18px; width:120px; color:white; background-color:#87c8fb; padding-top:5px; margin-top:4px; visibility:hidden; } #navdrop:hover { color:#FFFFFF; background-color:#666666; } #navdrop1 { height:18px; width:120px; color:white; background-color:#87c8fb; padding-top:5px; border-bottom:1px solid #333333; visibility:hidden; } #navdrop1:hover { color:#FFFFFF; background-color:#666666; } #navdrop2 { height:18px; width:120px; color:white; background-color:#87c8fb; padding-top:5px; margin-top:4px; visibility:hidden; border-bottom:1px solid #333333; } #navdrop2:hover { color:#FFFFFF; background-color:#666666; } and here is the Javascript: Also here is the LIVE link for the page itself: http://www.theslick.com/portfolio/v2 Hope this clears it up a bit.. Thanks again, Slick

Yep, I sure did... Still havent found a solution to this problem

Hey dudes, I am in the final stages of finishing this drop down menu I have made using mainly div tags, javascript and css... It looks absolutely perfect in Firefox, but when you open it up in IE, the dropdown function does not work properly and the css doesn't kick in properly. ??? The Live address is: http://www.theslick.com/portfolio/v2 Here is the code for the page: <div id='topnav'> <div id="navcontainer"> <div id="navbox" onmouseover="dropdown('1')" onmouseout="drophide()">Application <div id="navdrop" onmouseover="dropdown('1')" onmouseout="drophide()"> <a href="database/" class="menuitem">Database</a> </div> <div id="navdrop1" onmouseover="dropdown('1')" onmouseout="drophide()"> <a href="#" class="menuitem">Frame Editor</a> </div> </div> <div id="navbox" onmouseover="dropdown('2')" onmouseout="drophide()">Websites <div id="navdrop2" onmouseover="dropdown('yes')" onmouseout="drophide()"> <a href="?p=websites" class="menuitem">View</a> </div> </div> <div id="navbox"><a href="?p=media" class="menuitem">Media</a> </div> <div id="navbox"><a href="?p=contact" class="menuitem">Contact</a></div> </div> </div> and here is the CSS: #topnav { margin:0; padding:0; height:20px; width:100%; background-color:#87c8fb; z-index:1; } #navcontainer { margin-left:220px; float:left; z-index:1; position:relative; height:20px; } #navbox { width:120px; height:17px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-align:center; color:#FFFFFF; padding-top:2px; float:left; text-decoration:none; } #navbox:hover { background-color:#666666; border-bottom:1px solid #333333; border-top:1px solid #333333; color:#FFFFFF; } #navdrop { height:18px; width:120px; color:white; background-color:#87c8fb; padding-top:5px; margin-top:4px; visibility:hidden; } #navdrop:hover { color:#FFFFFF; background-color:#666666; } #navdrop1 { height:18px; width:120px; color:white; background-color:#87c8fb; padding-top:5px; border-bottom:1px solid #333333; visibility:hidden; } #navdrop1:hover { color:#FFFFFF; background-color:#666666; } #navdrop2 { height:18px; width:120px; color:white; background-color:#87c8fb; padding-top:5px; margin-top:4px; visibility:hidden; border-bottom:1px solid #333333; } #navdrop2:hover { color:#FFFFFF; background-color:#666666; } and finally the JS (its pretty simple...): <script language="javascript" type="text/javascript"> function dropdown(number) { if (number == "1") { document.getElementById("navdrop").style.visibility = "visible" document.getElementById("navdrop1").style.visibility = "visible" } else if (number =="2") { document.getElementById("navdrop2").style.visibility = "visible"; } } function drophide() { document.getElementById("navdrop").style.visibility = "hidden" document.getElementById("navdrop1").style.visibility = "hidden" document.getElementById("navdrop2").style.visibility = "hidden" } </script> Any help would be much appreciated.... Thanks

Hey dudes, I am in the final stages of finishing this drop down menu I have made using mainly div tags, javascript and css... It looks absolutely perfect in Firefox, but when you open it up in IE, the dropdown function does not work properly and the css doesn't kick in properly. ??? Here is the code for the page: <div id='topnav'> <div id="navcontainer"> <div id="navbox" onmouseover="dropdown('1')" onmouseout="drophide()">Application <div id="navdrop" onmouseover="dropdown('1')" onmouseout="drophide()"> <a href="database/" class="menuitem">Database</a> </div> <div id="navdrop1" onmouseover="dropdown('1')" onmouseout="drophide()"> <a href="#" class="menuitem">Frame Editor</a> </div> </div> <div id="navbox" onmouseover="dropdown('2')" onmouseout="drophide()">Websites <div id="navdrop2" onmouseover="dropdown('yes')" onmouseout="drophide()"> <a href="?p=websites" class="menuitem">View</a> </div> </div> <div id="navbox"><a href="?p=media" class="menuitem">Media</a> </div> <div id="navbox"><a href="?p=contact" class="menuitem">Contact</a></div> </div> </div> and here is the CSS: #topnav { margin:0; padding:0; height:20px; width:100%; background-color:#87c8fb; z-index:1; } #navcontainer { margin-left:220px; float:left; z-index:1; position:relative; height:20px; } #navbox { width:120px; height:17px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-align:center; color:#FFFFFF; padding-top:2px; float:left; text-decoration:none; } #navbox:hover { background-color:#666666; border-botcument.getElementById("navdrop1").style.visibility = "visible" } else if (number =="2") { document.getElementById("navdrop2").style.visibility = "visible"; } } function drophide() { document.getElementById("navdrop").style.visibility = "hidden" document.getElementById("navdrop1").style.visibility = "hidden" document.getElementById("navdrop2").style.visibility = "hidden" } </script> Any help would be much appreciated.... Thanks

Hey lemm, I tried your suggestion, but to no avail...all that comes up now is a blank page when the script is run ... Here is what i am using at the moment: $frameno = $_GET['frameno']; $refname = $_GET['refname']; /* Refname is the name of the course in which the frame is being edited.... e.g. - workplace inductiion */ //////// MYSQL CONNECTION INFO + SELECT DATABASE HERE /////// $qry = mysql_query("SELECT * FROM $refname WHERE frame > $frameno"); while ($row = mysql_fetch_array($qry)) { mysql_query("UPDATE $refname SET frame = " . ($row["frameno"]+1) . " WHERE frame = " . $row["frameno"]) echo "Success"; } Any more suggestions?

Cheers Lemmin, I will test this out today... I will get back to you once i have attempted it.. Slick

Hey all, I am trying to create a query which will increment ALL values in the 'frame' column of my table AFTER the current frame number, the current frame number is passed through via a form; here is an example: BEFORE TABLE: ==================== id == frame == 0 == 0 == Already has content in this frame 1 == 1 == Already has content in this frame 2 == 2 == Already has content in this frame 3 == 3 == Already has content in this frame ==================== Say i wanted to insert a new blank frame AFTER frame 1...the output should look like this: $frameno = 1 ; ==================== id == frame == 0 == 0 == Content unchanged 1 == 1 == Content unchanged 2 == 2 == (no content in this frame...because this is a new field) 3 == 3 == This contains the original content from frame 2 4 == 4 == This contains the original content from frame 3 ==================== So basically all i am trying to acheive is to increment all the frame fields after the chosen frame number and add a blank field after this chosen one. Anyone have any ideas? Thanks, Slick

Not a bad site, must have taken you quiet some time to get to where your at with it. Just a few things I noticed: Header is a bit dull, could use some improvement When you go to the home page I think there should be an introduction explaining what the site is about, maybe use some simple images to illustrate this. Possibly make the header a link to the homepage? Best of luck!

***SOLVED*** Ok well I managed to solved this...although it is EXTREMELY SCETCHY (Damn you internet explorer!!! )... On the index.php page I had to use a CSS HACK: <!--[if IE]> <div id="content" style="margin-left:-220px;"> <![endif]--> Which basically just says if the browser is internet explorer, make the margin between the left margin of the screen -220px. Thanks again Brain for your support. Slick

***UPDATE*** OK i discovered there was a </div> tag missing in the leftmenu div and using Brian's suggestion to make #content div position:absolute I was able to make the content's appear on the right hand side of the menu. However... now in IE the content to the right of the menu is far too much to the right of the menu (I take it IE is assuming the margin-left value to be effective from the leftmenu div). where as in firefox it looks perfect. If i reduce the left-margin of the content panel it screws it up in firefox. I have been able to reduce the code a little...here is the updated CSS: /* CSS Document */ * { margin:0; padding:0; } #body { width:100%; margin:0; padding:0; } #header { width:100%; padding:0; padding-top:23px; padding-left:78px; padding-bottom:0; margin-bottom:0; margin:0; height:65px; background-image:url('http://www.theslick.com/layout/csssite/images/headerbg.jpg'); background-repeat:repeat-x; } #topnav { width:100%; height:23px; padding:0; margin:0; background-image:url('http://www.theslick.com/layout/csssite/images/topnavbg.jpg'); background-repeat:repeat-x; } #contentwrapper { width:100%; height:auto; min-height:300px; background-image:url('http://www.theslick.com/layout/csssite/images/contentbg.jpg'); background-repeat:repeat-x; padding:0; padding-top:50px; margin:0; } /** BEGINNING of LEFT MENU CSS **/ #leftmenu { float:left; width:220px; height:600px; } #leftmenucontent { padding-left:10px; margin-left:10px; } h2 { font-family:Arial, Helvetica, sans-serif; font-size:14px; font-style:italic; font-weight:bold; color:#4a4a4a; text-align:center; } h1 { font-family:Arial, Helvetica, sans-serif; font-size:22px; font-style:italic; font-weight:bold; color:#4a4a4a; text-align:left; padding:0; padding-left:10px; padding-top:10px; margin:0; } .contentfont { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#4a4a4a; text-align:left; padding:0; margin:0; } .contentred { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#cb2a57; text-align:left; padding:0; margin:0; } ul { list-style:none; padding:0; margin:0; line-height:14px; padding-top:10px; } li { list-style:none; padding:none; margin:none; } a { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-style:italic; font-weight:bold; color:#4a4a4a; text-decoration:none; } a:hover { color:#C5344E; text-decoration:underline; } .menufont { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-style:italic; font-weight:bold; color:#4a4a4a; } #leftmenutop { float:left; width:193px; height:29px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenutop.jpg'); background-repeat:no-repeat; } #leftmenumid { float:left; width:193px; height:350px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg'); background-repeat:repeat-y; } #leftmenubottom { float:left; height:15px; width:193px; height:15px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg'); background-repeat:no-repeat; margin-bottom:10px; } #logintop { float:left; width:193px; height:35px; background-image:url('http://www.theslick.com/layout/csssite/images/loginmenutop.jpg'); background-repeat:no-repeat; } #loginmid { float:left; width:193px; height:140px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg'); background-repeat:repeat-y; } #logincontent { padding-left:10px; margin-left:10px; } #loginbottom { float:left; height:15px; width:193px; height:15px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg'); background-repeat:no-repeat; } /** END of LEFT MENU CSS **/ /** BEGINNING of CONTENT CSS **/ #content { width:800px; height:300px; margin-left:0; position:absolute; } #contenttop { width:754px; height:35px; background-image:url('http://www.theslick.com/layout/csssite/images/contenttop.png'); background-repeat:no-repeat; margin-left:220px; margin-right:5px; } #contentmid { width:752px; height:530px; border-left:1px solid #c71c4c; border-right:1px solid #c71c4c; margin-left:220px; } #contentcontainer { padding-left:10px; padding-top:10px; } #contentbottom { width:754px; height:16px; background-image:url('http://www.theslick.com/layout/csssite/images/contentbottom.png'); background-repeat:no-repeat; margin-left:220px; margin-right:5px; } /** END of CONTENT CSS **/ #footer { width:100%; padding:0; margin:0; height:88px; background-image:url('http://www.theslick.com/layout/csssite/images/footerbg.jpg'); background-repeat:repeat-x; clear:both; } Anyone have a solution to this madness?

Hey again, I tried your suggestions Brian but all it seems to do is move the content area horizontally. The clear both div doesn't seem to do anything either. I also tried reducing the width of the content divs and increasing the left margin but this did nothing as well. If you or anyone else has any ideas i'm all ears open. This is really starting to become a bit frustrating :'( Thanks

Hey Bryan, Thanks for the quick response, however I tried all of your suggestions with no luck. I would have thought the clear div would have worked but it didn't ??? Not really sure what the problem here could be. Open to more suggestions Thanks again.

Hi guys, I'm having a bit of a problem with a site i'm designing at the moment. The site is: http://www.theslick.com/layout/csssite/ As you can see in IE the content div is displaying below the left menu div...and of coarse its perfect in Firefox. Anyone have any ideas? P.S - Anyone know why the header logo (PNG image) isnt transparent in IE? Thanks /* CSS Document */ #body { width:100%; margin:0; padding:0; } #pagecontainer { width:100%; height:auto; margin:0 auto; background-color:#FFFFFF; } #header { width:100%; padding:0; margin:0; height:88px; background-image:url('http://www.theslick.com/layout/csssite/images/headerbg.jpg'); background-repeat:repeat-x; } #title { padding-top:23px; padding-left:78px; margin:0; } #topnav { width:100%; height:23px; padding:0; margin:0; background-image:url('http://www.theslick.com/layout/csssite/images/topnavbg.jpg'); background-repeat:repeat-x; } #contentwrapper { width:100%; height:auto; min-height:300px; background-image:url('http://www.theslick.com/layout/csssite/images/contentbg.jpg'); background-repeat:repeat-x; padding:0; margin:0; } /** BEGINNING of LEFT MENU CSS **/ #leftmenu { float:left; width:20%; height:600px; padding-top:50px; } #leftmenucontent { padding-left:10px; margin-left:10px; } h2 { font-family:Arial, Helvetica, sans-serif; font-size:14px; font-style:italic; font-weight:bold; color:#4a4a4a; text-align:center; } ul { list-style:none; padding:0; margin:0; line-height:14px; padding-top:10px; } li { list-style:none; padding:none; margin:none; } a { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-style:italic; font-weight:bold; color:#4a4a4a; text-decoration:none; } a:hover { color:#C5344E; text-decoration:underline; } .menufont { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-style:italic; font-weight:bold; color:#4a4a4a; } #leftmenutop { float:left; width:193px; height:29px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenutop.jpg'); background-repeat:no-repeat; } #leftmenumid { float:left; width:193px; height:350px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg'); background-repeat:repeat-y; } #leftmenubottom { float:left; height:15px; width:193px; height:15px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg'); background-repeat:no-repeat; margin-bottom:10px; } #logintop { float:left; width:193px; height:35px; background-image:url('http://www.theslick.com/layout/csssite/images/loginmenutop.jpg'); background-repeat:no-repeat; } #loginmid { float:left; width:193px; height:140px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg'); background-repeat:repeat-y; } #logincontent { padding-left:10px; margin-left:10px; } #loginbottom { float:left; height:15px; width:193px; height:15px; background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg'); background-repeat:no-repeat; } /** END of LEFT MENU CSS **/ /** BEGINNING of CONTENT CSS **/ #content { width:80%; height:400px; margin-left:220px; } #contenttop { width:754px; height:35px; background-image:url('http://www.theslick.com/layout/csssite/images/contenttop.png'); background-repeat:no-repeat; } #contentmid { width:752px; height:530px; border-left:1px solid #c71c4c; border-right:1px solid #c71c4c; } #contentbottom { width:754px; height:16px; background-image:url('http://www.theslick.com/layout/csssite/images/contentbottom.png'); background-repeat:no-repeat; } /** END of CONTENT CSS **/ #footer { width:100%; padding:0; margin:0; height:88px; background-image:url('http://www.theslick.com/layout/csssite/images/footerbg.jpg'); background-repeat:repeat-x; clear:both; } <!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> <link rel="stylesheet" href="styles/style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS SITE</title> </head> <body id="body"> <div id="pagecontainer"> <div id="header"> <div id="title"> <img src="images/header.png" /> </div> </div> <div id="topnav"> <!-- START OF TOP MENU --> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="330" height="23" title="topnav"> <param name="movie" value="menu.swf" /> <param name="quality" value="high" /> <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="330" height="23"></embed> </object> <!-- END OF TOP MENU --> </div> <div id="contentwrapper"> <!--START of MENU DIVS --> <div id="leftmenu"> <div id="leftmenutop"> <h2>Products</h2> </div> <div id="leftmenumid"> <div id="leftmenucontent"> <ul> <li><a href="#">Computer Cases</a></li> <li><a href="#">CPU's</a></li> <li><a href="#">Motherboards</a></li> <li><a href="#">Video Cards</a></li> </ul> <h2>Search</h2> <form action="search.php" name="search" id="search"> <font class="menufont">Keywords:</font><input type="text" id="keywords" size="15px" style="border:1px solid #cb2a57" /><p> <font class="menufont">Category:</font><select id="category" style="border:1px solid #cb2a57; font-size:10px; font-family:Arial, Helvetica, sans-serif; height:20px; margin-left:2px; width:110px;" /><option value="Computer Cases" id="computer cases">Computer Cases</option><option value="CPU's" id="CPU">CPU's</option><option value="Motherboards" id="motherboards">Motherboards</option><option value="Video Cards" id="videocards">Video Cards </option></p> </select> <input type="submit" value="Search" style="margin-left:20px;" /> </form> </div> </div> <div id="leftmenubottom"> </div> <div id="logintop"> <h2>Login</h2> </div> <div id="loginmid"> <div id="logincontent"> <form action="login.php" name="login" id="login"> <font class="menufont">Username:</font><input type="text" id="username" style="border:1px solid #cb2a57; width:80px;" /><p> <font class="menufont">Password:</font><input type="password" id="password" style="border:1px solid #cb2a57; width:80px;" /></p> </select> <input type="submit" value="Login" /> </form> <font class="menufont">Forgot your password? Click here.</font> </div> </div> <div id="loginbottom"> </div> <!---END OF MENU DIVS --> <div id="content"> <div id="contenttop"></div> <div id="contentmid"> </div> <div id="contentbottom"> </div> </div> <!--- end of content wrapper DIV --> </div> <div id="footer"> </div> <!-- end of page container DIV --> </div> </body> </html>