IE和Firefox中的CSS绝对定位问题，但Chrome中不存在-Wordpress模板

Question

I modified a WordPress responsive theme to include my client's logo within the header. When adding this in, I've knocked around a bunch of other divs, and I'm slowly piecing it back together.

The main challenge I'm having is with the

#header-menu 

ID ( http://ubcf2.garyspagnoli.com ) not rendering properly on certain browsers. It stays fixed to the right side, and no longer acts responsive to the design.

Here is the CSS I implemented (and also check out the site) to see how I positioned this over the logo image -

#header-menu {
    bottom: 0;
    padding: 0;
    position: absolute;
    right: 0;
}

Any advice on how to fix this? Can I not absolute positioning in a responsive design?

Answer 1

remove your h1#site-title

#header-menu{
    background-image:url('http://ubcf2.garyspagnoli.com/wp-content/uploads/2014/02/UBCF-v1.jpg');
    list-style-type:none;
    margin:0px;
    padding:0px;
}
#header-menu>li{
    float:right;
}
#header-menu>li a{
    display:block;
    padding:10px 15px;
}
#header-menu>div{
   float:clear;
}

add a div after your last list item. You may need to reverse your list items. Also try and remove any unnecessary positionings.