CMS Made Simple Forums

hi,

i've got a problem on the vertical menu css on www.stevendalving.be : in Firefox and safari its ok. but in IE it gives less height on the hit-area... to make it clear i gave the hit areas a 1px border... could anyone help me to get the hit areas similar to the images in the back, aswell for Firefox as IE...

css code:


/* Styling the basic apperance of the menu elements */
#primary-nav a {
  border: 1px solid #006699;
  display: block;
  margin: 0px;
  padding: 27px 25px;
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: transparent;
  min-height:2em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
  background-color: transparent;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
  background-position: center right;
  background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: transparent;
}


thanks in advance!
David - www.kovver.com

Beautiful colors!  Is that a single graphic for the menu?  I looked at it in both Firefox and IE and I see your problem.  I'm not sure how to fix it unless you could separate the menu graphics and use each one as a background image for each "box."  I know that if I was working with that graphic in Dreamweaver, I could use it to create an image map.  I haven't yet figured out how to do that with CMSMS.

i dont think its possible to use different images for menu buttons.
one background img should be ok.

only the problem is: why do the hit ereas not have the SAME height in IE as in Firefox. should be a css solution...

please comment! anyone?

David - www.kovver.com

Have you read this for image menus?

http://themes.cmsmadesimple.org/Image_menu.html

yes i am familiar with that concept. but the problem aint the images, there is only one, nut the hiterea above it. its transparent and has the same size as the button in the image... with all the same height... so what i'm actualy looking for is the css code to prevent IE to interpret the hight different as firefox.

result: hit are height the same in IE as in firefox. isn't this possible??? can it be a tiny detail i'm not seeing?

because when you take a look at the site in IE it give an hit-area height of +- half of the height as it is in firefox...

kind regards...

temporary solved with some javascript magic, but still strange...

thanks for all the help.

david - www.kovver.com



#primary-nav a {
  border: 1px solid #006699;
  display: block;
  margin: 0px;
  padding: 63px 25px;
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}




#primary-nav a {
  border: 1px solid #006699;
  display: block;
  margin: 0px;
  padding: 63px 25px;
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}