Web Analytics Made Easy -
StatCounter CSS Help - Creating a menu that allows you to click anywhere in the box - CodingForum

Announcement

Collapse
No announcement yet.

CSS Help - Creating a menu that allows you to click anywhere in the box

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Help - Creating a menu that allows you to click anywhere in the box

    Hi, Hope someone can help me.

    I created a menu using just CSS to turn a list into a horizontal menu. With that menu I used the csshover.htc file to enable you to click anywhere within the shown box or button of the menu to go to the link instead of just on the text like a normal link (for anyone that wants to see it - http://www.on-display.co.uk/test/menu1.html). This all works fine.

    I then decided to create a menu in the same style but using a gif file as the back ground for each button. I have used the same principles as the menu above but I cannot enable you to click anywhere on the shown button to activate the link in IE. It all works fine in Firefox. This is the problem menu - http://www.on-display.co.uk/test/menu5.html

    I would be really grateful if anyone can tell me where I am going wrong as I am fairly new to CSS and I'm struggling!

  • #2
    i dont see a problem with it, it works fine in both ie and firefox. lol i guess you did it right

    and try validating the code so it displays correctly in all browsers.

    www.validator.w3c.com

    try it

    Comment


    • #3
      no unfortunately it isnt working fully ( i wish it was )

      In firefox you can click anywhere within the area showing the button image and it will take you to the link but in IE you have to click on the text to use the link... anyother thoughts to why this is happening when it seems to work fine in my other menu would be greatfully received!

      Comment


      • #4
        try:
        Code:
        div#listmenu a {
        background-position: 0 0; 
        color: #000000; 
        text-decoration:none; 
        text-indent: 5px; 
        display: block;
        width: 107px;
        height: 26px;
        }
        Stop making things so hard on yourself.
        i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

        Comment


        • #5
          Thats fantastic - thanks a lot for your help. It works perfectly in IE now.

          Comment


          • #6
            cool.

            a little explination why the first one works and second doesnt.

            in the fist you are not defining the height and width of the li. Your telling the a to have padding thus resulting in the li being the width of the a + the padding.

            in the second your telling the li to be a specified width and height. the a, although displayed block, will only be as big as the text inside it. you need to tell the the a to be as big as the li its contained in. by giving it the same height and width as the containing li it does so. you could also tell the a to be 100% height and width to acheive the same goal.
            Stop making things so hard on yourself.
            i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

            Comment


            • #7
              I understand... it makes complete sense when you think about it - guess I have a lot to remember!

              thanks again and you may well be helping me out again soon!

              Comment

              Working...
              X