WordPress.org

1. Bandonn
   Member
   Posted 1 year ago #

   Hey everyone

   I've got this annoying gap between two of my divs, it doesn't happen in FF but it does happen in IE and safari. I know there are quite a lot of these topics around and I had a look at them and tried to apply the fixes listed there but I still couldn't get it to work

   Here is the problem section from the markup:
   

   <!-- Header -->
         <div id="header">
           <div id="logo">
                         <h1 class="text"><a href="http://localhost/wordpress/">philproj</a></h1>
               <p id="site-description">Just another WordPress site</p>
   
           </div>
   		 <!-- Navigation -->
   		 <ul>
             <div class="menu"><ul><li class="current_page_item"><a href="http://localhost/wordpress/" title="Home"><span class="left"></span><span class="text">Home</span><span class="right"></span></a></li><li class="page_item page-item-19"><a href="http://localhost/wordpress/?page_id=19" title="All Posts"><span class="left"></span><span class="text">All Posts</span><span class="right"></span></a></li><li class="page_item page-item-5"><a href="http://localhost/wordpress/?cat=3" title="Reading"><span class="left"></span><span class="text">Reading</span><span class="right"></span></a></li><li class="page_item page-item-7"><a href="http://localhost/wordpress/?cat=4" title="Podcasts"><span class="left"></span><span class="text">Podcasts</span><span class="right"></span></a></li><li class="page_item page-item-9"><a href="http://localhost/wordpress/?cat=5" title="Lectures"><span class="left"></span><span class="text">Lectures</span><span class="right"></span></a></li><li class="page_item page-item-11 current_page_ancestor current_page_parent"><a href="http://localhost/wordpress/?page_id=11" title="Forum"><span class="left"></span><span class="text">Forum</span><span class="right"></span></a></li></ul></div>
           </ul>
   		<!-- !Navigation -->
         </div>
         <!-- !Header-->

   Here are the elements from the stylesheet:
   

   /* -- Header -- */
   
   #header {
     width: 924px;
     border-bottom: 12px solid #ededed;
     position: relative;
     margin-bottom: 50px;
   }
   
   #header .rss { background: #ededed; position: absolute; bottom: 0 !important; bottom: -1px; right: 0; padding: 5px 6px; }
   
   /* Logo */
   
   #logo {
     background: #4e4e4e;
     padding-left: 32px;
   
     /* min-height hack for ie6 */
     min-height: 179px;
     height: auto !important;
     height: 179px;
   }
   
   #logo h1.text { padding-top: 30px; }
   
   /* Navigation */
   
   #header ul {
     background: #2d313d url('../../images/nav_bg.png') no-repeat top left;
     height: 37px;
     list-style: none;
     margin: 0;
   }
   
   #header ul li { float: left; }
   
   #header ul li a {
     display: block;
     float: left;
     height: 37px;
     line-height: 37px;
     padding: 0 24px;
   }
   
   #header ul li.current_page_item .left {
     background: transparent url('../../images/current_left.png') no-repeat top left;
     float: left;
     height: 47px;
     width: 6px;
   }
   
   #header ul li.current_page_item .right {
     background: transparent url('../../images/current_right.png') no-repeat top left;
     float: left;
     height: 47px;
     width: 6px;
   }
   
   #header ul li.current_page_item .text { float: left; margin: 0 18px; }
   
   #header ul li.current_page_item a {
     background: transparent url('../../images/current_center.png') repeat-x top left;
     height: 47px;
     line-height: 47px;
     margin-top: -5px;
     padding: 0; position: relative;
   }

   As well as the stylesheet from the child theme I'm using:
   

   /* -- Header -- */
   #header {
     width: 940px;
     }
   
   /* -- Logo -- */
   
     #logo {
     min-height: 120px;
     height: auto !important;
     height: 120px;
     }
   
     #logo h1.text { padding-top: 5px; }
   
   /* -- Navigation -- */
     #header ul {
     background: #2d313d url('images/nav_bg.png') no-repeat top left;
     }
   
     #header ul li.current_page_item .left {
     background: transparent url('images/current_left.png') no-repeat center;
     }
   
     #header ul li.current_page_item .right {
     background: transparent url('images/current_right.png') no-repeat center;
     }
   
     #header ul li.current_page_item a {
     background: transparent url('images/current_center.png') repeat-x center;
     }

   And finally the section in the header.php file:
   

   <!-- Header -->
         <div id="header">
           <div id="logo">
             <?php if(agile_check_option('logo') && get_option('agile_header_type') == 'Logo') { ?>
               <h1><a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_option('agile_logo'); ?>" alt="<?php bloginfo('name'); ?>"></a></h1>
             <?php } else { ?>
               <h1 class="text"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
               <p id="site-description"><?php bloginfo('description'); ?></p>
             <?php } ?>
           </div>
   		 <!-- Navigation -->
   		 <ul>
             <?php wp_page_menu('show_home=1&title_li=&depth=-1&link_before=<span class="left"></span><span class="text">&link_after=</span><span class="right"></span>&include='.get_option('agile_nav_pages')); ?>
           </ul>
   		<!-- !Navigation -->
         </div>

   I currently don't have a host since I'm building the site locally first, so I can't link to it unfortunately but hopefully I included all the relevant information, if not just tell me and I'll put it in. Does anyone have a solution for this?

   Thanks

Topic Closed

This topic has been closed to new replies.