[SOLVED] menu position in IE: ignores container padding/margins
 

Hi,

So I'm trying to get the site finalized, only now am I checking how it looks in IE.
toadthejournal.com

I fixed a couple major problems, but am still trying to cope with the menu--I don't totally understand the CSS for it, I just know it looks good in Mozilla.

Here's the call for it, after the header:
<!-- Header -->
<td id="header" colspan="<?php echo $cols; ?>">

<?php bfa_header_config($bfa_ata['configure_header']); ?>

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header2' ) ); ?>

</td>
<!-- / Header -->

And here's the CSS for it:

<!-- top menu -->

.menu-header2 {
padding-top:0em;
padding-bottom:0em;
width: 100%;
text-align: center;
}

.menu-header2 ul {
position: relative;
top: -.41em;
margin-left: -2.19em;
margin-right: 2.27em;
list-style: none;
width: 100%;
}

.menu-header2 li {
background: #438d33;
margin-right: .29em;
float: left;
}

.menu-header2 li a {
height: 1.56em;
float: left;
margin-top: 0em;
line-height: 1.56em;
margin-right: 0em;
width: 7.5em;
border-right: .19em solid #000000;
border-left: .19em solid #000000;
border-bottom: .19em solid #000000;
border-top: .19em solid #000000;
color: #000000;
text-decoration: none;
font-weight: bold;
text-align: center;
padding-right: 0em;
}

.menu-header2 a:hover{
background-color: #2f7a00
}


I had to add "margin-left: -2.19em;" to the UL in order to get it to align with the very left edge of the container in Mozilla. Looking at IE, though, it already had been "totally left," and is now over-corrected (spilling onto the
background on the left side).


Also...
In case anyone knows an easy answer, I'll mention that the last button wraps in IE, but not in Mozilla. I will search the forums for this...


Thanks,
ES

Where are you putting the code for the menu? Why not just use %page-center? Then you could wrap that in a div and style away.

Hi Miles,
Thank you for your answer.
I'm putting the code in the CSS inserts section.
A page center would be excellent, I think, from the sound of it.
I would really like to try it as a way to solve my issue with IE.


However, I lack the knowledge.
Can someone please tell me
1. Where I would put "%page-center"
2. How would I wrap %page-center in a div? I'm assuming this would be done in the CSS inserts section.

Best,
ES

Look in ATO>Style and Edit Header Area. You may not even have to wrap it in a div. My question though was really where are you putting the code for the menu. Not the CSS.

Hello again.

The code for the menu is going into templates that control about six of the website's 25 pages (there will be many more in the future).

For this reason I will probably need to continue to have the code in the template. I see why you asked, as inserting the %page-center has applied the menu to every page.

I'm not sure what to do.
I heard about a page in the "gold-member" (I hate that title) forum, that's a howto for changing the "exclude from pages" to "include in pages." Perhaps I should look into this?

Is there an easier way to use the %page-center in the header area without including it on every page?

Any guidance is appreciated. Thanks for your help so far, Miles.

You can use conditionals. For instance the code below only shows the page center menu on the home page.
You just put this in the same place you would put #page-center. For other showing (or hiding) on other pages see the conditional link above.

Hey.

It's IE compatible now, at least. I have two styling concerns:

iIcan't get rid of an unexplained dotted border. I tried this css to override, with no luck (the transparent background does work :)):

div#menu1 ul.rMenu {
background: transparent;
border: 0;
}


I'd also like for the current page icon to have the same color as the others, if possible. I tried this code, to no avail (#438d33; being the item background color, not the hover color).

div#menu1 ul.rMenu li.current_page_item a:active {
background-color: #438d33;
}


And sadly the conditional Miles sent me isn't working. It's at the top of the CSS inserts. The menu is showing on every page. This is it, again:

<?php if ( is_home() ) { ?>
%page-center
<?php } ?>


Thanks if anyone can help!

BTW it's at toadthejournal.com, still.

I found the solution to the dotted border issue here:

http://forum.bytesforall.com/showthread.php?t=10873

I don't see a dotted border

What do you mean by the current page icon?

The code I gave you doesn't go in CSS Inserts it goes in ATO>Style & Edit Header Area>Configure Header Area but you will have to find the conditional for your particular need. See the link to conditionals on that post.

(I got the border issue fixed based on a post by juggledad.
I inserted:
div#menu1 {
border: dashed 0px #fff;
})

OK, I figured out that I had to remove the %page-center and use only the conditional in the configure header area, and that I needed to refer to the front page, not the homepage.
Next I will read up on how to insert this into templates, and that'll be great...


Sorry, I think I meant "current page ITEM," not "current page icon." It's the menu item that represents the page I'm currently on. The color of it is the same color as if I were hovering on it. It's not a big deal, but I'd like to change it, if possible. My guess is that it's the "a:active" command, but I really don't know. I thought maybe I had to include the a:link, a:visited, a:hover, since I read that everything has to be listed in order. I don't know if that's true in this case.

Here's my latest effort (laugh at it if you want).

div#menu1 ul.rMenu li.current_page_item a:link {
}
div#menu1 ul.rMenu li.current_page_item a:visited {
}
div#menu1 ul.rMenu li.current_page_item a:hover {
}
div#menu1 ul.rMenu li.current_page_item a:active {
background-color: red;
}

I can't figure out what "ul.rMenu" is all about. But this doesn't work, with or without "ul.rMenu."

yeah, the conditionals work great! :)