Css inline problem

I have a problem with the display:inline; css instruction. Below is the relevant css and html all to do with the same page. The #nav inline works ok, the .photo-item doesn’t. I’ve tried changing sizes, tried the float option but can’t get what I want.

You can see the #nav working but the photos not at http://www.mike-hayes.com/phptest/.

Be grateful for any input.

Mike

#nav ul
 {
  margin:                        0;
  padding:                       0;
  list-style:                 none;
  }

#nav li
 {
  display:                  inline;
  margin:                        0;
  padding:                       0;
  }

.item {
  margin:                     10px;
  padding:                    10px;
  border-bottom:   2px solid green;
  border-right:    2px solid green;
  }

.item p {
  margin:                     20px;
  }

.item li {
  margin-bottom:              20px;
  }

.photo-item {
  font-size:                 small;
  }

.photo-item ul {
  list-style:                 none;
  }

.photo-item li {
  display:                  inline;
  }

     <div class='item'>

      <div class='photo-item'>
        <ul>
          <li>
            <A HREF='sp-1.html' TARGET='_blank'>
              <IMG SRC='images/tspar-1.png' ALT='sparrows'    WIDTH='75' HEIGHT='63'>
            </A>
            <P>
             Where's my grub?
          </li>
          <li>
            <A HREF='sp-2.html' TARGET='_blank'>
              <IMG SRC='images/tspar-2.png' ALT='sparrows'    WIDTH='75' HEIGHT='63'>
            </A>
            <P>
             Mum on finals.
          </li>
          <li>
            <A HREF='sp-3.html' TARGET='_blank'>
              <IMG SRC='images/tspar-3.png' ALT='sparrows'    WIDTH='75' HEIGHT='63'>
            </A>
            <P>
             Are you ready?
          </li>
          <li>
            <A HREF='sp-4.html' TARGET='_blank'>
             <IMG SRC='images/tspar-4.png' ALT='sparrows'     WIDTH='75' HEIGHT='63'>
            </A>
            <P>
             Touchdown
          </li>
          <li>
            <A HREF='sp-5.html' TARGET='_blank'>
              <IMG SRC='images/tspar-5.png' ALT='sparrows'    WIDTH='75' HEIGHT='63'>
            </A>
            <P>
             Bon appetit
          </li>
        </ul>
      </div>

     </div>

Hi, if I’m understanding you right you just want the images on the same line? Add this CSS

.item{overflow:hidden;/*contain floats*/}
#main li{float:left;}

They are quite wide though so they all won’t fit on the same line :slight_smile:

Thanks for your suggestion but help it did not.

Mike

I’m not understanding what you are trying to accomplish? Are you wanting all the images to be on 1 line? with captions?

if above is what you are trying to do you will need to give the <li>'s a width and float:left. Then all the pics that will fit on one line will display on one line.

Hi, my code does work, although as I said depending on your monitor size htey might not appear on the smae line because each one is very wide and will most likely be on seperate lines.

Hi rustbuddy and ryan reese. Thanks for your input. I’ve done a quick fix using <table> but I’ll be using your suggestions to modify the page. I’ll get back when I’m done.

Mike

Hi rustbuddy.

It didn’t do it but thanks for your input.

Mike

Sorry you had to resort to tables, I know my code works but perhaps something else went wrong (I did an update via firebug and nothing broke thogh)

If you set up a dummy page with the old code I can help you there :).