Support » Themes and Templates » Weird problem with menu moving places

  • Resolved acornrevolution

    (@acornrevolution)


    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.com

    Here 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)
  • Please don’t post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone.

    You have 1 validation error (there’s no attribute height for the body element). 1 error in your stylesheet. and:

    <div id="header"><img border="0" src="http://localhost/wordpress/wp-content/themes/blank2L/logo.png">

    isn’t going to work too well. The space for the missing image is currently pushing down your menu bar in IE8.

    Thread Starter acornrevolution

    (@acornrevolution)

    Sorry, I didn’t know about pastebin!
    I removed the height attribute from the header file, and also removed the image (forgot that I changed it to the background instead), but the menu should be sitting at the bottom of the div, below the image, not at the top.

    It works fine in Firefox when I look at it locally, but jumps to the top when I look at it in on the web. The latest version of IE has it at the bottom, but IE 6 (the version I’m on now at work) renders it at the top too.

    It looks fine for me using IE8 and IE8 Compatibility mode. You’ve still got a single error in style.css. IE can be pretty snitty about CSS errors, so I’d suggest correcting that asap.

    Any other problems will almost certainly be down to poor CSS implementation within IE6 and IE7. Best handled using conditional comment CSS so that you don’t impact the better browsers such as Firefox & Safari.

    http://quirm.net/2009/06/29/wordpress-conditional-comment-css/

    Thread Starter acornrevolution

    (@acornrevolution)

    I will fix the CSS error later today.

    So, for you, on blog.anthonyteacher.com, the menu was below the header (blackboard)?

    I will also look into conditional comments…

    Oh no – it wasn’t. It’s at the very top of the page (above the blackboard). Sorry – I assumed it was supposed to be there.

    Try changing:

    #menu {
    background-image:url(menubar.jpg);
    background-repeat:repeat-x;
    font-family:arial,verdana,times,serif;
    height:29px;
    overflow:hidden;
    width:100%;
    }

    to

    #menu {
    background-image:url(menubar.jpg);
    background-repeat:repeat-x;
    font-family:arial,verdana,times,serif;
    height:29px;
    overflow:hidden;
    position:absolute;
    top:171px;
    width:960px;
    }

    Hi,

    I am facing weired problem in wordpress. I am not sure anyone has the same issue..
    My website running in 2 testing servers. one from Wamp (windows) another one from Linux (xampp).

    when i load the page from linux it is perfect in IE 7 and other browsers.

    when I load the same page from wamp (windows), all other browsers are showing perfect, but not in IE 7 and it has alignment issue.

    anyone has clue to solve this weired issue.

    Thanks in Advance. SAi

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Weird problem with menu moving places’ is closed to new replies.