WordPress.org

1. dretio
   Member
   Posted 3 years ago #

   Dear Wordpress community,

   I'm currentley finishing a site for an african project but I have a mysterious problem with firefox - IE - navigation.

   You can find my website here : dev.fixit.be/baobab

   My CSS is over here pastebin.com/642171
   My index.html is over here pastebin.com/642174
   As you can see, I use a heavy modified version of the goldengray theme.

   The biggest problem at this point is a small movement in the pages when hovering the navigation bar.
   I meant the following : when you hover my topmenu everything looks ok.
   But then, click on a general categorie or comment in the sidebar - after that : hover my topmenu again and you will see a small movement in the page.
   In FF you will see the big space between navigation and content - maybe it has something to do with that.

   Thank you for helping me out..

2. petit
   Member
   Posted 3 years ago #

   I cannot find this movement in Firefox, only in IE.
   I believe this has to do with the fact that IE interprets the CSS box model differently. It seems to collapse the margin and padding between the navigation bar and the main content area, giving no room for the mouse over bar you use as a visual hint below the menu items.

   Your CSS rules are:
   #navigation {
width: 750px;
background: transparent;
font : bold verdana;
margin: 0 auto auto auto;
}

   #minitabs {
margin: 0;
padding: 20px 0 20px 20px;
background: transparent;
font : bold verdana;
}

   What happens if you change the #navigation rule
   margin: 0 auto auto auto;
   to
   margin: 0 auto 20px auto;
   Would it help?

3. dretio
   Member
   Posted 3 years ago #

   Tnx for your reply petit -
   I changed the css as you recommended but now it has the look like in firefox - but still, the pages move if you hover above the menu in IE(after clicking a categorie for example).

   It's also strange that I don't have it on "pages" or "home".

   To make sure : I don't want the space between menu and content - I just leave it as it is now for debugging purposes.

   Again, many tnx for your reply.

4. petit
   Member
   Posted 3 years ago #

   No, that didn't help much. Sorry!
   The styling of your navigation bar is a bit complicated.
   You have different font styling for #navigation, #minitabs, #minitabs a:link and :visited and for #minitabs li.current_page_item a and a:hover.

   I don't know if this is the problem, but I think you should start over with this, and try to use as few rules as possible. CSS rules are inherited from outer containers to inner. Rules valid for the whole #navigation should be placed there and specific rules in the inner containers #minitabs, #minitabs ul and so on.

   If nothing else, it makes the styling easier to analyze and change.

Topic Closed

This topic has been closed to new replies.