# Firefox CSS Image Display Problem

**URL:** <https://forum.kirupa.com/t/firefox-css-image-display-problem/186505>\
**Category:** web dev\
**Created:** [April 21, 2006, 8:19pm UTC](https://forum.kirupa.com/t/firefox-css-image-display-problem/186505 "2006-04-21T20:19:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Theros](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@Theros](https://forum.kirupa.com/u/Theros)\
**Post date:** [April 21, 2006, 8:19pm UTC](https://forum.kirupa.com/t/firefox-css-image-display-problem/186505/1 "2006-04-21T20:19:36Z")

</div>

Hey all! I have a problem with Firefox today and well not IE, which usually isnt the case. But in this site here,  
In FF, the menu which is consisting of Images displays weirdly, what I mean is that I want the menu to be horizontal. But, in FF the images are kind stacked to the right except for the selected li item. But, in IE it displays actually fine. I can’t find the thing that is wrong with the menu code… Thanks to anyone that could help!

Heres the menu code

```auto
/*Menu Code Start*/
    
    #menu {
        height: 30px;
        width: 100px;
        clear:both;
    }
    
    #menu ul {
         margin: 0;
        padding: 0;
        display: block;
        list-style-type: none;
        
    }
    
    #menu li {
        margin: 0; 
        padding: 0;
        list-style: none;
    }
    
    #menu a {
        display:block;
        float: left;
        padding: 30px 0 0 0;
        height: 0px !important; 
        height /**/:30px; /* for IE5/Win only */
        clear: both;
    }
        
    #menu a:hover, #menu a.selected {
        background-position: -100px 0;
    }
    
    #menu a:active {
        background-position: 0 0 0 0; /* Without Declaring 0 0 0 0, in IE the menu is displayed lower*/
    }

    #thome a {
        width: 100px;
        background: url(images/home.jpg) top left no-repeat;
    }
    
    #tabout a {
        width: 100px;
        background: url(images/about.jpg) top left no-repeat;
    }
    
    #tstaff a {
        width: 100px;
        background: url(images/staff.jpg) top left no-repeat;
    }
    
    #tstories a {
        width: 100px;
        background: url(images/stories.jpg) top left no-repeat;
    }
    
    
    #tcontact a {
        width: 100px;
        background: url(images/contact.jpg) top left no-repeat;
    }
    
    /*End Menu Code*/

```

---

<div class="post-metadata">

**Author:** ![Theros](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@Theros](https://forum.kirupa.com/u/Theros)\
**Post date:** [April 22, 2006, 1:46pm UTC](https://forum.kirupa.com/t/firefox-css-image-display-problem/186505/2 "2006-04-22T13:46:30Z")

</div>

Bump

---

<div class="post-metadata">

**Author:** ![McGuffin](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mcguffin/32/408_2.png) [@McGuffin](https://forum.kirupa.com/u/McGuffin)\
**Post date:** [April 22, 2006, 1:51pm UTC](https://forum.kirupa.com/t/firefox-css-image-display-problem/186505/3 "2006-04-22T13:51:22Z")

</div>

the #menu display should be inline, not block, if you want them to display in a row, no?

And in IE7, the navigation doesn’t show up at all.

---

<div class="post-metadata">

**Author:** ![Theros](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@Theros](https://forum.kirupa.com/u/Theros)\
**Post date:** [April 22, 2006, 1:55pm UTC](https://forum.kirupa.com/t/firefox-css-image-display-problem/186505/4 "2006-04-22T13:55:22Z")

</div>

> [@McGuffin](#):
>
> the #menu display should be inline, not block, if you want them to display in a row, no?
> 
> And in IE7, the navigation doesn’t show up at all.

Er, I want a column right?

_EDIT_ I got it fixed, thanks for all the help