Solved

last image will not align correctly

Posted on 2008-06-12
20
259 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

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.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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…

632 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