Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Distribute horizontal padding for each item in a horizontal menu

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #160498
    Bed
    Participant

    Hello !

    I try to code a CSS horizontal menu with this conditions:
    – No javascript
    – Works with IE8+, Firefox, Chrome, Safari, Opera
    – No width specified on items
    – First item sticked to left
    – Last item sticked to right
    – No space between items
    – Same space between words (same padding for each item)

    Result expected, but the size of words can change: Example

    Here is the html:

    <ul id="menu">
    <li>Breadfruit</li>
    <li>Bilberry</li>
    <li>Blackberry</li>
    <li>Blackcurrant</li>
    <li>Blueberry</li>
    <li>Boysenberry</li>
    <li>Cantaloupe</li>
    <li>Currant</li>
    <li>Cherry</li>
    </ul>
    

    Here is the basic CSS:

    *{margin:0;padding:0;list-style:none;}
    menu{width:960px;}
    menu li{padding:10px 0;text-align:center;color:white;background:#000;cursor:pointer;}
    menu li:hover{color:#000;background:#ccc;}
    

    For now, the best solution I could find was to add “display:table” on “ul” and “display:table-cell;width:1%;” on “li” . It works perfectly on recent browsers, but not on IE8 and IE9 : there isn’t the same space between words (cf Fiddle)

    What I tried:
    – “float:left” and specified width on “li”: it works, but it’s not flexbile. If the word size changes, the style is broken.
    – “display:inline-block;padding:10px;” on “li” and “text-align:center” on “ul”: the first item isn’t sticked to left and the last item isn’t sticked to right.
    – Flexbox it doesn’t work on IE8 and IE9

    Do you have an idea to do that please? I don’t even know if it’s possible :)

    Thank you in advance!

    #160501
    Paulie_D
    Member

    Not possible as far as I know given the restrictions.

    http://dowebsitesneedtolookexactlythesameineverybrowser.com/

    Is this for a school project or something?

    Did I see this question on Stack Overflow too…it seems familiar?

    #160503
    Bed
    Participant

    Thank you for your reply Paulie_D. Yes, it’s the same question on Stackoverflow, I try everything I can :)
    But this is not a school project, it’s just a request of my webdesigner who would like the menu to be like that, if that is possible.

    #160505
    Paulie_D
    Member

    Yes, it’s the same question on Stackoverflow

    What answers did you get there?

    #160506
    Bed
    Participant

    What answers did you get there?

    I learned the trick of adding “display:table” on “ul” and “display:table-cell;width:1%;” on “li”. But unfortunately, it doesn’t work on IE8 and IE9. Since I didn’t have any other answers.

    #160507
    Paulie_D
    Member

    Pretty sure the only option will be to relax one of the conditions.

    Why is is JS not allowed?

    #160546
    basement31
    Participant
    #160613
    Bed
    Participant

    Why is is JS not allowed?

    Two reasons:
    – With js, there would be a delay between when the menu is displayed and when it is recalculated with js. So while the page would load, the user could see the menu “move” for a short time. It’s not perfect.
    – For challenge, just trying to do this only with CSS :)

    Is this what you want?

    Unfortunately not, in your example all elements have exactly the same size (thanks to “table-layout:fixed”), but space between words is not always the same.

    #160615
    Paulie_D
    Member

    With js, there would be a delay between when the menu is displayed and when it is recalculated with js. So while the page would load, the user could see the menu “move” for a short time. It’s not perfect.

    Seems unlikely. The JS should be applied before the page renders.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.