Menu height not full size in FF/Safari/Opera

daymobrew

I recently did some PSD to HTML work. I was unable to get the top horizontal menu to look right in FF/Safari/Opera. It is grand in IE6 and IE7.

Can someone please check out the web page and CSS file.

I tried setting the height of the various items (the div, the ul, the li and the a) to 44px (height of background) but it doesn't help.

#nav {
}
#nav ul {
  margin: 0;
  padding: 0;
  float: right;
  height: 44px;
  line-height: 44px; /* Vertically centres text. */
}
#nav ul li {
  zoom: 1;
  display: inline;
  border-left: 1px solid #5a6a6a;
  padding-left: 8px;
  padding-right: 9px;
  font-size: 14px;
}
#nav ul li a {
  color: #555;
  text-decoration: none;
}
#nav ul li a:hover {
  color: #ff0000;
}

Dades

I've come across this before - I think I had to use padding in the end to resolve it.

If you add padding to the top & bottom (13px and 12px?) of your <li> element it will stretch the height. You might need to remove the height of 44px from the <ul> also for it to work in IE.

Good luck!

p

Looks fine now, so I guess you got it sorted?

daymobrew

Dades wrote: »

I've come across this before - I think I had to use padding in the end to resolve it.

If you add padding to the top & bottom (13px and 12px?) of your <li> element it will stretch the height. You might need to remove the height of 44px from the <ul> also for it to work in IE.

Thanks for the suggestions - it directed me to the result.

I got it working my adding IE specific styles to the html (I didn't want to create a new stylesheet) and modify the stylesheet:

<!--[if IE]>
   <style type="text/css">
   #nav ul li { padding-top: 0px; }
   </style>
   <![endif]-->

#nav {
}
#nav ul {
  margin: 0;
  padding: 0;
  float: right;
  [b]/*height: 44px;*/[/b] /* COMMENTED */
  line-height: 44px; /* Vertically centres text. */
}
#nav ul li {
  zoom: 1;
  display: inline;
  border-left: 1px solid #5a6a6a;
  padding-left: 8px;
  padding-right: 9px;
  [b]padding-top: 13px;[/b]  /* ADDED */
  [b]padding-bottom: 13px;[/b] /* ADDED */
  font-size: 14px;
}
#nav ul li a {
  color: #555;
  text-decoration: none;
}
#nav ul li a:hover {
  color: #ff0000;
}

I commented out the #nav ul height and added padding-top and padding-bottom to #nav ul li. I had to set padding-top to 0px for IE.

Dades

daymobrew wrote: »

I got it working my adding IE specific styles...

Was thinking you might need to do something like that! Stupid IE and it's padding issues. :pac: