Solved

last image will not align correctly

Posted on 2008-06-12
20
255 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

867 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now