Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • The IE nested lists whitespace bug

    Posted on July 27th, 2009 Thibaut 1 comment

    I was struggling on styling some ul/li list nested into a ol/li list then I noticed that it’s simply (another) IE bug. Let’s consider the following list :

    <ol>

        <li>

            <ul>

                <li>line 1 - item 1</li>

                <li>line 1 - item 2</li>

            </ul>

        </li>

        <li>

            <ul>

                <li>line 2 - item 1</li>

                <li>line 2 - item 2</li>

            </ul>

        </li>

    </ol>

    And the problem was like :

    line 1 - item 1
    line 1 - item 2
    unwanted space
    line 2 - item 1
    line 2 - item 2

    Even with the margin and padding set to 0 as the following CSS file shows :

    ol,

    ol li ul

    {

        list-style-type : none;

        margin : 0;

        padding : 0;

    }

     

    ol li,

    ol li ul li

    {

        margin : 0;

        padding : 0;

    }

    After some browsing and tests, I ended on the following solution, which is to set the display property (main list) to inline-block :

    ol li

    {

        display : inline-block; /* To avoid IE "ul li white-space bug" */

        padding : 0;

    }

    More info about this bug

    Hope it was useful. See you !

    Share/Save/Bookmark

  • Run browsers directly from the web

    Posted on March 14th, 2009 Thibaut No comments

    As every good web developer, you have to test your website under different browsers such as Firefox, Safari, Opera, Chrome, etc. And of course, all of these programs must be installed on your machine and kept up to date. This is where Xenocode comes in : you connect to their website and thanks to a virtualization process, you launch the application you want from a catalogue, without the need to download or install it. Very handy !

    Share/Save/Bookmark