No replies
sundevil67
Offline
Regular
Last seen: 13 years 9 weeks ago
Joined: 2008-12-18
Posts: 13
Points: 0

This menu is driving me crazy and I need some help! This is the first entirely CSS site I am developing, and it is slow-going. Anyway, I have a horizontal list with images in each

  • serving as my main navigation. I am trying to put a dotted vertical border to the right of each menu item (must span the height of each image) and I keep going back and forth between assigning the borders to the or the
  • . Seems that IE & FF behave differently in each case. It seems to work in IE7, however FF3 only shows a short, stubby little line at a seemingly arbitrary height. I have to assume that FF is the correct implementation, but there has to be a fix without another IE hack, no?
  • Example is here

    #header ul {
       margin: 0;
       padding: 11px 0 0 0;
       float: right;
       border-bottom: 1px dotted #e2e2e2;
    }
     
    #header ul li {
       border-right: 1px dotted #000000;
       margin-top: 0;
       margin-right: 15px;
       margin-bottom: 0;
       margin-left: 0;
       padding-top: 0;
       padding-right: 15px;
       padding-bottom: 0;
       padding-left: 0;
       display: inline;
       list-style:none;
    }
     
    #header ul li img {
       border-top: 1px solid #fff;
       border-right: 1px solid #fff;
       border-bottom: 1px solid #fff;
       border-left: 1px solid #fff;
    }
     
    #header ul li a img:hover {
       border-top: 1px solid #fff;
       border-right: 1px solid #fff;
       border-bottom: 1px solid #ff9900;
       border-left: 1px solid #fff;
    }

    Thanks for any help!