html5 - Drop Down Menu not pushing the contents down in IE7 -


i new on forum.

i developing website using html5 , css responsive design. have navigation menu behaves simple drop down menu desktop , laptop

but tablet , mobile has menu button

by clicking on menu button, alternatively appear , disappear display:blocks otherwise display:none , pushes contents of main area downward

all works fine in firefox, chrome , ie not pushing contents down in ie7

i stuck here since 2 days

here html code

<div id="wrapper"> <header id="topheader"> <div id="topdiv"> <div id="maindiv"> <div id="logo"> <div itemscope itemtype="http://schema.org/organization"> <a itemprop="url" href="/default.aspx"> <img itemprop="logo" src="/app_themes/default/images//logo.png" alt=""> </a> </div>     </div>     <div id="navdiv">      <nav id="nav">       <ul id="navigation">         <li id="mobilesignup"> <a href="#"><h3>signup</h3></a>         </li>         <li><a href="/component/component-overview.aspx">           <h3>components</h3>           </a></li>         <li><a href="/pricing.aspx">           <h3>pricing</h3>           </a></li>         <li> <a href="/consulting/partners.aspx">           <h3>partners</h3>           </a>           </li>         <li> <a href="/about/about-contact.aspx">           <h3> &#x025be;</h3>           </a>           <ul>             <li><a href="/about/blog.aspx" >               <h3>blog</h3>               </a></li>             <li><a href="/about/about-contact.aspx" >               <h3>contact</h3>               </a></li>             <li><a href="/about/about-faq.aspx" >               <h3>faq</h3>               </a></li>                             <li><a href="/about/about-timeline.aspx" >               <h3>timeline</h3>               </a></li>           </ul>         </li>       </ul>     </nav>     </div>     <div id="register">       <div id="contact">         <h5> <a href="tel:18666686402"><img src="/app_themes/default/images/phone.png" id="phoneimg" alt="" /></a><span id="phonenumber"> 1 866 668 6402</span></h5>       </div>       <div id="signup"><a href="/signup.aspx" onmouseover="document.getelementbyid('signupimg').src='/app_themes/default/images/signupbuttononhover.png';"  onmouseout="document.getelementbyid('signupimg').src='/app_themes/default/images/signupbutton.png'"><img src="/app_themes/default/images/signupbutton.png" id="signupimg" alt=""></a>       <a href="#" onclick="menu_visibility('navdiv');"><img src="/app_themes/default/images/menubutton.png" alt="" id="menubutton"></a>        </div>       <div id="login">         <h3>         <a href="login"> login</a>         </h3>         </div>     </div>     </div> </div>     </header> </div> <div id="container"> </div>

here css code desktop menu

    /*===========================================================================     * horizontal navigation     * setting nav in middle of maindiv     =============================================================================*/ #navdiv {     display:inline;     position:absolute;     /*display:block;*/     margin-left:30px;     border:1px solid red; } /*===========================================================================  * setting main menu @ margin of 20px logo div  =============================================================================*/ #nav ul {     /*margin-left: 20px;*/     list-style-type:none;     list-style:none; } /*===========================================================================  * setting list item main menu items  =============================================================================*/ ul#navigation li {     display:block;     float: left; } /*===========================================================================  * setting margin, color, text-decoration , display style main menu  =============================================================================*/ #nav > ul > li > {     margin: 27px 15px 27px 15px;     color: #ffffff;     text-decoration: none;     display: block; } /*===========================================================================  * changing background image main menu hover effects  =============================================================================*/ #nav ul li:hover {     background: url("images/menuonhover.png");     background-repeat: repeat-x; } /*===========================================================================  * setting drop down menus  * making visible main menu hover effects  =============================================================================*/ #nav ul#navigation li ul {     display: none;   }  ul#navigation ul li {     clear: both;     width: 130px;     border: 0 none;     padding: 5px; } #nav ul#navigation li:hover > ul {     display: block;     opacity: 1; } /*===========================================================================  * making basic decorations of drop down menu  =============================================================================*/ ul#navigation ul, ul#navigation ul li ul {     list-style: none;     margin: 0px;     padding: 5px;     position: absolute;     z-index: 99999;     width: 130px;     background: #f8f8f8;     box-shadow: 1px 1px 3px #ccc;     opacity: 0; } ul#navigation ul li {     clear: both;     width: 130px;     border: 0 none;     padding: 5px; } ul#navigation ul li {     color: #000;     text-decoration: none; } ul#navigation ul li:hover {     background: #1e77a0;     text-decoration: none;     width: 125px; } ul#navigation ul li a:hover {     color: #fff; } /*===============================================================================  * menubutton tablet , mobile, hidden default  ===============================================================================*/ #register #signup #menubutton {     display:none; } }

and here code mobile menu

  /*===========================================================================  * vertical navigation  * setting nav in middle of maindiv  =============================================================================*/ #navdiv {     float:left;     margin-top: 10px;     left: 0px;     width: 100%;     background: #161616;     display:none; } #nav {     width: 25%;     background: #161616; } #nav ul li {     list-style:none;     list-style-type:none;     position:relative; } #nav ul li h3 {     margin: 12px auto; } #nav ul  li  {     text-decoration: none;     color:#fff; } #nav ul li:hover ul li {     margin:12px; } #nav ul li ul {     display: none;     opacity: 1; } #navigation li:hover > ul {     display: block;     margin: 15px 10px; } ul#navigation #mobilesignup {     display: block; }  /*===========================================================================  * register div contains signup , login div  * setting register div position , text color  =============================================================================*/ #register {     position:absolute;     top: 1px;     right: 2%;     width:130px; } #register #contact {     float:left;     margin-top:15px;     margin-right:15px; } #register #contact #phonenumber {     display:none; } #register #signup {     margin-top: 8px;     margin-left: 3%; } #register #signup #signupimg {     display:none; } #register #signup #menubutton {     display:inline;     margin-top:10px; } #register #login {     margin-right:3%; }

please me find out bug ie7. please humble request don't refer jquery or javascript based menu don't want use them.


Comments

Post a Comment

Popular posts from this blog

How to mention the localhost in android -

i trying call localhost in android application. unfortunately not possible used several methods emulator local host http://10.0.2.2/android/dbconnection.php and network ip address http://192.168.1.xx/android/dbconnection.php also http://localhost:8080/android/dbconnection.php but nothing connected localhost. purpose refer stackoverflow answers not working i facing same problem when worked on localhost. referred stackoverflow answer got solution create new emulator works fine in new emulator.
Read more

php - Calling a template part from a post -

i include iframe within post in wordpress. located inside content of post, meaning cannot in post template file, otherwise either before or after. i'd add facebook plugin within posts: <div id="socialwrap"><div class="fb-like" data-href="http://onlinearizonahomes.info" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div></div> i thinking of calling template part within post <?php get_template_part( 'social' ); ?> cannot use php within post without plugin (i'd avoid using plugin this). an alternative using javascript create html in post, seems unnecessary use of javascript. what best way add html within wordpress post? you can use shortcode. add functions.php function cudjex_fbshare( $atts, $content = null ) { global $post; $link = get_permalink($post->id); return '<div id="socialwrap...
Read more

c# - String.format() DateTime With Arabic culture -

check below code snippet, namespace testdateconvertion { class program { static void main(string[] args) { datetime testvalue = new datetime(2013, 12, 15, 15, 33, 44); cultureinfo culture = new cultureinfo("ar-sa"); string stringvalue = string.format(culture, "{0:d} {0:hh:mm:ss}", testvalue); console.writeline(stringvalue); console.readline(); } } } it gives output 22/02/35 15:33:44 i not getting how possible. whats 35 doing in output there that's 13/12/2015 in hijri, 35 means 1435 in hijri, default date format saudi arabia.
Read more