I have a dynamic image gallery see www.craftsmangallery.co.uk/new/artists.php and within the gallery i am displaying several images. The problem is that the images are not all of the same proportionality and in order to make the gallery look realy neat and tidy i need to centre the images vertically within the block. See the link to get my meaning. disaply:table-cell; Only works on FF and i need this to work in IE. I also wish to avoid using html tables. If any one wishes to review my code and suggest a fix i would be most thankfull. Many thanks Steve
I also need to resize the image prior to display therefore setting the images as a background does not work It would be fine if i didnt need to reduce the image size (set the width to 100px in this case). This methodcould work if somebody knows of a method of resizing background-image with css.
Uhm... Line height? Yeah... Line Height. Set it to vertical-align:middle and set the line-height equal to the containing box. Since all that's there is a single image, it should work. Though you've got a classic case of overthinking your layout going on there, with some accessibility foibles as well. Images off your page has no heading, you aren't using heading tags for your obvious headings, you're throwing classes at things that don't need classes - here's a tip I've said a billion times: If every like element inside a container is getting the same class - don't put a class on them and style off the PARENT. Take this for example: <div id="topnavbar"> <div id="topnavbar"> <div id="navitem"><a href="index.php" class="navbutton">Home</a></div> <div id="navitem"><a href="artists.php" class="navbutton">Artists</a></div> <div id="navitem"><a href="#" class="navbutton">Picture Framing</a></div> <div id="navitem"><a href="#" class="navbutton">Contact Us</a></div> <!--<div id="navitem"><a href="#" class="navbutton">LINK 5</a></div>--> </div> </div> Code (markup): Extra wrapping div that's not needed, none of those 'navitem' classes should even be neccessary, and that's a menu which means shouldn't it be a unordered list? <ul id="mainMenu"> <li><a href="index.php">Home</a></li> <li><a href="artists.php">Artists</a></li> <li><a href="#">Picture Framing</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> Code (markup): at the MOST is all that's needed for the same functionality. Likewise you have the gallery items: <div class="artframe"><div class="artbox"><div class="artname">aaaaa bbbbb</div> <div class="artpicframe"> <div class="artpic"> <a class="artistlink" href="artistshowcase.php?artistid=9"><img class="valignimg" width ="100px" src="administration/itemims/1257462980.jpg" alt="this is the 2nd pic"/></a> </div> </div></div> Code (markup): ArtPic div is unneccessary, artbox div is unneccessary, artname box should probably be a heading tag (H3 by that point). In fact, that whole thing only needs ONE DIV. <div class="galleryItem"> <h3>Jason Bowden</h3> <a href="artistshowcase.php?artistid=1"> <img src="images/1254862945.jpg" alt="A painting of a nebula" /> </a> <!-- .galleryItem --></div> Code (markup): Is all I'd be using for those, and has MORE than enough hooks to apply the styling you are. Here, since it's a simple page I did a quick rewrite to show you what I mean: http://www.cutcodedown.com/for_others/steveJoseph/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/steveJoseph/ is unlocked so you can grab the gooey bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS2 if not for a few IE workarounds, tested working IE 5.5, 6, 7 & 8, FF 2 & 3, Opera 9.64 and 10, and the latest flavors of Safari and Chrome. I took some liberties and redid your background images to consume a heck of a lot less bandwidth and to be less files - I also tweaked the appearance a notch, you should be able to figure out how to undo that. I made it 768px wide so it's actually 800px friendly - since 800px is not 800px friendly (don't forget browser chrome like the scrollbar!)... If you didn't mean for 800px as your min-target, I'd probably find something to do with the extra 224px of width 1024 allots you. Now, some stuff that might need explaining: The H1 being the page header has the full text of the heading inside it. I took your image version of the text and overlay it atop the text version. This way images off users get a meaningful heading, and the text is also present for search engines to see. Simple gilder-levin image replacement using that empty span. The menu was pretty simple, though that .last class with a margin fixes a pesky problem where if a bunch of floats the same total width as their container are floated, the last one goes to a new line. Negative margin makes IE think the last one is smaller even though it renders the proper size. If you add or remove elements our total width may not divide evenly, so you could tweak that 1px of difference here if need be as well. (the overflow state on the UL may in fact do that for you with that negative margin!) #gallery is there mostly as a style hook and so that we don't have to think too hard about clearing for any other content. We just slap the standard overflow/haslayout triggers on that. All the .galleryItem elements are simply floated with a margin on ONE side. The reason for putting the margin on only one side is again to avoid that IE float width problem - and to make sure we get the same padding around all of them (just looks more professional IMHO to use the SAME padding everywhere) I use the same image for the h3 and the anchor, but I apply them separately so that if you wanted you could expand how tall they are. Going fixed height top-left on the heading and bottom-left on the anchor gives us some 'play' on the height. Instead of fixing the width on the images, I chose to set max-width and max-height on them for the browsers that support it (IE7/newer, everyone else). I then do the little tiny 'fixed' size version you were doing for IE6 only. * HTML hack a hell of a lot better than bloating out the markup with that conditional ****otry. IE has a number of quirks with how we're trying to position those, and fixing those quirks screws up Opera and Webkit. Opera/Webkit will sometimes force the line-height taller if you set the font-size the same... while IE6/earlier ignores line-height for vertical-align and obeys font-size instead... So we set just line-height in ".galleryItem a" and then stuff a line-height/font-size setting behind a * html hack. You'll also notice I use a single 1px tiled background for the H1 and #footer. Just simpler/more consistent that way, and tricks like that and the gilder-levin image replacement result in significant bandwidth savings - case in point we go from 165k in five images to 15k in four images. I'd highly suggest as others have that optimize down those other images before showing them though - while resizing them before putting them on the page can be a PITA, it's worth it for the bandwidth savings since right now they're sucking down 360k for what should probably not even take 30k. (and by themselves are twice the upper limit I'm comfortable with for a page size) - You might want to look into having PHP handle that for you - the best approach I've found for doing that is to set up a subdirectory for the image handler, which has a subdirectory in that for 'full-size' images. When you call the parent directory if apache finds the resized image, it sends that, otherwise send the 404 to php to have GD resize the image, save the resized version so future calls don't go to the php, and then send the image. In any case, hope this helps - basically, yes it can be done so long as all you need to do is position an image top to bottom inside a fixed height container.