Style sheet is selecting wrong rows

HTML & CSS
1

I am working on a new design for my gallery pages, e.g.,
http://www.vintagetextile.com/gallery_designer.htm
, based a great design by Ronpat for my category pages, e.g., http://www.vintagetextile.com/edwardian.htm

The problem is that the modified style sheet, “gal_new.css” is treating the first (and all odd) row(s) as even rows and treating the 2nd (and all even) row(s) as if they were odd rows:
The first row imagebox is placed in the center row with the default white background, whereas it should be placed flush left with a gray background.
Sample code and styles follow.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>>Gallery of designer vintage clothing at Vintage Textile</title>
    <meta name="description" content="Gallery of designer vintage clothing (1960s to the 1980s). High-style vintage clothing for the discriminating collector." />
<meta name="keywords" content="designer fashion" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="style_sheets/gal_new.css" rel="stylesheet" type="text/css" />
    <link href="style_sheets/galmenus.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script type="text/javascript" src="js/respond.min.js"></script>
    <style type="text/css">
.item {border-bottom:1px solid #888;}
.item + .item {margin-top:6px;}
    </style>
<![endif]-->
</head>
<body id="galdesign">
<div class="outer">
    <h1>Gallery of Designer Vintage Clothing</h1>
    <div class="logo">
<a href="index.html"><img src="images/Graphics/logoindex.gif" alt="VintageTextile.com" width="263" height="69" /></a></div>
    <ul class="nav head main">
        <li><a href="early.htm">Early</a></li>
        <li><a href="victorian.htm">Victorian</a></li>
        <li><a href="edwardian.htm">Edwardian</a></li>
        <li><a href="1920s_to_1930s.htm">1920s to 1930s</a></li>
    <li><a href="1940s_to_designer.htm">1940s to Designer</a></li>
        <li><a href="shawlstext.htm">Shawls/Textiles</a></li>
        <li><a href="gallery.htm">Gallery</a></li>
        <li><a href="treasure_hunt.htm">Treasure Hunt</a></li>
        <li><a href="searchvt.htm">Search</a></li>
        <li><a href="order.htm">To Order</a></li>
        <li><a href="mailto:Linda@vintagetextile.com">Email</a></li>
        <li><a href="index.html">Home</a></li>
        </ul>

     <ul class="nav head galfont">
        <li class="galearly"><a href="gallery_early.htm">Early Gallery</a><span>Early Gallery</span></li>
  <li class="galvic"><a href="gallery_victorian.htm">Victorian Gallery</a><span>Victorian Gallery</span></li>
  <li class="galedward"><a href="gallery_edwardian.htm">Edwardian Gallery</a><span>Edwardian Gallery</span></li>
        <li class="galtwenties"><a href="gallery_1920s.htm">1920s Gallery</a><span>1920s Gallery</span></li>
    <li class="galforties"><a href="gallery_1930s_50s.htm">1930s to 1950s Gallery</a><span>1930s to 1950s Gallery</span></li>
     <li class="galdesign"><a href="gallery_designer.htm">Designer Gallery</a><span>Designer Gallery</span></li>
           </ul>
    <h2 class="click">Gallery items have been sold. Click <a class="her" href="1940s_to_designer.htm">here</a> for current items for sale.</h2>

        <div class="item">
            <div class="imagebox"><img src="images/Gallery/2336x.jpg" alt="Mixed Irish lace wedding dress, c.1910" width="300" height="400" /></div>
            <div class="descript">
                    <p><strong>Zandra Rhodes</strong> beaded silk dress, late 1970s. Featuring the &quot;Mexican Turnaround&quot; print (The Art of Zandra Rhodes,1985). Store label: &quot;Martha&quot;. </p>   </div> </div>
        <div class="item">
            <div class="imagebox"><img src="images/Gallery/2308x.jpg" alt="Beaded net overblouse, c.1912" width="300" height="400" /></div>
            <div class="descript">
              <p><strong>Halston</strong> chiffon jumpsuit, mid 1970s. Label: &quot;Halston&quot; at the waist. </p> </div> </div>

  "gal_new.css"
body{background-color:#fff; font:medium Verdana,Tahoma,Helvetica,sans-serif;}

*, *:before, *:after {    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;}
.outer {
    width:90%;
    margin:0 auto;}
h1 {    color:#fff;
    background-color:#535353;
    font:1.35em "Bookman Old Style";
    padding:0.2em 22px 0.35em;
    margin-bottom:0.7em;}
	
	h2 {    color:#000;
    background-color:#fff;
    font:bold 1.125em Verdana,Tahoma,Helvetica,sans-serif;
    padding:0 16px;}	
	
.logo { text-align:center;
    margin-bottom:20px; }
.logo img {
    max-width:100%;
    height:auto;
    border:0 none;
.item {    overflow:hidden;}
.item > div {
    display:table-cell;
    vertical-align:middle;
    padding:0;}
	
.item .imagebox { padding-right:20px;}
.item:nth-child(odd) .descript {    padding-left:300px;}
.item img
{display:inline-block;
    width:300px;
    height:400px;
    vertical-align:top;
    text-align:center;
     border:0 none;   /* IE */}
	
.item:nth-child(even) {margin-left:300px;}

.item:nth-child(odd) {background-color:#e5e5e5;}
2

oh, you are gonna kick yourself. :wink:

You have a typo in your CSS. You didn’t have a closing bracket for the .logo img rule.

.logo img {
    max-width:100%; 
    height:auto;   
    border:0 none;   [B]}[/B]

That should fix it

3

Phoenix, you are right about the lack of closing bracket in my post. But that was only an omission in my post here. I have the closing bracket in the style sheet, which passed CS3 validation.

Strangely, if I reverse the “odd” and “even” in the style sheet to the opposite of what they should be, e.g., to this:


.item > div {    display:table-cell;    vertical-align:middle;    padding:0;}
.item .imagebox { padding-right:20px;}
.item:nth-child(even) .descript {    padding-left:209px;}
.item:nth-child(odd) {margin-left:209px;}
.item:nth-child(even) {background-color:#e5e5e5;}

then the page looks right with the odd rows properly having a gray background and the even rows with margin-left:209px

I knew that but hoped someone could explain what is going on here.

Another issue is the small tablet styles:

@media only screen and (max-width:700px)
      {  .item .imagebox {float:left;}
    .item .descript {display:block;}
    .item p {font-size:.9375em; margin-left:20px;}

For the desktop, large tablet, and phone, .item.descript are properly centered vertically in their box.
But for the above small tablet, the text in that box is not centered but is top-aligned. For reasons that are unclear, the vertical-align: middle style that should be inherited on all screen widths is ignored for the small tablet only.

4

Remember that parent <div class="content"> around .items that we talked about and I strongly recommended that you NOT delete it? Well, now you need it. Without that reference container, :nth-child is picking another, only this time it’s inconveniently different.

Remember to specify that you are using Dreamweaver Design View rather than REAL devices when you report issues.
How does it behave when a real browser window is narrowed to less than 700px?

Can you post a link to the working code?

5

Hi Ron:
Thanks for taking a look at my amateur work in progress. As you warned me, I should have retained those bracketing <div> tags around the first and last <item>s. You said that might prove useful–an understatement!
After reinserting the bracketing <div>s, the style sheet worked as it should.
I no longer use DW Design View Multiscreen to preview. As you suggested, I open the page up in FF and narrow the screen.
My edwardian page is the first of the 6 category pages that has gone live. The other 5 will do so on 3/20. Although I don’t have a tablet or smart phone, edwardian.htm looks good to me.
Here is a link to the work in progress, “gallery_designer_new.htm.”
http://www.vintagetextile.com/gallery_designer_new.htm
In desktop and large tablet views, it looks pretty good.
In the small tablet view (in a real browser), the text is top-aligned, instead of middle-aligned, a minor issue.
However, in phone view, the design breaks down completely.

6

If you would keep your code human readable, the mistakes made creating this new page would have been avoidable. In other words, respect the indents in the HTML and CSS, including the curly braces in CSS. It makes the code easy to read and easy to spot errors.

Except for the few minor changes in font size and padding/margin, the style sheets should be interchangable. Practically speaking, your should be able to settle on one stylesheet for both pages. You do need another menu stylesheet, as you wrote.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Gallery of designer vintage clothing at Vintage Textile</title>
    <meta name="description" content="Gallery of designer vintage clothing (1960s to the 1980s). High-style vintage clothing for the discriminating collector.">
    <meta name="keywords" content="designer fashion,James Galanos,Christian Dior,Pedro Rodriguez,Bob Mackie,Valentino,Zandra Rhodes,Halston,Pucci,Balenciaga,Mori,Chanel,Galliano,Pierre Balmain,Fendi,Christian Lacroix">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style_sheets/gal_new1a.css" rel="stylesheet" type="text/css">
    <link href="style_sheets/galmenus1a.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script type="text/javascript" src="js/respond.min.js"></script>
    <style type="text/css">
.item {border-bottom:1px solid #888;}
.item + .item {margin-top:6px;}
    </style>
<![endif]-->
</head>
<body id="galdesign">
<div class="outer">
    <h1>Gallery of Designer Vintage Clothing</h1>
    <div class="logo">
        <a href="index.html"><img src="images/Graphics/logoindex.gif" alt="VintageTextile.com" width="263" height="69"></a>
    </div>
    <ul class="nav head main">
        <li><a href="early.htm">Early</a></li>
        <li><a href="victorian.htm">Victorian</a></li>
        <li><a href="edwardian.htm">Edwardian</a></li>
        <li><a href="1920s_to_1930s.htm">1920s to 1930s</a></li>
        <li><a href="1940s_to_designer.htm">1940s to Designer</a></li>
        <li><a href="shawlstext.htm">Shawls/Textiles</a></li>
        <li><a href="gallery.htm">Gallery</a></li>
        <li><a href="treasure_hunt.htm">Treasure Hunt</a></li>
        <li><a href="searchvt.htm">Search</a></li>
        <li><a href="order.htm">To Order</a></li>
        <li><a href="mailto:Linda@vintagetextile.com">Email</a></li>
        <li><a href="index.html">Home</a></li>
    </ul>
    <ul class="nav head galfont">
        <li class="galearly"><a href="gallery_early.htm">Early Gallery</a><span>Early Gallery</span></li>
        <li class="galvic"><a href="gallery_victorian.htm">Victorian Gallery</a><span>Victorian Gallery</span></li>
        <li class="galedward"><a href="gallery_edwardian.htm">Edwardian Gallery</a><span>Edwardian Gallery</span></li>
        <li class="galtwenties"><a href="gallery_1920s.htm">1920s Gallery</a><span>1920s Gallery</span></li>
        <li class="galforties"><a href="gallery_1930s_50s.htm">1930s to 1950s Gallery</a><span>1930s to 1950s Gallery</span></li>
        <li class="galdesign"><a href="gallery_designer.htm">Designer Gallery</a><span>Designer Gallery</span></li>
    </ul>
    <h2>Gallery items have been sold. Click <a href="1940s_to_designer.htm">here</a> for current items for sale.</h2>
    <div class="content">
        <div class="item">
            <div class="imagebox"><img src="images/Thumbnails/2336thumb2.jpg" alt="Mixed Irish lace wedding dress, c.1910" width="209" height="325"></div>
            <div class="descript">
                <p><strong>Zandra Rhodes</strong> beaded silk dress, late 1970s. Featuring the &quot;Mexican Turnaround&quot; print (The Art of Zandra Rhodes,1985). Store label: &quot;Martha&quot;. </p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><img src="images/Thumbnails/2308thumb2.jpg" alt="Beaded net overblouse, c.1912" width="209" height="325"></div>
            <div class="descript">
                <p><strong>Halston</strong> chiffon jumpsuit, mid 1970s. Label: &quot;Halston&quot; at the waist.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_826.htm"><img src="images/Thumbnails/c380thumb2.jpg" alt="Lucien Lelong beaded cape,c.1914" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#c380</b><b>$4,200</b></div>
                <p><a href="new_page_826.htm">Lucien Lelong beaded evening cape, c.1914.</a> Early, intact Lelong designs are very rare. The brilliant, contrasting hues herald the creative genius of the master couturier. The shapely draped lower back and the arm slits personify the fashion forward look of 1914. This resplendent evening cape already placed the young Lelong at the pinnacle of dressmaking and embellishment&#8212;fashion as art.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_692.htm"><img src="images/Thumbnails/2705thumb2.jpg" alt="Edwardian peignoir" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2705</b><b>$1,600</b></div>
                <p><a href="new_page_692.htm">Silk and lace peignoir, c.1905.</a> With its flowing Watteau back and abundant re-embroidered lace ruffles, our charming peignoir is the epitome of Edwardian extravagance in dress. The large cape collar and cascading front ruffles add to the drama. The graceful sleeves are open to the shoulders in front, hidden behind the ruffles. The seductive allure and delicate femininity of the floral lace is to die for!</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_241.htm"><img src="images/Thumbnails/c426thumb2.jpg" alt="Brussels lace wedding dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#c426</b><b>$11,900</b></div>
                <p><a href="new_page_241.htm">Brussels handmade mixed lace wedding dress, c.1905.</a> The grand lace wedding dress has panels of <em>Point de Gaze</em> needlepoint lace surrounded by <em>Duchesse bobbin lace</em>. The dress has the fluid ease of a 1930s evening dress plus the heirloom mystique of antique Brussels lace. There inheres in our noble wedding dress an uncommon beauty that is both historic and classic.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_586.htm"><img src="images/Thumbnails/2765thumb2.jpg" alt="French cashmere coat,c.1905" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2765</b><b>$2,300</b></div>
                <p><a href="new_page_586.htm">French cashmere coat trimmed with Irish crochet, c.1905.</a> The super luxe coat from <em>Francis &amp; Co.</em> (Paris) is an exemplar of early Edwardian style. The Irish crochet flowers are bold and gutsy; the wide angel-wing sleeves are very dramatic. Made from ivory cashmere wool, the opulent coat is so well preserved that it still has the original black silk georgette behind the Irish crochet.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_555.htm"><img src="images/Thumbnails/2767thumb2.jpg" alt="Redfern silk cape" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2767</b><b>$3,200</b></div>
                <p><a href="new_page_555.htm">Redfern natural silk cape, c.1901.</a> Sturdy and wearable, the stylish cape has the solid construction of a gentleman's garment. The choice of a menswear plaid lining was an inspired touch. The romantic, full-gathered hood could be right out of a Gothic novel like <em>Jane Eyre</em>; while the dramatic cutwork pattern on the black leather trim is like the arcane insignia of the fashion elite.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_575.htm"><img src="images/Thumbnails/7363thumb2.jpg" alt="Edwardian wide brim hat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7363</b><b>$950</b></div>
                <p><a href="new_page_575.htm">Wide-brim straw hat with original trim, c.1910.</a> What a treat to find an all original, antique extra-wide-brim hat! The romantic appeal of the wide brim, which beautifully frames the face, makes the  style a perennial favorite with collectors. Made from natural colored straw, the hat has the original decoration of ivory ostrich plumes and charming bouquets of forget-me-not like fabric flowers.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_242.htm"><img src="images/Thumbnails/2312thumb2.jpg" alt="Edwardian lace dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2312</b><b>$2,300</b></div>
                <p><a href="new_page_242.htm">Battenberg lace trained skirt &amp; jacket, c.1905.</a> Battenberg lace garments convey a sense of style, distinction, and natural refinement. The large, varied motifs are pleasingly arranged. This one has a superb lace pattern and a dramatic cut. The skirt, quite smooth over the hips, is fuller in back, ending with a graceful train. The bolero-style jacket, open in front below the button, has three-quarter-length sleeves and is shorter in back.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_25.htm"><img src="images/Thumbnails/2616thumb2.jpg" alt="Battenburg wedding dress,c1905" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2616</b><b>$1,600</b></div>
                <p><a href="new_page_25.htm">Battenberg silk lace wedding dress, c.1905.</a> Made from hand-assembled silk Battenberg lace, the long princess line shaping fits smoothly through the upper torso, flares below the hipline, and ends in a graceful back train. The mellow champagne hue glows with romantic conjugal love. Battenburg lace garments convey a sense of style, distinction, and natural refinement.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_39.htm"><img src="images/Thumbnails/1411thumb2.jpg" alt="Belle Epoque gown" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#1411</b><b>$1,450</b></div>
                <p><a href="new_page_39.htm">Belle &Eacute;poque silk crepe gown, c.1902.</a> Made from delicious raspberry pink silk crepe, this endearing gown personifies the Gibson Girl, the  icon of feminine beauty created by illustrator Charles Dana Gibson. In all original condition, our captivating <em>Belle &Eacute;poque</em> gown is a special find for the collector because it still has the famous S-bend shape of the period.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_476.htm"><img src="images/Thumbnails/6959thumb2.jpg" alt="Edwardian tea dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#6959</b><b>$1,200</b></div>
                <p><a href="new_page_476.htm">Irish crochet/embroidered tulle tea dress, c.1912.</a> The deeply cut armholes and full sleeves are quite comfortable. The pattern on the skirt features high relief, padded satin stitch embroidery.  I can see a gracious hostess in this tea dress: nothing could be more perfect than the costume; pure ivory, but the fashion consummate; a single rose her only ornament.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_442.htm"><img src="images/Thumbnails/2707thumb2.jpg" alt="Titanic Titanic era evening coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2707</b><b>$2,400</b></div>
                <p><a href="new_page_442.htm">Beaded and embroidered net coat, c.1912.</a> The cutaway style that dips down to a train in back epitomizes   Edwardian elegance. The plush raised effect of the ribbon embroidery is   enhanced by a mix of sparkling faceted beads. The whimsical, aristocratic refinement of the embroidered motifs still shows an Art Nouveau influence&mdash;the intricate curvilinear motifs, whose subtle elaborations have a memorable beauty.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_587.htm"><img src="images/Thumbnails/2764thumb2.jpg" alt="Battenburg lace coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2764</b><b>$1,950</b></div>
                <p><a href="new_page_587.htm">French tape lace coat, c.1905.</a> With the original chiffon ruffles, the plush coat is a special find for the  collector who appreciates unaltered design. The sheer chiffon ruffles are remarkably well preserved.  Tape lace is the ideal medium for the crisp, clean beauty of the charming tape lace motifs, which are intricate, bold, and texturally exciting.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_140.htm"><img src="images/Thumbnails/4000thumb2.jpg" alt="Edwardian coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#4000</b><b>$2,500</b></div>
                <p><a href="new_page_140.htm">Orientalism-inspired wool coat, c.1912.</a> Wide kimono sleeves, a high stand-up collar, and a straight cut. The black cloud-form pattern is embroidered with curled wool yarn and outlined with black cord. The brilliant coat perfectly captures the mood of the period. As exciting and wearable today as 100 years ago, this stunning coat is <span class="bi">a peerless exemplar of Orientalism</span> in fashion.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_271.htm"><img src="images/Thumbnails/c338thumb2.jpg" alt="Edwardian lace gown" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#c338</b><b>$2,100</b></div>
                <p><a href="new_page_271.htm">Chantilly lace gown, c.1905.</a> The bodice has the full pigeon-breasted front typical of the period. The skirt is cut longer and fuller in back, forming a small train. The grand gown is noteworthy for the unusual addition of colorful floral appliqu&eacute;s and for the use of black velvet bands to highlight the texture. The textural elements&mdash;Chantilly lace inserts and appliqu&eacute;s, rows of tucks, and black velvet ribbon bands&mdash;really stand out.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_258.htm"><img src="images/Thumbnails/c429thumb2.jpg" alt="Worth couture coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#c429</b><b>$7,800</b></div>
                <p><a href="new_page_258.htm">Worth numbered couture coat, c.1910.</a> With a circular cut, the spectacular coat is smooth across the shoulders, falling to the hem in deep folds. Jean-Philippe Worth's Persian-style border design has larger-than-life <em>botehs</em> in a reverse pattern. From the greatest name in fashion history, the coat combines the luxurious exoticism of the East with the peerless styling of Paris haute couture.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_4.htm"><img src="images/Thumbnails/c335thumb2.jpg" alt="Chinese embroidered coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#c335</b><b>$2,200</b></div>
                <p><a href="new_page_4.htm">Hand-embroidered Chinese silk coat, c.1904.</a> The majestic coat is hand embroidered with bouquets of flowers in shades of gold, rose, ivory, and gray silk floss. The design incorporates subtle textures through a variety of stitches and corded soutache. The slightly flared style was perfect over the slim dresses of the 1910s and will work just as well over a modern slip dress. The sleeves are cut-in-one with the body of the coat for a relaxed, easy fit.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_190.htm"><img src="images/Thumbnails/2598thumb2.jpg" alt="Irish crochet tunic" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2598</b><b>$1,850</b></div>
                <p><a href="new_page_190.htm">Irish crochet dress tunic, c.1910.</a> The  princess-line skirt seams are open  below the waist&#8212;provocative construction rarely seen in Irish crochet garments. The two vertical lace panels bracketing the bodice visually lengthen the silhouette. The romantic floral design incorporates large hand-embroidered roses. The padded, high relief embroidery is the perfect complement to the 3-dimensional Irish crochet flowers.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_244.htm"><img src="images/Thumbnails/2579thumb2.jpg" alt="Edwardian evening coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2579</b><b>$1,900</b></div>
                <p><a href="new_page_244.htm">Beaded devor&eacute; velvet evening wrap, c.1914.</a> Made from  rose colored velvet cut to a ground of navy blue chiffon, the fluid unstructured shape will take on the personality of the wearer. The navy chiffon sections are covered with iridescent glass beads. The plump velvet roses are bordered with bands of meandering <em>fleurs-de-lis.</em> The sublime roses in bloom have a haunting beauty with their vivid verisimilitude.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_722.htm"><img src="images/Thumbnails/4106thumb2.jpg" alt="Edwardian hat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#4106</b><b>$850</b></div>
                <p><a href="new_page_722.htm">High style brown velvet hat, c.1910.</a> I love the sophisticated elliptical shape with the narrow rolled brim that curls up to meet the extravagantly decorated crown. The brim is covered with matching brown ostrich feathers, two of which form a faux bow in back. The tour de force of the milliner's decorative art is the use of brown mink pom-poms and velvet pine cones. The orange velvet rose adds a dash of color.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_38.htm"><img src="images/Thumbnails/7237thumb2.jpg" alt="Edwardian lace dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7237</b><b>$1,400</b></div>
                <p><a href="new_page_38.htm">Beaded black lace dress, c.1918.</a> The bodice and skirt front are embellished with jet-black beads and sequins, adding sparkle to the black-on-black design. The subtle refinement of the diaphanous sleeve design on the sleeves is beyond compare, while the gossamer delicacy of the floral motifs have a magical allure. Here is a dress for a woman whose very manner and style intimates the seductive sophistication of the evening.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_15.htm"><img src="images/Thumbnails/7185thumb2.jpg" alt="Edwardian style blouse" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7185</b><b>$750</b></div>
                <p><a href="new_page_15.htm">Edwardian style vintage blouse, 1970s.</a> Finely fashioned from peach colored silk <em>crepe de chine</em> with French seams and rows of pin tucks, the princess line seams give the blouse a figure flattering shape. The hem border is of expensive handmade Cluny lace. This beauty gives you the romantic allure of an antique in a garment sturdy enough to wear.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_75.htm"><img src="images/Thumbnails/2757thumb2.jpg" alt="Edwardian tea dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2757</b><b>$750</b></div>
                <p><a href="new_page_75.htm">Two-piece cotton day dress, c.1905.</a> The petal-soft pink hue of our ultra-feminine tea dress is a pleasant alternative to the standard white. The masterful ornamentation is to die for! The bodice is embellished with charming ruffles, lace inserts, and  narrow tucks; the skirt is decorated with rows of wide tucks. The pretty puffed sleeves on the blouse is a delightful touch.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_228.htm"><img src="images/Thumbnails/2650thumb2.jpg" alt="Edwardian tea dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2650</b><b>$975</b></div>
                <p><a href="new_page_228.htm">Embroidered tea dress, c.1910.</a> The pristine dress is lavishly decorated with machine embroidered cutwork and lace inserts. I love the scalloped edge on the neckline. With their endearing feminine charm, the floral motifs on the bodice intimate the eternal mystery of woman's beauty. Despite the elaboration of decorative elements, the dress has an unaffected naturalness that wins the heart.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_726.htm"><img src="images/Thumbnails/c201thumb2.jpg" alt="Edwardian wedding gown" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#c201</b><b>$2,100</b></div>
                <p><a href="new_page_726.htm">Commodore Perry estate satin wedding gown, c.1908.</a> The figure-flattering, princess line seams mold the gown to the torso without adding bulk at the waist and hip. The deep neckline opening is trimmed with swags of faux pearls and lace flounces that form graceful partial sleeves. What could be more romantic than bare shoulders with just a hint of delicate lace cover?</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_104.htm"><img src="images/Thumbnails/7342thumb2.jpg" alt="Edwardian coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7342</b><b>$850</b></div>
                <p><a href="new_page_104.htm">Wool melton coat, c.1900.</a> The wide sailor collar and cuffs of black velvet trimmed with braided soutache give an exotic charm to the surplice-style coat, which is fuller in back, falling in graceful folds. The full raglan sleeves and coat back are shaped with decorative seaming detail. You would have to pay $2700-$3000 to find such masterly decoration on a designer coat.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_41.htm"><img src="images/Thumbnails/1985thumb2.jpg" alt="Edwardian tea gown" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#1985</b><b>$1,400</b></div>
                <p><a href="new_page_41.htm">B. Altman</a><a href="new_page_41.htm"> French satin tea gown, c.1900.</a> The style is borrowed from 18th century open robes. Here the open front of the skirt is filled in with delicate lace where the petticoat would have been in the open robe. A handwritten label with the name of the original owner reads &quot;Mrs. J.W. Tillinghast,&quot; a society figure in 1900. Included with the dress will be a replica of the original New York Times society page of July 28, 1906 with a full report on the social event.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_62.htm"><img src="images/Thumbnails/2620thumb2.jpg" alt="Edwardian lingerie jacket" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2620</b><b>$650</b></div>
                <p><a href="new_page_62.htm">French lace lingerie jacket, c.1905.</a> Made from lightweight white cotton broadcloth with inserts of matching cotton lace, this beauty has exceptionally fine detail: ******ed seams, pin tucks, wider tucks, and a hand-embroidered monogram. It closes in front with concealed buttons and a neckline  tie. Handmade French vintage lingerie is not only exquisitely beautiful but also has a well deserved reputation for working &quot;bedroom magic&quot; on the wearer's partner.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_137.htm"><img src="images/Thumbnails/7289thumb2.jpg" alt="Edwardian tea dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7289</b><b>$850</b></div>
                <p><a href="new_page_137.htm">B. Altman embroidered tea dress, c.1912.</a> The outer layer has alternating panels of blue cotton batiste and white cotton tulle embellished with embroidered blue floral appliqu&eacute;s. The under layer is of plain white cotton tulle. The embroidered floral appliqu&eacute;s are of the last degree of charm. Wispy tendrils caress the flowers in a masterful display of the embroiderer's art.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_200.htm"><img src="images/Thumbnails/7324thumb2.jpg" alt="Edwardian linen coat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2463</b><b>$850</b></div>
                <p><a href="new_page_200.htm">Hand-embroidered linen coat, c.1910.</a> Hand-embroidered white linen has the enduring appeal of a classic perhaps because linen garments remain crisp, clean, cool, and fresh in the hottest weather. The wide three-quarter-length sleeves are perfect for summer. The charming floral motif on the skirt, sleeves, and back is like a captivating musical theme with variations.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_425.htm"><img src="images/Thumbnails/2463thumb2.jpg" alt="Edwardian day dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2463</b><b>$925</b></div>
                <p><a href="new_page_425.htm">Hand-embroidered linen/lace ensemble, c.1910.</a> The high waist and the two vertical panels emphasize the long lines of the silhouette. The  panels almost appear continuous from the vest to the skirt. Both the long sleeved dress and the sleeveless vest are hand embroidered with a cutwork floral pattern. The satin stitch embroidery has an amazing 3-dimensional verisimilitude.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_2.htm"><img src="images/Thumbnails/2419thumb2.jpg" alt="Irish crochet blouse" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#2419</b><b>$850</b></div>
                <p><a href="new_page_2.htm">Irish crochet lace blouse, c.1905.</a> The variety and piquant charm of the schematic floral motifs is truly memorable. The centerpiece is the blooming rose on the bodice. Radiating from the center are the dependent, budding florets and sprigs. The blouse has not been altered in design to make it more wearable for the modern woman. The longer-in-front, <em>blouson style</em> is correct for the period.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_21.htm"><img src="images/Thumbnails/4021thumb2.jpg" alt="Edwardian nightgown" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#4021</b><b>$750</b></div>
                <p><a href="new_page_21.htm">Silk chiffon nightgown, c.1910.</a> The bodice, pleated to the empire waistline, falls in soft folds below the ribbon ties.  The neckline is adjustable with a silk ribbon drawstring. The nightgown features panels of handmade filet lace, delicate floral lace, and silk ribbon rose buds. The seductive allure and delicate femininity of the floral lace, as it adorns and caresses your body, will not be lost on the man in your life.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_440.htm"><img src="images/Thumbnails/4107thumb2.jpg" alt="Edwardian hat" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#4107</b><b>$650</b></div>
                <p><a href="new_page_440.htm">Two-tone floral straw hat, c.1900.</a> Embellished with pale peach fabric roses and sprays of white forget-me-nots, which have been worn by women as a symbol of eternal love since medieval times. The height of the crown is built-up on one side and decorated with a taupe satin bow. The crown is lined with sheer black silk. This style of hat was meant to be worn perched on top of a piled up coiffure.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_201.htm"><img src="images/Thumbnails/4081thumb2.jpg" alt="peasant embroidered dress" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#4081</b><b>$850</b></div>
                <p><a href="new_page_201.htm">Hand-embroidered linen blouse &amp; skirt, c.1915.</a> Blouse and skirt can be worn together as a dress or as separates. The sleeves are cut-in-one with the blouse. I love the cheerful and exuberant ethnic-style embroidery. Blouse and skirt are hand embroidered with blue and white daisy-style flowers. The highly textured design is a pleasing arrangement of padded satin stitch, French knots, and cross stitch.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_515.htm"><img src="images/Thumbnails/7024thumb2.jpg" alt="Edwardian embroidered skirt" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7024</b><b>$600</b></div>
                <p><a href="new_page_515.htm">Hand-embroidered organdy skirt, c.1910.</a> Two tiers of crisp white organdy: the top one is lined with white cotton for modesty and also has a fabulous scalloped hem border. The flared skirt is gracefully shaped to be smooth over the hips and full below. The fine hand embroidery is quintessential Art Nouveau design: scrolling floral motifs with a whimsical touch. They convey the fresh, joyful spirit of newborn springtime.</p>
            </div>
        </div>
        <div class="item">
            <div class="imagebox"><a href="new_page_489.htm"><img src="images/Thumbnails/7178thumb2.jpg" alt="Edwardian evening bag" width="209" height="325"></a></div>
            <div class="descript">
                <div class="pid"><b>#7178</b><b>$750</b></div>
                <p><a href="new_page_489.htm">Beaded metallic brocade evening bag, c.1912.</a> Made from metallic silver and gold brocaded silk, the bag is embellished with an Art Nouveau pattern of bronzed gold bullion, faux pearls, and glittering rhinestones. The stylish bag has an inner pocket and an attached change purse. It belonged to Katherine Drexel, daughter of Josephine Wharton Drexel and great granddaughter of Francis Martin Drexel, founder of the Drexel family in the United States.</p>
            </div>
        </div>
    </div>
    <ul class="nav foot galfont">
        <li class="early"><a href="gallery_early.htm">Early Gallery</a><span>Early Gallery</span></li>
        <li class="victorian"><a href="gallery_victorian.htm">Victorian Gallery</a><span>Victorian Gallery</span></li>
        <li class="edwardian"><a href="gallery_edwardian.htm">Edwardian Gallery</a><span>Edwardian Gallery</span></li>
        <li class="twenties"><a href="gallery_1920s.htm">1920s Gallery</a><span>1920s Gallery</span></li>
        <li class="forties"><a href="gallery_1930s_50s.htm">1930s to 1950s Gallery</a><span>1930s to 1950s Gallery</span></li>
        <li class="galdesign"><a href="gallery_designer.htm">Designer Gallery</a><span>Designer Gallery</span></li>
    </ul>
    <ul class="nav foot main">
        <li><a href="early.htm">Early</a></li>
        <li><a href="victorian.htm">Victorian</a></li>
        <li><a href="edwardian.htm">Edwardian</a></li>
        <li><a href="1920s_to_1930s.htm">1920s to 1930s</a></li>
        <li><a href="1940s_to_designer.htm">1940s to Designer</a></li>
        <li><a href="shawlstext.htm">Shawls/Textiles</a></li>
        <li><a href="gallery.htm">Gallery</a></li>
        <li><a href="treasure_hunt.htm">Treasure Hunt</a></li>
        <li><a href="searchvt.htm">Search</a></li>
        <li><a href="order.htm">To Order</a></li>
        <li><a href="mailto:Linda@vintagetextile.com">Email</a></li>
        <li><a href="index.html">Home</a></li>
    </ul>
</div>

</body>
</html>



/* galmenus.css */

.nav {
    list-style:none;
    display:table;
    width:100%;
    text-align:center;
    word-spacing:-1em;
    padding:0;
    margin:0;
}

.nav.head.main {
    padding-bottom:3px;
    margin-bottom:10px;
}

.nav.head.galfont {
    padding-bottom:3px;
    margin-bottom:14px;
}

.nav.foot.galfont {
    padding-top:3px;
    margin-top:14px;
}

.nav.foot.main {
    padding-top:3px;
    margin-top:10px;
}

.galfont {background-color:#f2dc94;}

.nav li {
    display:inline-block;
    word-spacing:0;
}
.nav li:before {
    content:":";
    display:inline-block;
    padding:0 1px;
}
.nav li:first-child:before {
    content:"";
    padding:0;
}

.nav a,
.nav span {
    display:inline-block;
    text-decoration:none;
    padding:.1875em .4375em;
}

.nav.main a:link,
.nav.main a:visited {color:#8b0000;}
.nav.main a:hover {
    color:#8b0000;
    background-color:#f5ebd6;
    text-decoration:underline;
}

.nav.main a:active {color:#f00;}

.nav span {
    display:none;
    color:#000;
    background-color:#f5ebd6;
}

.nav.galfont a:link,
.nav.galfont a:visited {
    color:#000;
    font-weight:bold;
}
.nav.galfont a:hover {
    color:#8b0000;
    background-color:#f5ebd6;
    text-decoration:underline;
}

.nav a:active {color:#f00;}
.nav span {
    display:none;
    color:#000;
    background-color:#f5ebd6;
}

h2 a:link,
h2 a:visited {
    color:#000;font-weight:bold;
    text-decoration:underline;
}
h2 a:hover {
    color:#8b0000;
    background-color:#f5ebd6;
    text-decoration:underling;
}

#galearly .galearly a,
#galvic .galvic a,
#galedward .galedward a,
#galtwenties .galtwenties a,
#galforties .galforties a,
#galdesign .galdesign a {
    display:none;
}

#galearly .galearly span,
#galvic .galvic span,
#galedward .galedward span,
#galtwenties .galtwenties span,
#galforties .galforties span,
#galdesign .galdesign span {
    display:inline-block;
}



body {
    background-color:#fff;
    font:medium Verdana,Tahoma,Helvetica,sans-serif;
}
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.outer {
    width:90%;
    margin:0 auto;
}
h1 {
    color:#fff;
    background-color:#535353;
    font:1.35em "Bookman Old Style";
    padding:0.2em 22px 0.35em;
    margin-bottom:0.7em;
}

h2 {
    color:#000;
    background-color:#fff;
    font:bold 1.3em Verdana,Tahoma,Helvetica,sans-serif;
    padding:0 16px;
    text-align:center;
}

.logo {
    text-align:center;
    margin-bottom:20px;
}

.logo img {
    max-width:100%;
    height:auto;
    border:0 none;
}

.item {overflow:hidden;}
.item > div {
    display:table-cell;
    vertical-align:middle;
    padding:0;
}
.item .imagebox {padding-right:20px;}
.item:nth-child(odd) {background-color:#e5e5e5;}
.item:nth-child(odd) .descript {padding-left:209px;}
.item:nth-child(even) {margin-left:209px;}

.item img {
    display:inline-block;
    width:209px;
    height:325px;
    vertical-align:top;
    text-align:center;
    border:0 none;   /* IE */
}

.item p {
    font-size:1em;
    line-height:1.375;
    margin:.5em 20px .75em 0;  /* Notice that the text has no left margin assigned. */
}

.pid {
    margin-top:.75em;
}
.pid b {
    display:inline-block;
    vertical-align:top;
    font-weight:bold;
    margin:.25em 24px;  /* Apply default margins to .pid items. */
}
.pid b:first-child {
    margin-left:0;      /* Remove left margin from first .pid item. */
}
.pid .remark {
    color:#f00;
}

@media only screen and (max-width:900px) {
    .item:nth-child(odd) .descript {padding-left:0;}
    .item:nth-child(even) {margin-left:0px;}
    .item + .item {margin-top:6px;}
    .item p {font-size:.9375em;}
}
@media only screen and (max-width:700px) {
    .item .imagebox {float:left;}
    .item .descript {display:block;}
    .item p {
        font-size:.9375em;
        margin-left:20px;
    }
    h1 {text-align:center;}
}
@media only screen and (max-width:520px) {
    .outer {width:auto;}
    .item .imagebox {
        display:block;
        float:none;
        text-align:center;
        padding-right:0;
    }
    .pid {
        text-align:center;
        margin-left:-12px;
        margin-right:-12px;
    }
    .item p {margin:.25em 12px .75em;}
    .pid b:first-child {margin-left:24px;}  /* Restore left margin on the first .pid item. */
}
7

Ron,
Thank you for the useful formatting tips re HTML and CSS. This should help me avoid mistakes.
I had to create “galmenus.css” for the gallery pages as they have an additional menu of gallery links. These styles accomplish what I want for that page. However, I wonder if my selectors in galmenus.css, aside from formatting, could be more written more compactly and efficiently than have done?

8

First, I apologize for not explaining what I found in gal_new.css that was causing the problem in the narrower views.

These two values had been swapped (probably before you reinstated <div class=“content”>).


@media only screen and (max-width:900px) {
    .item:nth-child([color=blue]odd[/color]) .descript {padding-left:0;}
    .item:nth-child([color=blue]even[/color]) {margin-left:0px;}

Also, I just spotted a typo in galmenus.css in post #6:


h2 a:hover {
    color:#8b0000;
    background-color:#f5ebd6;
    text-decoration:underlin[color=red]g[/color];    [color=red]/* typo */[/color]
}

Maybe. I would ask you to explain your concerns in more detail… with examples and rationale, though.

My first thought yesterday was that galmenus.css might be overkill as written because much of it is copied from the other menus css file, but I didn’t pursue that thought. We can, if you would like.

I have only written code for small sites. Generally, my recommendation is to write code that the author can read a year or two later and understand, as-is. One WordPress web site can introduce more bloat than I can save during my entire life of writing “byte efficient” code. Therefore, I’m more interested in saving my time and sanity next year (or next month) when the page needs a little redesign by writing “Ron readable” code which is rather rigidly formatted and adequately commented.

I abhor code written with all css properties for one selector on one line. Styles that run off-page are a time-consuming pain that I have to reformat to read. I have no use for “compact” code except in the sense that shorthand styles are usually easier to write and read than longhand, and duplicating selectors invites careless errors.

That’s the gist of “efficient and compact” to me. You’ll have to explain what it means to you. :slight_smile:

9

Ron:
I always print out your detailed posts and review them carefully.
So when I was reviewing your post, I too saw this:

@media only screen and (max-width:900px) {
    .item:nth-child(odd) .descript {padding-left:0;}
    .item:nth-child(even) {margin-left:0px;}

and noticed that, although I had gone back to the original styles in the main part of the style sheet, I had not reverted back for this section.
I did not catch the typo for text decoration. However, CSS3 validation caught it for me.
I think “gal_new.css” is fine, a good adaptation of your main css style sheet.
On revew, my “galmenus.css”, an adaptation of your nav menu style sheet, is satisfactory. It styles the links properly and passes validation. I thought that perhaps my selectors in that sheet were too verbose but that is nitpicking. Right now, I am focused on doing a media-friendly makeover of my home page
http://www.vintagetextile.com
so that it works on small screens. I will do some preliminary work–hiding sections of the page for smaller screens–and then post in a new thread for comments.
Thank you for your comments and expertise.

10

Looking forward to it. :slight_smile: