Solved

last image will not align correctly

Posted on 2008-06-12
20
252 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

760 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

20 Experts available now in Live!

Get 1:1 Help Now