Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    1px borders doubling up, any workaround/fix?

    I'd really appreciate any help with this css problem, I've spent hours trying to figure it out but I'm stumped.

    I'm working on a CSS pop-out menu, and the problem I'm having is this:

    I want a 1px border around each menu and submenu item, but in every place an item is touching another, the 1px borders obviously show up twice and then it looks like a 2px border.

    Right now I've got it to work and validate, by giving everything a top & right border, and filling in the other ones manually. But it takes quite a lot of extra code for something so small.
    I've assigned each list item which needs a border a class, then created a stylesheet rule for that class. Is there a better way?

    I've run into another problem too, the menu items which have a submenu need to have a little arrow on the right hand side. Right now I've got that on there with a <span>, but I can't seem to position it. I can't give the list item a class, and set that as the background because it already has a class.

    the page is here: http://wolfe.rchomepage.com
    and the css is here: http://wolfe.rchomepage.com/menuv.css

    a picture of what I'm trying to achieve is here: http://wolfe.rchomepage.com/menu.jpg
    Last edited by wolfestone; 05-30-2007 at 04:27 AM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by wolfestone View Post
    I want a 1px border around each menu and submenu item, but in every place an item is touching another, the 1px borders obviously show up twice and then it looks like a 2px border.
    Looks like you have fixed this problem. I don't see the 2px borders?
    Quote Originally Posted by wolfestone View Post
    I can't give the list item a class, and set that as the background because it already has a class.
    You can give an element multiple classes like this:
    Code:
    <li class="monkey zebra giraf">...</li>
    (1)
    As a side issue, I would remove this:
    Code:
    <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
    It is causing your page to be rendered in quirks mode in IE6.

    For what reason are you even using XHTML? Read what Arbitrator has to say about using XHTML for web pages: How to validate a page with javascript variables in the <head> section?

    (2)
    Looks like you haven't finished the menu for IE6 functionality?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •