Forum Moderators: not2easy
<ul class="search_results_rows_even">
<li class="search_year">Year</li>
<li class="search_make">Make</li>
<li class="search_model">Model</li>
<li class="search_price">$price</li>
<li class="search_thumbnail"><img src="url"></li>
</ul>
This is the CSS:
.search_results_rows_even li {
display:inline;
list-style:none;
vertical-align:middle;
height:34px;
background-color:#DDDDDD;
}
.search_year {
width:44px;
display:block;
float:left;
clear:left;
}
.search_make {
width:104px;
display:block;
float:left;
overflow:hidden;
}
.search_model {
width:318px;
display:block;
float:left;
overflow:hidden;
}
.search_price {
width:49px;
display:block;
float:left;
}
.search_thumbnail img {
border:1px;
width:45px;
display:block;
float:left;
}
Here's a little technique I developed - adapted for your situation. Put an img tag in each li like so:
<ul class="search_results_rows_even">
<li class="search_year"><img class="valigner">Year</li>
<li class="search_make"><img class="valigner">Make</li>
<li class="search_model"><img class="valigner">Model</li>
<li class="search_price"><img class="valigner">$price</li>
<li class="search_thumbnail"><img src="url"></li>
</ul>
And in your CSS file put this:
.valigner
{
height:100%;
width: 0px;
vertical-align: middle;
visibility: hidden;
}
I tested that in both IE6 and FF2. It should work in all others as well - but test to make sure.
<li class="search_thumbnail"><img src="url"></li>
It will require some slight modification to your CSS though. First, add this:
.search_thumbnail
{
display:block;
float:left;
}
Then remove those two from attributes from the '.search_thumbnail img' css.
.valigner
{
height:100% !important;
width: 0px !important;
vertical-align: middle;
visibility: hidden;
}
And make sure it comes after the css for the search_thumbnail. That should cause it to align the img nicely!
Ryan
<style>
/* Search Odd Rows */
.search_results_rows_odd li {
display:inline;
list-style:none;
vertical-align:middle;
height:50px;
background-color:#EEEEEE;
}
.search_year {
width:44px;
display:block;
float:left;
clear:left;
padding-left:5px;
}
.search_make {
width:104px;
display:block;
float:left;
overflow:hidden;
}
.search_model {
width:295px;
display:block;
float:left;
overflow:hidden;
}
.search_price {
width:49px;
display:block;
float:left;
}
.search_thumbnail {
width:53px;
display:block;
float:left;
}
.search_thumbnail img {
width:45px;
}
.valigner
{
height:100% !important;
width: 0px !important;
vertical-align: middle;
visibility: hidden;
}
</style>
<ul class="search_results_rows_odd">
<li class="search_year"><img class="valigner"><a href="">Year</a></li>
<li class="search_make"><img class="valigner"><a href="">Make</a></li>
<li class="search_model"><img class="valigner"><a href="">Model</a>
</li>
<li class="search_price"><img class="valigner"><a href="">Price</a></li>
<li class="search_thumbnail"><img class="valigner"><a href=""><img src="url"></a></li>
</ul>
.search_thumbnail img {
width:45px;
}
to this:
.search_thumbnail img {
width:45px;
vertical-align:middle;
}
That should do it :D
Ryan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* Search Odd Rows */
#search_results_rows_odd {
}
.search_results_rows_odd li {
display:inline;
list-style:none;
vertical-align:middle;
height:50px;
background-color:#EEEEEE;
}
.search_year {
width:44px;
display:block;
float:left;
clear:left;
padding-left:5px;
}
.search_make {
width:104px;
display:block;
float:left;
overflow:hidden;
}
.search_model {
width:295px;
display:block;
float:left;
overflow:hidden;
}
.search_price {
width:49px;
display:block;
float:left;
}
.search_thumbnail {
width:53px;
display:block;
float:left;
}
.search_thumbnail img {
width:45px;
vertical-align:middle;
}
.valigner
{
height:100% !important;
width: 0px !important;
vertical-align: middle;
visibility: hidden;
}
</style></head>
<body>
<ul class="search_results_rows_odd">
<li class="search_year"><img class="valigner"><a href="">Year</a></li>
<li class="search_make"><img class="valigner"><a href="">Make</a></li>
<li class="search_model"><img class="valigner"><a href="">Model</a>
</li>
<li class="search_price"><img class="valigner"><a href="">Price</a></li>
<li class="search_thumbnail"><img class="valigner"><a href=""><img src=""></a></li>
</ul>
</body>
</html>
I ran your posted code through the validator, and couldn't reproduce the style error. If validating online, a trick is select verbose output under advanced options for more information about error messages - some of them are very obscure/ambiguous at first.
For your xhtml:
1. Your style element needs at least a type.
From this: <style>
To this: <style type="text/css">
2. For xhtml all elements/tags must close.
From this: <img class="valigner">
To this: <img class="valigner"/>
Those two issues affected elements further down the page, so fixing them resolved everything (except for the src and alt for images, of course).
Also consider whether you need to use xhtml - especially as you are sending it text/html. See the HTML forum Library for a thread Why most of us should not use xhtml [webmasterworld.com]. If you decide to change the doctype to html, the thread FAQ: Choosing the best doctype for your site [webmasterworld.com] has ideas for choosing the right one.
Edit reason To clarify only considered the validation issue
For the validating issues - stick with it, and don't be tempted to remove your doctype - that doesn't fix the problems - it just avoids identifying them.
Unless the problem is the doctype - as it was here (using the wrong one) ;)
