dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to give a li element a fixed width

  1. #1
    Join Date
    Nov 2009
    Posts
    29

    How to give a li element a fixed width

    I want to give a li element a fixed width but it doesn't work. Currently I can give an a element a width in Firefox but it doesn't work in Internet Explorer. The problem is that I have longer descriptions on mouseover / hover in the navigation and so I have to use fixed widths (even if I don't like them) because otherwise the buttons are moved on mouseover / hover. You can see it on my site. It should work with Firefox but has problems with Internet Explorer.
    Thanks in advance.

    PS: I already tried to set the width to the li element but it didn't work even if I set display: block; float: left;

  2. #2
    Join Date
    Nov 2009
    Posts
    27
    Hi,

    its not an answer to your question, but you might be interested in the following script:
    http://www.jeremymartin.name/example....php?example=1

  3. #3
    Join Date
    Nov 2009
    Posts
    29

    Arrow

    I want to use as less JavaScript as possible. So I only want to solve the problem with different words on mouseover / hover in CSS.

  4. #4
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Just looked at your css---
    HTML Code:
    #navigation li {
    	display: inline;
    }
    There is no width set.
    HTML Code:
    #navigation li {
    	display: inline;
            width:115px;  /* whatever suits your layout (810/7=115) */
    }
    That will work cross-browser... no smoke and mirrors necessary.

  5. #5
    Join Date
    Nov 2009
    Posts
    29

    Thumbs up

    Thanks, it worked when I used "#navigation li a" instead of "#navigation li" (but I don't know why).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles