Solved

last image will not align correctly

Posted on 2008-06-12
20
256 Views
Last Modified: 2013-11-19
I am building a photo gallery website.  I am using vb.net, html and css to build the site.  I am trying to make a bar across the bottom of the page for my thumbnail images.  The problem is the last image in the row will not align correctly.  For an example view http://www.leezacentral.com/new/photos.aspx?pn=austiny.

This is my HTML:

 <div id="thumblist">
        <ul>
          <li><img src="images/thumb_gatormail.jpg" align="middle"/></li>
          <li><img src="images/thumb_gatormail.jpg" align="middle"/></li>
          <li><img src="images/thumb_gatormail.jpg" align="middle"/></li>
          <li><img src="images/thumb_gatormail.jpg" align="middle"/></li>
          <li><img src="images/thumb_gatormail.jpg" align="middle"/></li>
          <li><img src="images/thumb_gatormail.jpg" align="middle"/></li>
        </ul>
When I use this, the images all hover at the top of the box.  If I remove the align="middle" from the last image then the first 5 align correctly but the last one does not (this is how it is currently set up on the site).

My CSS for the list looks like this:

#thumblist {
      position:absolute;
      height:73px;
      margin:0px auto;
      left:10px;
      top:405px;
      text-align:center;
}

#thumblist ul {
      list-style: none;
      padding:0px;
      margin: 0px;
      height:73px;
      width:429px;
      background-color:#000000;      
      background:url(../images/film_back.png) no-repeat center ;
      }

#thumblist li {
      float: center;
      line-height:50px;
      display:inline;
      text-align: center;
      padding:0px;
      background-color:#000000;
}


Help please!!
0
Comment
Question by:lharrispv
  • 8
  • 6
  • 2
  • +2
20 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 21774621
Try placing the line-height declaration on the <ul> instead of the <li>s.

The align attribute is deprecated. Use vertical-align:middle instead.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21775079
put a <BR><BR> after the </UL>  Maybe only one <BR> if you don't want space below.
0
 
LVL 2

Expert Comment

by:Keale2
ID: 21776034
Use of the <br/> tag should be avoided. It is purely visual, and serves no semantic purpose.

You have your list items float property set to center. The only values the float property can be set to are left, right, none, and inherit. Try floating these left.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21776071
"Use of the <br> tag should be avoided. It is purely visual, and serves no semantic purpose."

nonsense.  you can't stand to even let him try it?  HOw narrow.  There is nothing semantic about 2 breaks
0
 
LVL 42

Expert Comment

by:David S.
ID: 21776178
<br>s are useful for marking up poetry and building/postal addresses, but people do tend to use them in place of better alternatives.

This is a presentational issue and should be handled with CSS.

@Keale2  Thanks for speaking up.
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21779968
Thanx all but none of those suggestions worked.  Oh and when I swapped the align="middle" out for vertical-align="middle" everything lines up at the top.  This is regardless as to whether or not I leave the last one out.  I also tried vertical-align="bottom" but again everything is at the top.
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21779972
oh and I am a she not a he :-)
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 21780785
Did you try putting padding on the top and bottom of the li, it looks like you need about 2px on top and bottom.
The last image is no longer bumped up, so that worked.
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21780896
nope that does not work either :-(
0
 
LVL 2

Accepted Solution

by:
Keale2 earned 500 total points
ID: 21781153
If you set the position of the ul to relative, you can apsolutely align the list items.

A better solution is to leave your list items as block level and float them left. Set the margins or padding for them so they work in good browsers, then set a separate margin/width for Internet Explorer. Also, remove the height and width from the unordered list. You may have to remove absolute positioning for your container divs.

0
 
LVL 17

Expert Comment

by:nanharbison
ID: 21781169
when I click on your link to look at it, the page is blank? I would like to see how the page looks right now, can you put it back?
0
 
LVL 8

Author Closing Comment

by:lharrispv
ID: 31466780
Thank you very much!!  While suggestion was not the 100% complete answer it did give me what I needed.  Setting margins and padding did the trick!  Now I just need to get it to line up in Firefox too LOL
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21781425
I just realized I need to give partial credit credit to two of you rather then full to just one.... How do I go back and change that?
0
 
LVL 42

Expert Comment

by:David S.
ID: 21782459
@lharrispv

You don't recognize CSS when you see it? vertical-align is a CSS property, not an [X]HTML attribute.

I meant you should make a new style rule like this:

#thumblist img {
  vertical-align: middle;
}
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21782466
I tried it there too... didn't work... only margins and padding did
0
 
LVL 42

Expert Comment

by:David S.
ID: 21782509
Did you try it at the same time the line-height was specified on the <ul> instead of the <li>s? I was not clear that both changes should be made at the same time.
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21782547
yes... still does not work.
0
 
LVL 42

Expert Comment

by:David S.
ID: 21782572
Hmm... Which browser(s) are you testing it in? It worked in Firefox 2 for me. IE has trouble with vertical-align sometimes.
0
 
LVL 8

Author Comment

by:lharrispv
ID: 21782610
well I will admit I design half-***** backward... I design for IE7 then 6 and then Firefox.  With the way that MS supports CSS I have found this less troublesome then starting with FF as it is easier to take wacked CSS code and normalize it for FF then to find work arounds for IE6 and 7 with normalized code.

With that said I am testing currently in IE7.
0
 
LVL 42

Expert Comment

by:David S.
ID: 21783231
For me, I find it easier to code to standards and then add fixes for IE.

It seems that IE7 would need additional help for the method I was suggesting to work in it.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question