Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

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


  #1  
Old Mar 3, 2011, 09:37 AM
epsymp
 
37 posts · Jul 2010
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
  #2  
Old Mar 3, 2011, 12:10 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Mar 3, 2011, 01:16 PM
epsymp
 
37 posts · Jul 2010
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
  #4  
Old Mar 3, 2011, 01:47 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Mar 3, 2011, 02:01 PM
epsymp
 
37 posts · Jul 2010
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.
  #6  
Old Mar 3, 2011, 02:14 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You can use conditionals. For instance the code below only shows the page center menu on the home page.
PHP Code:
<?php if ( is_home() ) { ?>
%page-center
<?php ?>
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Mar 5, 2011, 12:36 PM
epsymp
 
37 posts · Jul 2010
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!
  #8  
Old Mar 5, 2011, 12:37 PM
epsymp
 
37 posts · Jul 2010
BTW it's at toadthejournal.com, still.
  #9  
Old Mar 5, 2011, 02:22 PM
epsymp
 
37 posts · Jul 2010
I found the solution to the dotted border issue here:

http://forum.bytesforall.com/showthread.php?t=10873
  #10  
Old Mar 5, 2011, 02:29 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Mar 5, 2011, 02:44 PM
epsymp
 
37 posts · Jul 2010
(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."
  #12  
Old Mar 5, 2011, 02:49 PM
epsymp
 
37 posts · Jul 2010
yeah, the conditionals work great!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] RSS margins/position cliffbird RSS, Feeds & Subscribing 5 Sep 16, 2010 05:12 PM
[SOLVED] Can't get rid of Layout Container padding... parker Center area post/pages 9 Aug 8, 2010 01:05 PM
[SOLVED] Add Margins inside Center Container shadypeeks Center area post/pages 7 May 17, 2010 10:45 AM
Ignores Images in Posts Styling karenika Atahualpa 3 Wordpress theme 2 Dec 18, 2009 04:11 AM
[SOLVED] Possible to set layout container padding for left &amp; right to different value dixieprosser Header configuration & styling 1 Sep 8, 2009 09:52 PM


All times are GMT -6. The time now is 10:30 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.