Weird problem with menu moving places
-
Hi everyone,
I’m having a weird problem with my blog menu.
I built the blog locally, and ran it on a Wamp server on my computer. I got it to function just like I wanted it to in both Firefox and IE. I uploaded it to my website, copied all the files exactly, and now my menu is showing up at the top of my header div in Firefox, and with a space between the header and menu divs in IE (though it is in the right place).Any help would be greatly appreciated!
the blog location is:
http://blog.anthonyteacher.com
the menu should look like the one on the mainpage
http://www.anthonyteacher.comHere is the HTML (and below is the CSS):
<body height="100%"> <div id="container"> <div id="header"><img border="0" src="http://localhost/wordpress/wp-content/themes/blank2L/logo.png"> <div id="menu"><ul id="sddm"> <li><a href="#">HOME</a></li> <li><a href="#">BLOG HOME</a></li> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">AUDIO</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">Audio 1</a> <a href="#">Audio 2</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">VIDEO</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">Music Videos</a> <a href="#">Funny Videos</a> <a href="#">Commercials</a> <a href="#">DIV Cascading Menu</a> </div> </li> <li><a href="#">RESOURCES</a></li> <li><a href="#">CONTACT</a></li> </ul> <div style="clear:both;"></div> </div></div>
/* basics */ *{margin:0; padding:0;} body { background: #a3d2de; font-family: verdana, verdana, tahoma, sans-serif; font-size: 8pt; height: 100%; } h1 {font-size: 18pt;} h2 {font-size: 14pt;} h3 {font-size: 10pt;} h4 {font-size: 9pt;} img{ border: none; padding:0; } img a{border:none;} img.left{ float: left; border: none; padding: 6px 0 0 0; } img.right{ float: right; border: none; padding: 0 0 0 6px; } blockquote{ border-left:1px solid #A5ABAB; margin:15px; padding:0 12px 0 12px; } code{ font-family:"Courier New", Courier, monospace; } /* links */ a{ color:#fe1212; text-decoration:none; } a:hover{color: #5390a0; text-decoration: none;} /* container */ #container { border-left: 2px solid #639eac; border-right: 2px solid #639eac; width: 964px; height: 100%; margin: 0 auto; background:#fff; color:#333; overflow: hidden; } /* header */ #header { background-image:url('header-bg.jpg'); background-repeat:repeat-x; width: 99%; height: 200px; color: #fff; margin-top: 3px; margin-left: 5px; margin-right: 5px; } #header h1{ font:normal 20pt georgia, times; padding:20px 0 0 16px; margin:0; } #header h1 a{color: #fe1212; text-decoration: none;} #header h1 a:hover{color: #666; text-decoration: none;} #header h2{ font:normal 10pt georgia, times; color:#fe1212; padding: 0 0 0 18px; margin:0; } /* main menu */ #menu { background-image:url('menubar.jpg'); background-repeat:repeat-x; font-family: arial, verdana, times, serif; width:100%; height: 29px; overflow:hidden; } #sddm { margin: 0; padding-top: 3px; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 12px arial; background: url('orangeborder1.gif'); background-repeat:no-repeat; background-position:right; } #sddm li a { display: block; margin: 0 1 0 0; padding: 4px 10px; color: #FFF; font: bold 12px arial; text-align: center; text-decoration: none; } #sddm li a:hover { background: url('orangeborder2.gif'); background-repeat:no-repeat; background-position:right; } #sddm div { position: absolute; visibility: hidden; margin: 3px; padding: 6px; background: #fff; border: 1px solid #000;} #sddm div a { position: relative; display: block; margin: 2px; padding: 5px 5px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #fff; color: #555555; font: bold 12px arial} #sddm div a:hover { background: #ff0000; color: #fff}
Viewing 6 replies - 1 through 6 (of 6 total)
Viewing 6 replies - 1 through 6 (of 6 total)
- The topic ‘Weird problem with menu moving places’ is closed to new replies.