1

I'm working on a page where I want to show a menu (bunch of links), where the menu items are horizontally placed and positioned to the right side of the page (something similar to what you already see on the top of stackoverflow page when you are logged in).

The HTML looks like this:

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">@import url(styles/style.css);</style>
    </head>
    <body >
        <div class="test">
            <!-- float right -->
            <ul class="fr">
                <li><img src="images/1.gif" alt="image 1"/></li>
                <li><img src="images/2.gif" alt="image 2"/></li>
                <li><img src="images/3.gif" alt="image 3"/></li>
            </ul>
        </div>
    </body>
</html>

The "test" CSS class is as follows:

.test ul {list-style:none; }
.test li { display:inline;}

This shows up fine on Chrome and Firefox. The li items are rendered inline and to the right side of the page, all on one line.

However, on IE8, these elements are rendered one below the other on the right side of the page.

I started looking into what's causing this by removing one line at a time and realized that getting rid of the:

<!DOCTYPE HTML>

from that HTML page, makes this show up fine even in IE8. Does anyone know what's causing a problem when is present on that page?

Of course, this is just a trimmed down version of my page and I do want to use the in my page for HTML5 features, so just removing it doesn't seem like solution.

Vincent
  • 13
  • 2

1 Answers1

1

I guess that's the bug with display: inline in IE8. Try using:

.test li {display: inline-block; }
Rohit Jain
  • 209,639
  • 45
  • 409
  • 525
  • Ha! That worked. Thank you! Of course, it now show has its own set of issues because if I render more than 1 element within a single li, the contents are rendered as block (which of course is what inline-block is supposed to do). But I think I can live with it or find some other trick to get past it. I can't believe anything as simple as this would be running into issues. By the way, do you have a link to that bug in IE, I just want to leave a note in the code for anyone else who plays around with that code. – Vincent Oct 14 '13 at 08:32
  • You can also try `float: left;`. May be that would do the job. – Rohit Jain Oct 14 '13 at 08:36