Div background color

hi:
PHP, MySQL
i have a master page where each row is displayed using an
inline list
with text pulled fron a DB and 2 of the <li> with
background color/image
specified in the CSS div
what i need is filling the lower item background to the same
height as
the taller one. is it possible with lists and CSS or should i
deal with
a table?
you can see what i mean here where the the first "column"
should have
the background color covering the row height:
http://82.223.148.78/test/jdoe/images/activities_master.gif
tia,
jdoe

Steve wrote:
> If you post your URL or code, we can probably solve
this.
i moved from list to table, i need to see if i have a backup
> I'm thinking that
> you'll need to force the height attribute on the list
item so that all of
> the <li> sections are the same height. But I can't
be sure without seeing
> the code.
i tried it and it works. but then every "row" has the same
height no
matter how long the content is. and what i need is them
adjusting its
height according to the content as it occurs in tables. or in
lists
without height (but with the problem that background colors
only cover
the area with content as in the screen capture in the link at
the bottom
>
> Steve
>
> "John Doe" <[email protected]> wrote in message
> news:[email protected]...
>> hi Steve:
>>
>> i finally used a table, quit and easy. anyway, i'm
curious how to do it
>> with CSS and lists
>>
>> thanks for your advice,
>>
>> jdoe
>>
>> Steve wrote:
>>> Hi JD
>>>
>>> IMHO, it's usually better to use a table for
repeating database output,
>>> but I'm sure that this can be done using CSS and
<li> only if you want.
>>> Could you post a URL to your page?
>>>
>>> If you decide to use a table, read this:
>>>
>>>
http://www.web-max.ca/PHP/misc_14.php
>>>
>>> Steve
>>>
>>> "John Doe" <[email protected]> wrote in
message
>>> news:[email protected]...
>>>> hi:
>>>>
>>>> PHP, MySQL
>>>>
>>>> i have a master page where each row is
displayed using an inline list
>>>> with text pulled fron a DB and 2 of the
<li> with background color/image
>>>> specified in the CSS div
>>>>
>>>> what i need is filling the lower item
background to the same height as
>>>> the taller one. is it possible with lists
and CSS or should i deal with
>>>> a table?
>>>>
>>>> you can see what i mean here where the the
first "column" should have
>>>> the background color covering the row
height:
>>>>
>>>>
http://82.223.148.78/test/jdoe/images/activities_master.gif
>>>>
>>>>
>>>> tia,
>>>>
>>>> jdoe
>>>>
>>>>
>

Similar Messages

  • Div background color not showing in Internet Explorer 8 and before

    My Footer div is not showing the background color (supposed to be black...)  in Internet Explorer 8 and earlier.  It's assuming the body color instead.  Also the border color on top of the 'bubbles' that run across the page is wrong (supposed to be blue)    Is this just because Internet Explorer 8 and earlier did not support div background and border colors yet, or is there a work-around??  Or maybe I did something wrong?
    The site is:    www.meridianwaterfiltration.com

    martcol wrote:
    I don't think that IE8 does rgba.
    It should be OK with rgb but not rgba.
    Martin
    No its doesnt
    I'd just use a hexidecimal color - black #000 and blue: #03f (see below)
    .footer {
    position: relative;
        width: 100%;
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 0px;
        padding-left: 0;
        background-image: none;
        background-repeat: repeat-x;
        margin-top: 0px;
        clear: both;
        height: 350px;
        background-color: #000;
    #bubble {
        background-image: url(Images/water drop 0banner.jpg);
        background-repeat: repeat-x;
        width: 100%;
        height: 43px;
        border-top-width: 3px;
        border-top-style: solid;
        border-top-color: #03F;
        margin: 0px;
        padding: 0px;
        background-color: #3FF;

  • Dreamweaver CSS div background color doesn't match .png menu button color on PC

    Hello,
    I created a menu with buttons the same background color (CSS) as the background color on my CSS template. However, for some reason, the colors don't look the same on mac and a pc. The background on the menu buttons that I created (.png) match the css template div background on a mac. But, when the site displays on a pc, the menu background color from the css template is darker than the .png background color, even though the color code is the exact same. On a mac, the .png background color matches the css div template color exactly. Anyone know what is going on or how to fix?
    I appreciate any assistance!

    Are both monitors calibrated?
    http://www.wikihow.com/Calibrate-Your-Monitor
    Windows renders images a tad darker.  To compensate, use Gamma Correction in Photoshop.
    http://www.photoshopsupport.com/tutorials/cb/gamma.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Bug #81169 - Div bkgrnd color (of 1st div w/ content) not honored if cfdocument/pdf written to disk

    Bug for: Div background color (of 1st div w/ content) is not honored when cfdocument/pdf is written directly to disk.
    ==================
    Steps to reproduce
    ==================
    Run the following code with (and without) the cfdocument 'name' attribute.  Then compare both PDFs (the PDF written directly to browser, and the PDF written directly to disk)
    <cfdocument format="pdf" name="myPDF">
    <div style="background-color:#1a9cee;"></div>
    <div style="background-color:#1a9cee; border:2px solid #1a9cee;">I am the 1st div w/ content. Background color is only honored when PDF is written to browser. When PDF is written to disk, background color is near black.</div>
    <div style="background-color:#1a9cee; border:2px solid #1a9cee;">I am the 2nd div w/ content. Background color is always honored.</div>
    </cfdocument>
    <cfif structKeyExists(variables, "myPDF")>
      <cfpdf action="write" source="variables.myPDF" destination="#expandPath('./MyPDF.pdf')#" overwrite="yes" />
    </cfif>
    ==================
    Attachments
    ==================
    PDF written directly to disk: 20091214_Bug_81169_CFDocumentPDFDivBkgrndColorNotHonored_01.pdf
    PDF written directly to browser: 20091214_Bug_81169_CFDocumentPDFDivBkgrndColorNotHonored_02.pdf
    Thanks!,
    -Aaron Neff
    Btw, this bug is new to CF9.  This bug did not affect CF 8.0.1.

    Ok, if anyone else is experiencing this same issue, here is a workaround.  The issue is that when a cfdocument-generated PDF is written directly to disk, then the background color of the 1st non-empty block-display HTML element is ignored (unless there is an inline-display HTML element preceding it).  Instead, the background color is near-black.
    So, the workaround is to simply ensure an inline-display HTML element preceds the problematic block-display HTML element.  (a <span></span> will do the trick)
    Here was the original code.  Note that line #3 is the 1st non-empty HTML element, and that it is a div (block-display), and it has a background color.  If the PDF is written to disk, then the specified background color is ignored.  Instead, the background color is near-black.  Again, this does not occur when the PDF is written directly to browser.
    1| <cfdocument format="pdf" name="myPDF">
    2| <div style="background-color:#1a9cee;"></div>
    3| <div style="background-color:#1a9cee; border:2px solid #1a9cee;">I am the 1st non-empty block-display HTML element. Background color is only honored when PDF is written to browser. When PDF is written to disk, background color is near black (unless preceded by an inline-display HTML element).</div>
    4| <div style="background-color:#1a9cee; border:2px solid #1a9cee;">I am the 2nd div w/ content. Background color is always honored.</div>
    5| </cfdocument>
    6| <cfif structKeyExists(variables, "myPDF")>
    7|   <cfpdf action="write" source="variables.myPDF" destination="#expandPath('./MyPDF.pdf')#" overwrite="yes" />
    8| </cfif>
    Here is the 'fixed' code (note that "display:inline" has been added to line #2):
    1| <cfdocument format="pdf" name="myPDF">
    2| <div style="background-color:#1a9cee; display:inline;"></div>
    3| <div style="background-color:#1a9cee; border:2px solid #1a9cee;">I am the 1st non-empty block-display HTML element. Background color is only honored when PDF is written to browser. When PDF is written to disk, background color is near black (unless preceded by an inline-display HTML element).</div>
    4| <div style="background-color:#1a9cee; border:2px solid #1a9cee;">I am the 2nd div w/ content. Background color is always honored.</div>
    5| </cfdocument>
    6| <cfif structKeyExists(variables, "myPDF")>
    7|   <cfpdf action="write" source="variables.myPDF" destination="#expandPath('./MyPDF.pdf')#" overwrite="yes" />
    8| </cfif>
    magical

  • How can I put a div at the TOP of the page with a background color? No white space

    I am attempting to put an orange bar at the very top of a page and one that also stretches across the entire width of the page, no matter the page size.
    With the code below the orange bar appears but there is white space between the top of the browser and the orange bar.
    <div style="background-color:#f79321;height:30;width:auto;"> <p> </p></div>
    How can I get rid of this white space? I tried setting margin and padding to 0px but that did not work.

    I'm still getting the spacing:
    <html>
        <head>
            <style>
                body
                margin: 0;
                padding: 0;
                font-family: Georgia, serif;
                text-align: left;
                font-size: 16px;
                line-height: 1.2;
                word-wrap: break-word;
                text-rendering: optimizeLegibility;/* kerning, pri*/
                h2
                font-family:Arial, sans- serif;
                font-size: 28px;
                color: #fb8700;
                h2 a
                font-family: "bebas-neue",sans-serif;
                font-size: 40px;
                h2 a:visited
                color:#fbb100;/* visited - orange*/
                text-decoration:none;
                h2 a:active
                color:#fbb100;/* selected- orange*/
                text-decoration:none;
                h2 a:hover
                color:#c9c9c9;/* mouseover- light grey*/
                text-decoration:none;
                h4
                font-family: "bebas-neue",sans-serif;
                font-size: 50px;
                color: #fbb100;
                #page-wrap
                width: 960px;
                margin: 0 auto;
                p.topFormat
                font-family: Georgia, serif;
                font-size:16px;
                text-align:center;
                p.footerFormat
                font-family: Georgia, serif;
                font-size:16px;
                text-align:left;
                line-height: 150%;
                a:link {color:#fbb100;text-decoration:none;}      /* unvisited - orange*/
                a:visited {color:#fbb100;text-decoration:none;}  /* visited - orange*/
                a:active {color:#fbb100;text-decoration:none;}  /* selected - orange*/
                a:hover {color:#636363;}  /* mouse over - grey*/
            </style>
            <script type="text/javascript" src="//use.typekit.net/ppq8ria.js"></script>
            <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
        </head>
        <body>
            <div style="background-color: #f79321; height: 31px; width: auto;">
            <p> </p>
            </div>
            <div>

  • Trouble changing  background color. Using Dreamweaver CS4

    I can't get to change the back ground color [The greenish grey color] , within a table,  of a web page... Please see http://www.urefillit.com/index2.html  Can use some help here... Also I notice that the foliage background is slow in loading... Any suggestions as to what is causing the loading delay?
    Thanks in advance!!!!!
    Using CS4.........The Code is as follows:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta name="msvalidate.01" content="F33B6715B987C15F0176AAFDA87BE459" />
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
    <title>Urefillit manufactures and markets Octenol, Asian Tiger lure, and Kaboom replacement type products</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="We are focused on providing high-quality products and a commitment to customer satisfaction - We will do everything we can to meet your expectations for the best priced and highest quality mosquito control and Kaboom replacement type products available on the market today" />
    <meta name="Keywords" content="Octenol, Lure, Asian Tiger mosquito lure, Kaboom refills, mosquito magnet mosquito killing machine" />
    <meta name="Robots" content="index, follow" />
    <style type="text/css">
    /*<![CDATA[*/
    body {
            background-image: url(images/SambucusBlackLaceFoliage.jpg);
            background-color: #FFCC66;
    body.c7 {background-attachment:fixed}
    div.c6 {text-align: center}
    p.c5 {font-family: Arial; font-size: 70%; text-align: center}
    span.c4 {font-family: Arial; font-size: 70%}
    span.c3 {font-family: Courier}
    p.c2 {text-align: center}
    span.c1 {font-family: Courier; font-size: 120%}
    /*]]>*/
    .c7 table tr .c11 {
            background-color: #F60;
            font-size: 18px;
    tr .c11 table tr td p {
            font-family: "Times New Roman", Times, serif;
            font-size: 16pt;
    .c7 table tr .c11 table tr td p {
            font-family: "Times New Roman", Times, serif;
            font-size: x-large;
    .c7 table tr .c11 table tr td p {
            font-family: "Times New Roman", Times, serif;
            font-size: 16pt;
    .c7 table tr .c11 #table2 tr th {
            background-color: #0F6;
    /*]]>*/
    </style>
    <script src="file:///C|/Scripts/swfobject_modified.js" type="text/javascript">
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    table.c16 {background-color: #FFD9B3}
    p.c15 {text-autospace:none;}
    th.c14 {background-color: #00FF99}
    td.c13 {background-color: #00FF99}
    th.c12 {background-color: #FF6666}
    h2.c11 {font-size: 120%}
    span.c10 {font-size: 150%}
    span.c9 {text-decoration: underline}
    div.c8 {font-size: 70%; text-align: right}
    td.c7 {background-color: #003399}
    p.c6 {text-decoration: underline}
    table.c5 {background-color: #FFCC66}
    td.c4 {background-color: #FFFFFF}
    div.c3 {text-align: center}
    table.c2 {
            background-color: #0F6;
            font-size: 18px;
    th.c1 {background-color: #FFFFFF}
    .c7 table tr th .c7 {
            color: #008040;
    .c7 table tr th .c7 strong {
            color: #000;
    .c7 table tr th .c7 {
            color: #000;
    .c7 table tr th .c1 strong {
            color: #008000;
    /*]]>*/
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    body {
            background-color: #FFCC33;
    th.c1 {background-color: #FFCC66}
    /*]]>*/
    th.c11 {background-color: #FFFFFF}
    th.c11 {
            background-color: #F93;
            position: relative;
            left: auto;
            top: auto;
            right: auto;
            bottom: auto;
            visibility: visible;
            width: auto;
    .c7 table tr .c11 #table2 tr th .c2 a .c3 strong {
            color: #00F;
    .c7 table tr .c11 #table2 tr td a {
            color: #00F;
    .c7 table tr .c11 #table2 tr td a {
            color: #00F;
    .c7 table tr .c11 #table2 tr td p a {
            color: #00F;
    .BLUE { color: #00F;
    .BLUE { color: #00F;
    .blue { color: #00F;
    .blue { color: #00F;
    p.c1 {text-align: center}
    p.c13 {font-size: 80%; text-align: center}
    p.c71 {margin-right:0in;
    margin-left:0in;
    font-size:9.5pt;
    font-family:"Comic Sans MS";
    color:#000040;
    span.c101 {font-size: 80%}
    span.c12 {font-family: Courier New, Courier, monospace}
    span.c6 {font-family: Arial}
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    img.c16 {border:0;width:88px;height:31px}
    span.c15 {font-size: 120%}
    div.c14 {color: #FFFFFF; font-size: 150%; text-align: center}
    span.c13 {font-size:18.0pt; color:#B90D09;}
    strong.c12 {text-decoration: underline}
    span.c11 {font-family:'Comic Sans MS'; color:red;}
    em.c10 {text-decoration: underline}
    span.c9 {color:red;}
    table.c8 {background-color: #006600}
    td.c7 {background-color: #006600}
    span.c6 {font-size: 150%; text-decoration: underline}
    p.c5 {text-decoration: underline}
    p.c4 {text-align: center; text-decoration: underline}
    p.c3 {text-align: center}
    span.c2 {text-decoration: underline}
    div.c1 {text-align: center}
    /*]]>*/
    .c7 table tr .c11 #table2 tr td p {
            color: #00F;
    .eight {
            color: #F00;
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    <!--
    p.MsoNormal {
    margin-top:0in;
    margin-right:0in;
    margin-bottom:10.0pt;
    margin-left:0in;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    .c7 table tr .c11 .c5 strong u span {
            color: #008080;
    .c7 table tr .c11 p u em {
            color: #00F;
    .c7 table tr .c11 p em u {
            color: #00F;
    .c7 table tr .c11 table tr td .c7.c6 .c10 {
            font-family: "Courier New", Courier, monospace;
    .c7 table tr .c11 table tr td .MsoNormal strong u span {
            color: #00F;
    .c7 table tr .c11 table tr td .MsoNormal strong u span {
            font-family: "Times New Roman", Times, serif;
    .c7 table tr .c11 table tr td p strong u {
            font-family: "Times New Roman", Times, serif;
    .c7 table tr .c11 table tr td p strong u {
            font-family: "Times New Roman", Times, serif;
    .c7 table tr .c11 table tr td p strong u {
            font-size: 16px;
    .c7 table tr .c11 table tr td p {
            font-size: 10px;
    .c7 table tr .c11 table tr td p {
            font-size: 12px;
    .c7 table tr .c11 table tr td p {
            font-size: 12px;
    .c7 table tr .c11 table tr td p {
            font-size: 12px;
    .c7 table tr .c11 table tr td .MsoNormal strong u span {
            color: #000040;
    .c7 table tr .c11 .c7 tbody tr th a {
            color: #000;
    .c7 table tr .c11 #table2 tr td a {
            color: #000;
    .c7 table tr .c11 #table2 tr th .c2 a {
            color: #000;
            font-size: 18px;
    .c7 table tr .c11 #table2 tr th a {
            color: #000;
            font-size: 18px;
    .c7 table tr .c11 p u strong font {
            color: #B80738;
    .c7 table tr .c11 p u strong {
            color: #B80738;
    .c7 table tr .c11 table tr td p strong u {
            font-size: 24px;
    .c7 table tr .c11 table tr td p {
            font-size: 16pt;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 #table2 tr th {
            font-size: 16px;
    .c7 table tr .c11 #table2 tr th p a {
            font-size: 18px;
    .c7 table tr .c11 #table2 tr th p a {
            font-size: 18px;
    .c7 table tr .c11 #table2 tr th p a {
            font-size: 18px;
    .c7 table tr .c11 table tr td .MsoNormal a {
            font-size: 18px;
    .c7 table tr .c11 table tr td .MsoNormal a {
            font-size: 24px;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 table tr th a {
            font-size: 18pt;
    -->
    /*]]>*/
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    table.c11 {background-color: #0033FF}
    th.c10 {background-color: #8D8D5E}
    span.c9 {font-family:'Times New Roman','serif'; font-size:18pt;}
    p.c8 {line-height: normal; margin-bottom: .0001pt; text-align: center}
    p.c7 {; font-family: 'Times New Roman', 'serif'; font-size: 14pt; text-align: center}
    p.c6 {; font-family: 'Times New Roman', 'serif'; color: #00F; font-size: 18pt; font-style: italic; text-align: center}
    span.c5 {font-style: italic}
    span.c4 {line-height:115%; font-family:'Times New Roman','serif'; font-size:16.0pt;}
    p.c3 {text-align: center}
    strong.c2 {text-decoration: underline}
    th.c1 {background-color: #FFFFFF}
    /*]]>*/
    </style>
    </head>
    <body>
    <![CDATA[*/
    &amp;amp;lt;!--
    #Layer1 {position:absolute;
            width:110px;
            height:34px;
            z-index:1;
            left: 430px;
            top: 1116px;
            visibility: visible;}
    #Layer2 {position:absolute;
            width:170px;
            height:33px;
            z-index:1;
            left: 536px;
            top: 652px;}
    p.c7 {color: #000000; font-family: Arial; font-size: 80%}
    --&amp;amp;gt;
    /*]]>
    */ <script src="file:///C|/Scripts/AC_RunActiveContent.js" type="text/javascript">
    </script>
    <table class="c11" width="1250" border="15" align="center" cellpadding="5">
    <tr>
    <th width="888" height="2254" align="center" valign="top" class="c11 c10" scope="col">
    <p><br />
    <img src="images/webpagepicture.jpg" alt="WEB PAGE HEADER" width="1267" height="212" border="6" align="middle" /><br /></p>
    <table width="1188" border="6" align="center" class="c2" id="table2">
    <tr>
    <th width="143" scope="col">
    <p><a href="OctenolLure.html">Octenol Lure</a></p>
    </th>
    <th width="145" scope="col"><a href="FlowtronTypeLure.html">FlowtronTypeLure</a></th>
    <th width="145" scope="col">
    <p><a href="AsianTiger.html"></a><a href="AsianTiger.html">Asian Tiger Lure</a></p>
    </th>
    <th width="146" scope="col"><a href="Combolure.html">Combo Lure</a><br />
    (Octenol &amp; Lactic Acid)</th>
    <th width="146" scope="col">
    <p><a href="SkeeterVacLure.html">SkeeterVac Lure</a></p>
    </th>
    <th width="145" scope="col">
    <p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Mosquito Magnet</a></p>
    <p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Repair Guide</a></p>
    </th>
    <td width="145" align="center" valign="middle" scope="col"><a href="Kaboom.html">Kaboom</a><a href="/Kaboom.html">Replacement Tablets</a></td>
    <th width="111" height="104" align="center" valign="middle" scope="col"><a href="https://www.paypal.com/us/verified/pal=sales%40urefillit%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" alt="Official PayPal Seal" width="98" height="108" border="0" align="top" /></a><br />
    <br /></th>
    </tr>
    </table>
    <br />
    <table width="282" border="20" align="center" cellpadding="0">
    <tr>
    <th class="c1" width="128" scope="col"><img src="images/flying%20mosquito.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" width="97" height="75" /></th>
    <th class="c1" width="104" scope="col"><a href="#" onClick="window.open('https://www.sitelock.com/verify.php?site=www.urefillit.com','SiteLock','width=600,height=6 00,left=160,top=170');"><img src="//shield.sitelock.com/shield/www.urefillit.com" alt="website security" align="absmiddle" title="SiteLock" /></a></th>
    </tr>
    </table>
    <p><!-- start RatePoint Site Seal - Please, do not change -->
    <!-- end RatePoint Site Seal - Please, do not change -->
    <!-- start RatePoint Subscription Tool - Please, do not change -->
    <!-- end RatePoint Subscription Tool - Please, do not change -->
    ======================================================================================</p >
    <table width="1002" border="0" align="center">
    <tr>
    <td width="996">
    <p class="c3"><strong class="c2">All About Urefillit, LLC</strong></p>
    <p class="c3"><span class="c4">Urefillit, LLC prides itself on quality and consistency of its fine products, which are designed, made and manufactured in the USA. From production to quality control to final shipment, our highly trained team ensures the best quality, and reliable service for our customers. We are focused on providing high-quality products along with a commitment to customer satisfaction. We will do everything we can to meet your expectations for the best priced and highest quality mosquito lures, Kaboom replacement tablets, and bromine tablets available on the market today. With a variety of offerings to choose from, we're sure you will be happy with your purchase. Thank you for visiting our website and if you have any comments or questions, please feel free to contact us. We hope to see you again soon!</span><br /></p>
    <p class="c3"><img src="images/made_in_USA.jpg" width="221" height="228" alt="usa" /><br />
    <br /></p>
    <p class="c3">****************************************************************************** *************<br />
    <br /></p>
    <p class="c6">REFUND POLICY: <span class="c5">Our number one goal is your satisfaction. If our product does not perform as advertised you may return then unused item for a refund. A 25% restocking fee may apply. Buyer pays the return shipping costs. Special and international orders items DO NOT qualify for a refund.</span><br />
    <br /></p>
    <p class="c7"><img src="images/ebay-top-rated-seller-tracking.jpg" width="230" height="158" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&amp;userid=fjp800&amp;ftab=Feedbac kAsSeller"><br />
    Check Out Our E-Bay Feedback</a></p>
    <p class="c7"><br />
    ****************************************************************************************** ********************<br /></p>
    </td>
    </tr>
    </table>
    <table width="1002" border="0" align="center">
    <tr>
    <td width="996">
    <p class="c3"><strong class="c2">Using Octenol to Attract Mosquitoes<br /></strong><br /></p>
    <p class="c3">Octenol is an natural chemical that occurs naturally as a by-product of plants and some animals that eat a lot of vegetable produce. If carbon dioxide is mixed with octenol, it has been found to be an attractant to several mosquito species. There are other insects such as no-see-ums and biting midges that are also attracted to this scent. It has been proven to be a very effective product, especially for no-see-ums.<br />
    <br />
    <img src="images/12137165-cartoon-stop-mosquito.jpg" width="168" height="168" alt="mosquito" /><br />
    <br />
    Octenol is also a pesticide ingredient that is used to attract mosquitoes and biting flies. It does not kill the insects; it only attracts them. It can be used in combination with other products and devices that do kill them once they are successfully attracted to the device. It is important to be aware that non-pest insects are also attracted and destroyed by some of the devices.<br />
    <br />
    If octenol is ingested, there is a possibility for toxicity. It is not, however, harmful in the air to humans, pets, or the environment. It is vitally important that it is kept safely away from children to avoid the possibility of ingesting. Placement of the attractant and device utilized to catch biting insects should be carefully considered. It should be kept safely away from children and pets.<br /></p>
    <p class="c3">To be most effective in mosquito control, the attractant should be placed between the breeding grounds of the mosquito and the area where the people are located. There are range limits that the attractant will reach and this needs to be considered in the placement of the trap as well.<br /></p>
    </td>
    </tr>
    </table>
    <a href="http://www.startlogic.com/join/index.bml?AffID=626972&amp;cid=592'"><br /></a> ==============================================================
    <p><img src="images/americanatural_1875_97577.gif" width="234" height="118" alt="** PLEASE DESCRIBE THIS IMAGE **" /></p>
    <p>Considering buying a mosquito trap? If so, compare the following traps before you make a purchase:</p>
    <a href="http://www.bluerhino.com/BRWEB/Outdoor-Living-Products/Mosquito-Traps.aspx">SkeeterVac</a>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td align="center">
    <div class="c3"><a href="http://www.mosquitomagnet.com/">Mosquito Magnet</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td>
    <div class="c3"><a href="http://www.megacatch.com/">Mega-Catch</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td>
    <div class="c3"><a href="http://koolatrononline.stores.yahoo.net/mosquito-control.html">Koolatron</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td width="273">
    <div class="c3"><a href="http://www.mosquitocontroltrap.com/comparisons">Mosquito Trap Comparison Chart</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <p><br /></p>
    <table width="126" border="20" align="center" cellpadding="0">
    <tr>
    <th class="c1" scope="col"><a href="mailto:[email protected]">E-mail Urefillit</a></th>
    </tr>
    </table>
    <br />
    <p class="c8"> </p>
    <p class="c8"><span class="c9">Urefillit, LLC<br />
    800 Shore Drive East<br />
    Oldsmar, Florida 34677-4402</span></p>
    <p class="c8"> </p>
    <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br /></p>
    <p> </p>
    </th>
    </tr>
    </table>
    <script type="text/javascript">
    //<![CDATA[
    <!--
    swfobject.registerObject("FlashID");
    //-->
    //]]>
    </script>
    </body>
    </html>

    Copy & Paste this code into a new, blank document.  SaveAs index3.html.  Feel free to adjust CSS colors and backgrounds as desired.   You'll find plenty of code comments to help you.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>U Refill It</title>
    <meta name="description" content="Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom">
    <!--help for older IE browsers-->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    /**CSS Reset**/
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    img {
        vertical-align: baseline;
        display: block;
        max-width: 100%
    /**layout**/
    body {
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 100%;
        /**CSS gradient**/
    /* Old browsers */
        background: rgb(180,221,180);
        /* FF3.6+ */
        background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* Chrome,Safari4+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(180,221,180,1)), color-stop(17%, rgba(131,199,131,1)), color-stop(33%, rgba(82,177,82,1)), color-stop(67%, rgba(0,138,0,1)), color-stop(83%, rgba(0,87,0,1)), color-stop(100%, rgba(0,36,0,1)));
        /* Chrome10+,Safari5.1+ */
        background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* IE10+ */
        background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* good browsers */
        background: linear-gradient(to bottom, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* older IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400', GradientType=0 );
    #wrapper {
        width: 75%;
        margin: 0 auto; /**with width, this is centered**/
        background: #FFC;
        border: 4px groove #F30;
        border-radius: 20px;
    header, footer {
        color: #F30;
        text-align: center;
        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    header img {
        border-radius: 15px 15px 0 0;
        width: 100%
    /**top menu**/
    nav {
        width: 90%;
        margin: 25px auto;
    nav li {
        list-style: none;
        font-weight: bold;
        display: inline;
    /**menu link styles**/
    nav li a {
        display: inline-block;
        font-weight: bold;
        color: green;
        text-decoration: none;
        padding: 1.15em;
        border: 2px outset green;
    /**menu links on mouse over**/
    nav li a:hover, nav li a:active, nav li a:focus { background: gold }
    /**main content**/
    article { padding: 2% }
    figure img {
        margin: 0 auto;
        border: 3px solid #FFF;
        border-radius: 10px;
        box-shadow: 1px 2px 5px #333;
    /**typography**/
    header h1 {
        font-size: 55px;
        text-shadow: 2px 3px 3px #666;
    header h2 {
        font-size: 18px;
        font-style: oblique
    h3 { margin-top: 20px; }
    p {
        margin-bottom: 18px;
        font-size: 18px;
        color: #000;
    figcaption {
        text-align: center;
        font-style: oblique;
        margin-bottom: 18px;
    </style>
    </head>
    <body>
    <div id="wrapper">
    <header>
    <img src="http://www.urefillit.com/images/webpagepicture.jpg" alt="U Refill It banner">
    <!--this is very good for search engines-->
    <h1>U Refill It</h1>
    <h2>Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom.</h2>
    </header>
    <!--top menu-->
    <nav>
    <ul>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
    <li><a href="#">Menu6</a></li>
    </ul>
    </nav>
    <!--main content-->
    <article>
    <h3>Article Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <figure>
    <!--insert your image here-->
    <img src="http://placehold.it/500x325" alt="figure">
    <figcaption> Figure Caption </figcaption>
    </figure>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </article>
    <!--begin footer-->
    <footer>
    <small>© 2014 Your Site Name. All Rights Reserved</small> </footer>
    <!--end wrapper--> </div>
    </body>
    </html>
    Nancy O.

  • Two Questions: Shifty Pages and AP Div Backgrounds

    Hi, so I have two problems that have been getting on my nerves.
    The first is that, whenever a page on my website, http://www.omniearths.com/, has a scrollbar, everything that is centered shifts to the side to accomodate the new, smaller space. Is there any way to keep this from happening? It makes it so my nav buttons and body text always slide around, whereas I want it to appear as though they are staying in the same place. An example is the page, "Dakini", which I have added additional lines to for the sake of showing the difference.
    Also, can someone please explain how to make AP divs have backgrounds? I think I saw the option before, but I can't seem to find it again. It would be very helpful to get my page more organized.

    Thank you very much. Although, the gutter seems to appear on every page except News. I tried clearing my cache, refreshing my browser, and that didn't work. So, I tried a different browser on two different computers. So, it isn't showing up in Safari or RockMelt (which is just a modified version of Chromium if you haven't heard of it). And it still won't appear. I can't see any problems with my code.
    My style section is as follows:
    <style type="text/css">
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #FFF;
    body {
    background-color: #000;
    background-image: url(../imgs/stars.jpg);
    background-repeat: repeat;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    a {
    font-size: 12pt;
    a:link {
    img {
    border-style: none;
    html {
    overflow-y:scroll;
    #apDiv1 {
    position:center;
    width:200px;
    height:115px;
    z-index:1;
    text-align: center;
    </style>
    So if you can find anything wrong with it, please point it out. Also, if you could check the page for yourself to make sure it isn't just for me, I would appreciate it. ( http://www.omniearths.com/news/ )

  • DIV Background image not displaying in FF

    Hi!
    I'm building a floated 3 column DIV layout with a wrapper to center the DIVs. I put a background image in the wrapper to give the appearance of the columns stretching to the bottom of the layout. It displays in IE, but not in FF.
    If I give the wrapper a height, the background image shows, but I want the layout to expand as I enter content. My code is below.
    I must be missing something. Any tips?
    CSS:
    #left {
    float: left;
    width: 200px;
    #middle{
    float: left;
    width: 200px;
    #right {
    float: left;
    width: 200px;
    #footer {
    background-color: #316262;
    float: left;
    width: 600px;
    clear: both;
    #wrapper {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(images/bkg_css_layout.gif);
    BODY CODE:
    <div id="wrapper">
        <div id="left">Content for "left" Goes Here</div>
        <div id="middle"> Content for"middle" Goes Here </div>
        <div id="right">Content for"right" Goes Here </div>
        <div id="footer">Content for "footer" Goes Here</div>
    </div>

    Turns out that I couldn't have a float on my footer with clear:both!
    FIXED! YEA!

  • How can change background color of drop down menu navigation?

    Hi,
    I am using multi level drop-down-navigation menu in my website.
    I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
    please help me
    Link & code is given below
    http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
    HTML Code
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Portfolio</a></li>
    <li><a href="#">One Dropdown</a>
            <ul>
            <li><a href="#">Level 2.1</a></li>
            <li><a href="#">Level 2.2</a></li>
            <li><a href="#">Level 2.3</a></li>
            <li><a href="#">Level 2.4</a></li>
            <li><a href="#">Level 2.5</a></li>
            </ul>
    </li>
    <li><a href="#">Three Levels</a>
            <ul>
            <li><a href="#">Level 2.1</a></li>
            <li><a href="#">Level 2.2</a></li>
            <li><a href="#">Level 2.3</a>
                    <ul>
                    <li><a href="#">Level 2.3.1</a></li>
                    <li><a href="#">Level 2.3.2</a></li>
                    <li><a href="#">Level 2.3.3</a></li>
                    <li><a href="#">Level 2.3.4</a></li>
                    <li><a href="#">Level 2.3.5</a></li>
                    <li><a href="#">Level 2.3.6</a></li>
                    <li><a href="#">Level 2.3.7</a></li>
                    </ul>
            </li>
            <li><a href="#">Level 2.4</a></li>
            <li><a href="#">Level 2.5</a></li>
            </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    CSS CODE
    #nav {
            float: left;
            font: bold 12px Arial, Helvetica, Sans-serif;
            border: 1px solid #121314;
            border-top: 1px solid #2b2e30;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            overflow: hidden;
    #nav ul {
            margin:0;
            padding:0;
            list-style:none;
    #nav ul li {
            float:left;
    #nav ul li a {
            float: left;
            color:#d4d4d4;
            padding: 10px 20px;
            text-decoration:none;
            background:#3C4042;
            background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
            background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
            background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
            border-left: 1px solid rgba(255, 255, 255, 0.05);
            border-right: 1px solid rgba(0,0,0,0.2);
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
    #nav li ul {
            background:#3C4042;
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
            background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
            background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
            border-radius: 0 0 10px 10px;
            -moz-border-radius: 0 0 10px 10px;
            -webkit-border-radius: 0 0 10px 10px;
            left: -999em;
            margin: 35px 0 0;
            position: absolute;
            width: 160px;
            z-index: 9999;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
            -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
            -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
            border: 1px solid rgba(0, 0, 0, 0.5);
    #nav li ul a {
            background: none;
            border: 0 none;
            margin-right: 0;
            width: 120px;
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            border-bottom: 1px solid transparent;
            border-top: 1px solid transparent;

    Change this:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #414141; /*background of menu bar (default state)*/
    width: 100%;
    to this:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #new color code;
    width: 100%;
    And repeat this on other selectors.
    Nancy O.

  • Footer now floating in middle of page and no background color

    Hello all,
    Been working on this for days with no luck. I hope someone can spot the silly mistake, because I know it has to be something silly but it's driving me round the bend! The page has always been just fine until I recoded part of the body (the four columns with titles, photos, and text) to help with 508 compliance. Since then, the orange footer that was firmly at the bottom has started floating half way up the page and the background orange color has disappeared.
    I've gone through my code line by line, marking off each beginning and ending div tag and everything is fine there. Below, is a screenshot of the lower half of the page showing how the footer should look.
    Here is a screenshot of how it looks offline right now:
    as you can hopefully see, the footer has lost it's orange background and is sitting halfway up the page.
    Here is the HTML code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=1100">
    <meta name="keywords" content="Meadows museum, Southern Methodist university, SMU, Dallas, Texas, Algur Hurtle Meadows, The Meadows Foundation, Dr. Mark A. Rogl&aacute;n, medieval, baroque, tenth to twentieth century spanish art, 10th to 20th century Spanish art, Spanish art collection, Spanish paintings, Meadows school of art, masterpieces, world's greatest painters, El Greco, Velázquez, Ribera, Murillo, Goya, Miró, Picasso, Juan Gris, Renaissance, altarpieces, rococo oil sketches, polychrome wood sculptures, Impressionist landscapes, modernist abstractions, sculptures, twentieth-century sculptors, Rodin, Maillol, Giacometti, Henry Moore, David Smith, Claes Oldenburg, James Surls, Santiago Calatrava, Texas artists, Frank Reaugh, Jerry Bywaters, Otis Dozier, Alexandre Hogue, William Lester, exhibitions, education, educational workshops, lectures, gallery talks, symposia, symposium, museum shop, Spain's Golden Age, neo-Palladian structure, Jones Great Hall, Founder's Room, auditorium, Gates Restaurant, Moss Chumley Award, William B. Jordan internships, Fortuny, Sorolla, Steve Mumford, Don Quijote, eighteenth-century tapestries, Roger Winter, Stanley Marcus, Mark Lemmon, The Barrett Collection, Mexican art, DeGolyer Library, greek vase painting, Juan van der Hamen y Le&oacute;n, Division of Cinema-Television, musical and danse performances, performing artists, studio art activities, storytelling, artist demonstrations, community education, Spanish discussion and book club, Master of Liberal Arts courses, MLA program, corporate membership, Museum membership, Museo Nacional del Prado, Prado Museum Designer=Pam Muirheid">
    <meta name="description" content="The Meadows Museum is committed to the advancement of knowledge and understanding of art through the collection and interpretation of works of the greatest aesthetic and historical importance, as exemplified by the founding collection of Spanish art">
    <meta name="robots" content="index, follow">
    <title>Home – Meadows Museum</title>
    <meta name="google-site-verification" content="WJGKz4uefsWUilZUdPa5ggL23MSk1IsHeLMzUz3B1QE" />
    <style type="text/css">
    <!--
    body {
    background-color:#
    a:link {
        color: #505262;
        text-decoration: underline;
    a:active {
        color: #505262;
        text-decoration: underline;
    a:visited {
        color: #505262;
        text-decoration: underline;
    a:hover {
        color: #505262;
        text-decoration: none;
    -->
    </style>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <script src="ajxmenu1.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    .style1 {
        color: #FFFFFF
    -->
    </style>
    <link rel="stylesheet" href="ajxmenu1.css" type="text/css" />
    <style type="text/css">
    <!--
    .style23 {
        font-size: 10px
    -->
    </style>
    <link rel="stylesheet" href="ajxmenu3.css" type="text/css" />
    <link rel="stylesheet" href="ajxmenu4.css" type="text/css" />
    <style type="text/css">
    <!--
    .style24 {
        color: #AE543C
    .style26 {
        color: #f1efe0
    .style27 {
        color: #b6241d
    -->
    </style>
    <link rel="stylesheet" href="ajxmenu8.css" type="text/css" />
    <link rel="stylesheet" href="ajxmenu13.css" type="text/css" />
    <style type="text/css">
    <!--
    .style28 {
        color: #AF4D33
    .style29 {
        font-family: Geneva, Arial, Helvetica, sans-serif
    -->
    </style>
    <link rel="stylesheet" href="ajxmenu16.css" type="text/css" />
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-32262060-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    <script type="text/javascript" language="javascript">AC_FL_RunContent = 0;</script>
    <script type="text/javascript" src="slideshow/AC_RunActiveContent.js" language="javascript"></script>
    <script type="text/javascript" language="JavaScript"></script>
    <script type="text/javascript" language="JavaScript">
    <!--
    function errorSafe() {return true;}
    window.onerror = errorSafe;
    function newWin(url,name,rs,sc,mn,tl,lo,wd,hi) {
    openWindow = window.open(url,name,'resizable='+rs+',scrollbars='+sc+',menubar='+mn+',toolbar='+tl+',lo cation='+lo+',width='+wd+',height='+hi);}
    name.window="menu"
    function open_window(url) {
    email = window.open(url,"eMail","toolbar=5,location=0,directories=0,status=1,menubar=0,scrollbars =yes,resizable=yes,width=800,height=600");
    //-->
    </script>
    <script src="ajxmenu1.js" type="text/javascript"></script>
    <script src="ajxmenu3.js" type="text/javascript"></script>
    <script src="ajxmenu4.js" type="text/javascript"></script>
    <script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
    <script src="ajxmenu8.js" type="text/javascript"></script>
    <script src="ajxmenu13.js" type="text/javascript"></script>
    <script src="ajxmenu16.js" type="text/javascript"></script>
    <!-- Google Translator start-->
    <meta name="google-translate-customization" content="9966f40ce63f3936-63b7db40478c71ff-g3ab4db8eb77d6f75-1b">
    </meta>
    <!-- Google translator end -->
    </head>
    <body bgcolor="#f1eee1">
    <div class="hidden">Skip to main content.</div>
    <!-- begin logo-->
    <div id="logo">
      <header role="banner"><a href="http://smu.edu/meadowsmuseum/">Home Page - Meadows Museum</a></header>
    </div><!-- end logo -->
    <!-- begin navbackground-->
    <div id="navbackground">
      <!-- begin nav-->
      <div id="nav">
        <div class="AJXCSSMenuBOOIZUD"><!-- AJXFILE:ajxmenu1.css -->
          <ul>
            <li class="tsub"><a class="ajxsub" href="mission_statement.htm">About  Us</a>
              <ul>
                <li><a href="mission_statement.htm">Mission Statement</a></li>
                <li><a href="Director.htm">Message from the Director</a></li>
                <li><a href="contacts.htm">Contact Us</a></li>
                <li><a href="news.htm">News</a></li>
                <li><a href="media.htm">Multimedia</a></li>
                <li><a href="history.htm">Museum History</a></li>
                <li><a href="Plaza.htm">Plaza & Sculpture Garden</a></li>
                <li><a href="Moss_Chumley.htm">Moss/Chumley Award</a></li>
                <li><a href="javascript:open_window(%27http://www.meadows.smu.edu%27)">Meadows School of the Arts</a></li>
                <li><a href="javascript:open_window(%27http://www.smu.edu%27)">Southern Methodist University</a></li>
              </ul>
            </li>
            <li class="tsub"><a class="ajxsub" href="visit.htm">Visit Us</a>
              <ul>
                <li><a href="visit.htm">General Information</a></li>
                <li><a href="tours.htm">Groups &amp; Tours</a></li>
                <li><a href="access_programs.htm">Accessibility</a></li>
                <li><a href="shop.htm">Museum Shop</a></li>
                <li><a href="students_teachers.htm">K-12 Resources</a></li>
                <li><a href="dining.htm">Dining</a></li>
                <li><a href="lodging.htm">Lodging</a></li>
                <li><a class="ajxsub" href="events.htm">Facility Rentals</a>
                  <ul>
                    <li><a href="events_rental_images.htm">Rental Facility Images</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="tsub"><a class="ajxsub" href="collections_intro.htm">Collections</a>
              <ul>
                <li><a href="collections_intro.htm">About the Collections</a></li>
                <li><a class="ajxsub" href="collections_highlights.htm">Highlights of the Collections</a>
                  <ul>
                    <li><a href="collections_highlights_Algur.htm">Algur H. Meadows Collection</a></li>
                    <li><a href="collections_highlights.htm">Meadows Museum Collection</a></li>
                    <li><a href="collections_highlights_sculpture.htm">Elizabeth Meadows Sculpture Coll.</a></li>
                  </ul>
                </li>
                <li><a href="collections_provenance.htm">Provenance &amp; Research</a></li>
                <li><a class="ajxsub" href="#">Recent Acquisitions</a>
                  <ul>
                    <li><a href="collections_acquisitions_Goya.htm">Goya</a></li>
                    <li><a href="collections_acquisitions_Barcelo.htm">Barceló</a></li>
                    <li><a href="collections_acquisitions_Madrazo.htm">Madrazo</a></li>
                    <li><a href="collections_acquisitions_Munoz.htm">Muñoz</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="tsub"><a class="ajxsub" href="exhibitions_current.htm">Exhibitions</a>
              <ul>
                <li><a href="exhibitions_current.htm">Current</a></li>
                <li><a href="exhibitions_upcoming.htm">Upcoming</a></li>
                <li><a class="ajxsub" href="#">Past</a>
                  <ul>
                    <li><a href="exhibitions_2013-present.htm"><span>2013-Present</span></a></li>
                    <li><a href="exhibitions_recent_past.htm">2010-12</a></li>
                    <li><a href="exhibitions_past_07-09.htm">2007-09</a></li>
                    <li><a href="exhibitions_recent_past2.htm">2004-06</a></li>
                    <li><a href="exhibitions_2001-3.htm">2001-03</a></li>
                  </ul>
                </li>
                <li><a href="longterm_loans.htm">Visiting Masterpieces</a></li>
                <li><a class="ajxsub" href="#">Prado at the Meadows</a>
                  <ul>
                    <li><a href="about_Prado_Meadows.htm">Prado at the Meadows</a></li>
                    <li><a href="docs/Pradopartnershipexpansionrelease.pdf">Expansion of Partnership</a></li>
                    <li><a href="exh_Prado_Meadows_press.htm">Press Release El Greco</a></li>
                    <li><a href="exh_Prado_Meadows_Ribera_press.htm">Press Release - Ribera</a></li>
                    <li><a href="about_Velazquez_Prado_release.htm"><span>Press Release - Velaquez </span></a></li>
                    <li><a href="prado_press.htm">News Articles</a></li>
                    <li><a href="prado_fellowship.htm">Fellowships</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="tsub"><a class="ajxsub" href="public_programs.htm">Education</a>
              <ul>
                <li><a href="public_programs.htm">Program Calendar</a></li>
                <li><a href="internships.htm">Internships</a></li>
                <li><a href="fellowships.htm">Fellowships</a></li>
                <li><a href="students_teachers.htm">K-12 Resources</a></li>
                <li><a href="symposia.htm">Symposia</a></li>
              </ul>
            </li>
            <li class="tsub"><a class="ajxsub" href="membership.htm">Get Involved</a>
              <ul>
                <li><a href="membership.htm">Join or Renew a Membership</a></li>
                <li><a href="member_travel.htm">Member Travel</a></li>
                <li><a href="volunteer.htm">Volunteer</a></li>
                <li><a href="internships.htm">Internships</a></li>
                <li><a href="work_here.htm">Employment</a></li>
                <li><a href="support.htm">Donate</a></li>
              </ul>
            </li>
            <li class="tlast"><a href="50th_anniversary.htm">50th Anniversary</a></li>
            <li class="timg"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""/></li>
          </ul>
        </div>
      </div> <!-- End nav-->
    </div> <!-- End navbackground-->
    <br />
    <!-- Begin wrapper-->
    <div id="wrapper">
    <!-- Begin slideshow-->
      <div id="slideshow">
      <!-- Start dwuser_XML_Flash_Slideshow_v4 -->
            <!-- Do not remove the line below!!!  It is required for the DWUser XML Flash Slideshow v4. -->
            <script type="text/javascript" src="v4flashslideshow/slideshow.js"></script>
            <div class="dwuser_xfs_v4_holder" style="width: 1100px; height: 358px;"> <strong><a href="http://www.adobe.com/go/getflashplayer/">You need to upgrade your Flash Player and enable Javascript to view this content &raquo;</a></strong> </div>
            <script type="text/javascript">
                // <![CDATA[
                if (typeof(window['XMLFlashSlideshow_v4']) == 'undefined') { XMLFlashSlideshow_v4 = function(){}; alert('To use the XML Flash Slideshow v4, you must upload the v4flashslideshow/slideshow.js file, and have a properly defined ' + String.fromCharCode(60) + 'script' + String.fromCharCode(62) + ' reference to it in your HTML.');};
                XMLFlashSlideshow_v4({width:'1100', height:'358', level:'a', xml:'v4flashslideshow/slideshow_data1.xml', backgroundColor:'#F1EFE0', backgroundAlpha:'1', preloaderColor:'#FFFFFF', preloaderTextColor:'#FFFFFF', externalSkinURL:'', touchMode:'inline', touchBackgroundColor:'#F1EFE0', backgroundImage:'images/slideshow/Calatrava3_big.jpg', rightClickLabel:'slideshow of upcoming events'});
                // ]]>
                </script>
            <!-- End dwuser_XML_Flash_Slideshow_v4 -->
      </div><!-- End slideshow-->
    <!-- Begin bodyArea-->
      <div id="bodyArea">
        <!-- Begin programseventstitle --> 
        <div id="programseventstitle">
        <h3>PROGRAMS & EVENTS<br />
    </h3><a href="public_programs.htm"><img src="images/index/class.png" alt="programs and events" width="275" height="143" /></a>
        <ul id="programsevents">
      <p><a
    href="public_programs.htm#symposium">International
        Symposium</a><BR>Sat, Feb 7, 10 A.M.-3 P.M.</p>
      <p><a
    href="public_programs.htm#toast">Champagne
        Toast</a><BR>Sat, Feb 7, 3:30-5:00 P.M.</p>
      <p><a href="public_programs.htm#music">Music
        at the Meadows</a><BR>Sat, Feb 7, 6:30 P.M</p>
      <p><a
    href="http://www.meadowsmuseumdallas.org/public_programs.htm#drawing">Drawing
        from the Masters</a><BR>Sun, Feb 8, 1:30-3 P.M.</p>
      <p><a
    href="public_programs.htm#conn">Access
        Program: Connections</a><br />
        Wed, Feb 11, 10:30 A.M.-12:30 P.M.</p>
        </ul>
        </div>  <!-- End programseventstitle -->
        <!-- Begin newstitle -->
          <div id="newstitle">
          <h3>NEWS</h3> <a href="news.htm"><img src="images/index/Bacon_thumb.jpg" width="275" height="143" alt="news" title="news" /></a>
          <ul id="news">
        <p>12/23/14 - <a href="docs/50th_updated.pdf" target="_blank">Meadows Museum Looks Ahead to Golden Anniversary in 2015</a> (PDF)</p>
          <p>12/15/14 - <a href="docs/MossChumley2014Award.pdf" target="_blank">Meadows Museum Announces 2014 Moss/Chumley Artist Award Winner: Darryl Lauster</a> (PDF)</p>
          <p>11/3/14 - <a href="docs/Abello_2014.pdf" target="_blank">Meadows Museum to Present First Exhibition in U.S. of Paintings from
            Juan Abelló Collection, Among World’s Top Private Collections</a> (PDF)</p>
          </ul>
    </div>    <!-- End newstitle -->
      <!-- Begin multimediatitle -->   
        <div id="multimediatitle">
        <h3>MULTIMEDIA</h3><a href="http://vimeo.com/109750163" target="_blank"><img src="images/50th_anniversary/thumb_homepage.jpg" alt="multimedia" title="multimedia" width="275" height="143" /></a>
        <ul id="multimedia">
        <p><a href="media.htm">Watch videos, live webcasts, and podcasts</a>.</p>
          <p><strong>50th Anniversary</strong><br />
            Experience the Meadows Museum at SMU as the Museum approaches its <a href="http://vimeo.com/109750163" target="_blank">50th  anniversary</a>. Find out what's going on this year, what's in the news, and discover the fascinating history of the Museum in <a href="50th_anniversary_timeline.htm">Meadows Milestones</a>.</p>
          <p><a href="media.htm">June 20, 2014 <em>WFAA News</em> story about artist John Bramblitt.</a></p>
          </ul>
    </div>  <!-- End multimediatitle -->
      <!-- Begin supportustitle --> 
    <div id="supportustitle">
    <h3>SUPPORT US!</h3>
        <a href="support.htm"><img src="images/news_programs/MeadowsandLois.jpg" width="275" height="143" /></a>
        <ul id="supportus">
        <p><a href="membership.htm">Join/Renew your Membership</a></p>
          <p><a href="support.htm">Donate to the Museum</a></p>
          <p><a href="shop.htm">Browse our online shop</a></p>
            <p><a href="volunteer.htm">Become a Docent</a></p>
          <p><a href="shop.htm"></a><a href="volunteer.htm">Volunteer</a></p>
            <p><a href="javascript:open_window(%27http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw%3D%3D%27)">Join our E-newsletter</a></p>
          </ul>
          <!-- Start Google Translator -->
        <div id="google_translate_element"></div>
        <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></scrip t>
    <!-- End Google Translator -->
        </div>  <!-- End supportustitle -->
          <div class="push"></div>
    </div><!-- End Body Area-->
    <!--Begin footer-->
        <div id="footer">
          <!--Begin searchbar-->
          <div id="searchbar">
            <form role=“search” style="margin-right:0px; margin-top:12px; float:left; width:265px;" action="http://search.freefind.com/find.html" method="get"  accept-charset="utf-8" target="_self">
              <input type="hidden" name="si" value="47230699">
              <input type="hidden" name="pid" value="r">
              <input type="hidden" name="n" value="0">
              <input type="hidden" name="_charset_" value="">
              <input type="hidden" name="bcd" value="&#247;">
              <input type="text" name="query" size="15" style="border:thin">
              <input aria-label=”search” type="submit" value="search">
            </form>
            <br />
            <br />
            <a href="https://www.facebook.com/MeadowsMuseumDallas"><img src="images/symbols/facebook_white.png" alt="like us on Facebook" title="like us on Facebook" width="28" height="28" /></a><a href="https://twitter.com/MeadowsMuseum"><img src="images/symbols/twitter_white.png" alt="Follow us on Twitter" title="Follow us on Twitter" width="25" height="25" /></a> <a href="https://blog.smu.edu/tabularasa/"><img src="images/symbols/blog_white.png" alt="Museum blog" title="Museum blog" width="23" height="23" /></a> <a href="http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw=="><img src="images/symbols/e-mail_white.png" alt="E-mail us" title="E-mail us" width="27" height="25" /></a> <a href="membership.htm"><img src="images/symbols/JOIN.png" alt="join the museum" title="join the museum" width="38" height="32" /></a> <a href="https://www.google.com/maps/preview#!q=5900+Bishop+Blvd.,+Dallas,+TX+75205&data=!1m4!1m3!1 d10476!2d-96.785088!3d32.837337!4m10!1m9!4m8!1m3!1d107264!2d-96.783199!3d32.845558!3m2!1i1 024!2i768!4f13.1"><img src="images/symbols/google-maps-iphone-icon.png" alt="Find us on Google maps" title="Find us on Google maps"  width="24" height="24" /></a>
            </div><!--End searchbar-->
        <!--Begin admissionhours-->
        <div id="admissionhours">
        Hours: Tue-Sat 10:00 a.m. - 5:00 p.m.,
            Thu until  9:00 p.m.,     
            Sun 1:00 - 5:00 p.m.
            Closed Monday.
            Admission: $10,  adults, $8,  seniors 65 &amp; over, $4,  non-SMU students. Free: Museum members, children under 12, SMU faculty/staff/students. Free Thu eve after 5:00 p.m. <br />
          </div><!--End admissionhours-->
        <!--Begin adresstel-->
          <div id="addresstel">
          Meadows Museum, 5900 Bishop Blvd., Dallas, TX 75205, <br />
            P.O. Box 750357, Dallas, TX 75275-0357 <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /> 214.768.2516<br />
            <a href="contacts.htm" class="white">e-mail</a> <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /><a href="site_map.htm" class="white"> Site map</a> <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /> Website by <a href="http://www.mypawprint.com" class="white">My Pawprint Productions</a><br />
            © 2015 Meadows Museum
            </div>  <!--End adresstel-->
        </div>  <!--End footer-->
      </div> <!--End wrapper-->
    </body>
    </html>
    and here is the layout.css file:
    @charset "utf-8";
        margin: 0px;
        padding: 0px;
    a:link {color: #656252; text-decoration: underline; }
    a:active {color: #656252; text-decoration: underline; }
    a:visited {color: #656252; text-decoration: underline; }
    a:hover {color: #656252; text-decoration: none;
    a.white:link {color: #FFFFFF; text-decoration: underline; }
    a.white:active {color: #FFFFFF; text-decoration: underline; }
    a.white:visited {color: #FFFFFF; text-decoration: underline; }
    a.white:hover {color: #FFFFFF; text-decoration: underline; }
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    /* Styles */
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1100px) {
    /* Styles */
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1100px)
    and (orientation : landscape) {
    /* Styles */
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    .hidden
    {position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;}
    a img {
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    header {
        width: 1100px;
        background-repeat: no-repeat;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 0px;
        padding-left: 0;
    header a {
        text-decoration: none;
        background-image: url(../images/index/orange_50th_2011_1100.png);
        background-repeat: no-repeat;
        background-position: right top;
        padding: 0;
        display: block;
        height: 130px;
        text-indent: -700px;
    header a:focus {
        background-position: right top;
        padding: 0;
        height: 132px;
        text-decoration: none;
        display: block;
        background-image: url(../images/index/orange_50th_2011_1100.png);
        background-repeat: no-repeat;
        text-indent: 0px;
        text-decoration: underline;
        color: white;
    a:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    header b {
        text-decoration: none;
    h1 {
        height: 75px;
        width: 285px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 50px;
        font-weight: normal;
        color: #f1efe0;
        float: left;
        padding-left: 35px;
        padding-top: 75px;
    h2 {
        height: 51px;
        width: 480px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 25px;
        font-weight: normal;
        font-style: italic;
        float: left;
        color: #f1efe0;
        padding-top: 99px;
    h3 {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #666;
        height: 25px;
        padding-left: 10px;
    h4 {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 15px;
        margin: 25px;
        color: #666666;
    #logo {
        background-color: #af4d33; /*change the color to match your orange*/
        display: block;
    #navbackground {
        background-color: #776353; /*change the color to match your brown*/
        background-repeat: repeat;
    #nav {
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 0px;
        padding-left: 0;
        width: 1100px;
    .caption {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #666666;
        margin: 25px;
    p {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #414040;
        margin: 25px;
    .caption {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #666666;
        margin: 25px;
    #wrapper {
        background-color: #e2dfcf;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        width: 1100px;
        margin-right: auto;
        margin-left: auto;
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #999999;
        border-left-color: #999999;
    #wrapper #white {
        background-repeat: repeat;
        padding: 0;
        display: block;
        height: 10px;
        background-color: #FFF;
        width: 2500 px;
    #wrapper #slideshow {
        height: 358px;
        background-repeat: no-repeat;
    #wrapper #programseventstitle {
        width: 275px;
        height: 25px;
        float: left;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #414040;
        font-weight: normal;
        font-variant: normal;
        background-color: #e2dfcf;
        padding-top: 10px;
    #wrapper #newstitle {
        width: 275px;
        height: 40px;
        float: left;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #414040;
        vertical-align: middle;
        font-weight: normal;
        margin: 0px;
        background-color: #f1efe0;
        padding-top: 10px;
    #wrapper #multimediatitle {
        width: 275px;
        height: 40px;
        float: left;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #414040;
        font-weight: normal;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #e2dfcf;
        padding-top: 10px;
    #wrapper #supportustitle {
        width: 275px;
        height: 40px;
        float: left;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #414040;
        font-weight: normal;
        margin: 0px;
        background-color: #f1efe0;
        padding-top: 10px;
    #wrapper #bodyArea #photoprogramsevents {
        float: left;
        background-color: #f1efe0;
        width: 275px;
        height: 143px;
    #wrapper #bodyArea #photonews {
        float: left;
        background-color: #f1efe0;
        width: 275px;
        height: 143px;
    #wrapper #bodyArea #photomultimedia {
        float: left;
        background-color: #f1efe0;
        width: 275px;
        height: 143px;
    #wrapper #bodyArea #photosupport {
        float: left;
        background-color: #f1efe0;
        width: 275px;
        height: 143px;
    #wrapper #bodyArea #programsevents {
        float: left;
        background-color: #e2dfcf;
        width: 275px;
        height: 350px;
    #wrapper #bodyArea #news {
        float: left;
        background-color: #f1efe0;
        width: 275px;
        height: 350px;
    #wrapper #bodyArea #multimedia {
        float: left;
        background-color: #e2dfcf;
        width: 275px;
        height: 350px;
    #wrapper #bodyArea #supportus {
        float: left;
        background-color: #f1efe0;
        width: 275px;
        height: 350px;
    #wrapper #bodyArea #footer {
        height: 100px;
        width: 1100px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        background-color: #af4d33;
        padding: 0px;
        color: #FFFFFF;
        background-repeat: repeat;
        clear: both;
    .footer, .push {
        clear: both;
    #wrapper #bodyArea #footer #searchbar {
        height: 70px;
        width: 230px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        background-color: #af4d33;
        padding: 15px;
        color: #FFFFFF;
        background-repeat: no-repeat;
        float: left;
        text-align: left;
        clear: none;
    #wrapper #bodyArea #footer #admissionhours
        height: 70px;
        width: 415px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        background-color: #af4d33;
        padding: 15px;
        color: #FFFFFF;
        background-repeat: no-repeat;
        float: left;
        text-align: left;
        clear: none;
    #wrapper #bodyArea #footer #addresstel{
        height: 60px;
        width: 330px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        background-color: #af4d33;
        color: #FFFFFF;
        background-repeat: no-repeat;
        float: right;
        text-align: right;
        padding-top: 22px;
        padding-right: 25px;
        padding-bottom: 0px;
        padding-left: 15px;
    #google_translate_element{
        padding: 25px;
    html {
    overflow-y:scroll;
    a img {border: none;

    Horgykitkat wrote:
    What I found after taking out the heights from the text areas is that I was left with uneven text column lengths (alternating beige areas). So I created a repeatable jpg with the same alternating beiges and put it as the background of the bodyArea tag. Again, if there is a better way, please let me know!
    A repeating background image to 'fake' equal height columns is perfectly ok.
    It won't work IF your page is responsive but it isn't so no problem. If it were responsive a better solution would be to take advantage of the css property display: table; and display: table-cell;
    In reference to your footer background color not showing I would assume you have floated items within the footer container. If so then you need to clear those floated items which allows the footer container to wrap itself around the floated items inside it.
    You would do this by using css - overflow: hidden; - on the parent container which has the floats inside it.

  • Legend in manual mode - Background color

    Hi all,
    To create legend in manual mode I am using following request URL for a style image.
    http://127.0.0.1:8988/mapviewer/omserver?sty=L.ROAD&w=20&h=20&ds=cescdatasource
    Here if the color of style is white (For example white color line style) then it won't be visible. Can I set background color?. I need different background color instead of white.
    Thanks,
    Sujnan

    Either set the background color for the MapDecoration or for the table in which you display the legend or both.
    e.g. (modification of tutorial 36 Map Legend)
    // get the container DIV and set the background color to light blue
    var legendDiv = legend.getContainerDiv();
    legendDiv.style.backgroundColor = "AliceBlue"; //color name may not work in all browsers
    function buildLegend(baseURL)
    var html = "<table *bgcolor='gray'* border=0> <tr><td><img src="+baseURL+"/omserver?sty=L.PH&w=45&h=20&ds=mvdemo></td><td> Highways </td></tr>" +
    " <tr><td><img src="+baseURL+"/omserver?sty=M.CITY+HALL+3&w=20&h=20&ds=mvdemo></td><td> Cities </td></tr>" +
    "</table>";
    return html;
    }

  • Hi there, I want to change the background-color of the browser, when a popup-picture is shown. This picture pops up by clicking a hyperlink in the text...can anyone help me please...thanks a lot

    Hi there, I want to change the background-color of the browser, when a popup-picture is shown. This picture pops up by clicking a hyperlink in the text...can anyone help me please...thanks a lot

    Hi,
    CSS is interpreted by your browser, so server cache seems unlikely in htis case. There is however some hierarchy in CSS, so parts of the APEX CSS, theme CSS or page CSS might overwright or block yours.
    Does changing the CSS on runtime affect your page? Eg, run the following in your browser console and see if your page turns black: $('#uBodyContainer').css("background-color","black")
    Also try moving up your css in the hierarchy labeling it as important:
    div#uBodyContainer { 
      background-color:#000000 !important;  
    See:Assigning property values, Cascading, and Inheritance
    Regards,
    Vincent
    http://vincentdeelen.blogspot.com

  • Cell background colors are not showing in preview - help? - DW4

    Hi,
    I created a horizontal table for my menu bar, and gave each cell a different color by creating a separate class for each with background image - image is a block of color created in Photoshop. In design mode they look they way I want, but in preview (Safari) the colors don't show up at all - the whole area is gray, and all I see is the text for each cell. Can someone tell me what I'm doing wrong? Alternatively, is there a better way I can set this up to have different colors for each button?
    Thank you!

    Here is the HTML code, and the CSS code for the menu bar follows: 
         ul.MenuBarHorizontal           
    ></style><style type="text/css"><!body {     background-color: #FFF;     font-family: Arial, Helvetica, sans-serif;}-->
        h1.  
         ul.MenuBarVertical          
    [about | MS_about.html]
    [fiction | MS_fiction.html]
    [dramatic work | MS_dramaticwork.html]
    [arts | MS_arts.html]
    [contact | MS_contact.html]
    [blog | MS_blog.html]
    <!-- end #header ><div id="mainContent"><p> </p><table width="950" border="0" cellspacing="10" cellpadding="12">        <tr>          <td width="106"><p> </p></td>          <td width="766"><p> </p>            <p>Miriam Seidel is a writer, critic and curator whose work is informed by her background in art, music and dance. </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p></td>        </tr>        <tr>          <td colspan="2" bgcolor="#CCCCCC"><p>c Miriam Seidel 2011 all rights reserved</p></td>        </tr>    </table><script type="text/javascript"><!var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", );var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", );//></script></body>     <! end #mainContent --></div></html> 
    CSS CODE:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ 
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding /ul.MenuBarHorizontal/ Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html /ul.MenuBarActive{     z-index: 1000;     font-family: Arial, Helvetica, sans-serif;     font-size: medium;     color: #FFF;     background-color: #FFCC99;     background-repeat: no-repeat;     left: auto;     top: auto;     right: auto;     bottom: auto;}/ Menu item containers, position children relative to this container and are a fixed width /ul.MenuBarHorizontal li/ Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) /ul.MenuBarHorizontal ul/ Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item /ul.MenuBarHorizontal ul.MenuBarSubmenuVisible/ Menu item containers are same fixed width as parent /ul.MenuBarHorizontal ul li/ Submenus should appear slightly overlapping to the right (95%) and up (-5%) /ul.MenuBarHorizontal ul ul/ Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible 
    /* Submenu containers have borders on all sides /ul.MenuBarHorizontal ul/ Menu items are a light gray block with padding and no text decoration /ul.MenuBarHorizontal a/ Menu items that have mouse over or focus have a blue background and white text /ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{     background-color: #6C9;     color: #999;     font-family: Arial, Helvetica, sans-serif;     font-size: medium;     font-style: normal;     line-height: normal;     font-weight: normal;     font-variant: normal;     text-decoration: none;     text-align: center;     vertical-align: middle;     height: 50px;     width: 115px;}/ Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{     background-color: #FFCC99;     color: #FFF;     font-family: Arial, Helvetica, sans-serif;     text-decoration: none;     font-size: medium;}
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) /ul.MenuBarHorizontal a.MenuBarItemSubmenu{     background-image: url(SpryMenuBarDown.gif);     background-repeat: no-repeat;     background-position: 95% 50%;     text-align: center;}/ Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) /ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{     background-image: url(SpryMenuBarRight.gif);     background-repeat: no-repeat;     background-position: 95% 50%;}/ Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) /ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{     background-image: url(SpryMenuBarDownHover.gif);     background-repeat: no-repeat;     background-position: 95% 50%;}/ Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{     background-image: url(SpryMenuBarRightHover.gif);     background-repeat: no-repeat;     background-position: 95% 50%;}
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe /ul.MenuBarHorizontal iframe/ HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */@media screen, projection{     ul.MenuBarHorizontal li.MenuBarItemIE     {          display: inline;          f\loat: left;          background: #FFF; 
    Date: Mon, 20 Jun 2011 15:30:46 -0600
    From: [email protected]
    To: [email protected]
    Subject: Re: cell background colors are not showing in preview - help? - DW4 
    NEED to see the code.
    Otherwise it's like dialing a random phone number, and asking whoever answers, where you left your keys.
    >

  • Background -color of a template page through skinning

    Hi All,
    I designed a Template page using webcenter portal application .In that I added some Images .
    Now I want to get good look and feel for that template using skinning .By default in the application we have portal-skin.css.
    So I want to apply background -color to that template page.But the color should be shaded with more than one color.So how can I
    get it through skinning.Could anyone help me on this.
    Thanks
    keerthi

    Hi Jiri,
    Thanks for your quick reply .
    I have seen the link which you gave .But they had mentioned like this to apply for background.
    background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
    But in my skin.css file i have not found this property -webkit-linear-gradient.
    And another syntax is of like this:
    div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}
    Here there are uploading color as a image .But actually i am not following this way .
    Could we have any other approach for this.
    Thanks
    keerthi.

  • Div Background image clipping

    Hi guys,
    I have a div on my page which I am using as the main body,
    and i set the background colour as white, but then put a background
    image on (a gradient from gray to white). In design view this has
    the desired effect - i.e. it appears to be one long gradient, but
    when previewed in Firefox and IExplorer the top of the background
    image is clipped off. Any suggestions?
    Here is the relevent CSS code:

    > background-attachment: fixed;
    Remove this.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "NWNN" <[email protected]> wrote in message
    news:fp7nje$nka$[email protected]..
    > Hi guys,
    > I have a div on my page which I am using as the main
    body, and i set the
    > background colour as white, but then put a background
    image on (a gradient
    > from
    > gray to white). In design view this has the desired
    effect - i.e. it
    > appears to
    > be one long gradient, but when previewed in Firefox and
    IExplorer the top
    > of
    > the background image is clipped off. Any suggestions?
    > Here is the relevent CSS code:
    >
    >
    > background-attachment: fixed;
    > background-color: #FFFFFF;
    > background-image: url(Images/background.png);
    > background-repeat: no-repeat;
    > background-position: center top;
    >

Maybe you are looking for

  • Mixture of Wifi Questions (Extend network, Wireless Radio, etc)

    Hey Apple Forums! So here's the main issue. I've set up a network consisting of two routers. The first is a TC Dual-Band 2 (firmware 7.5.1) and the second is a TC (firmware 7.4.2). The first is connected to the internet and the second is in bridged m

  • Why am I directed to a MobileMe sign-in page when I try to publish iWeb

    I can not publish a site because I get caught up in an endless loop asking me to sign-in. It gives me three options: Sign in; No thanks and Learn More. Jumping through all the hoops makes no difference, I still can not publish. What am I doing wrong?

  • Dynamic variable value based on a value from xml

    I have a invoice template and it is for 4 different companies in my organization. Based on the organization I need to have a different value for a variable that adds blank lines to the end of the invoice. Is there anyway to assign a value to variable

  • FTP Adapter Errors out while translating

    Hi, I am using a FTP adapter to put a text file using a bpel process. But the FTP adapter errors out with the following error:oracle/xml/parser/schema/XMLSchema Is there a way to fix this issue?? Please advise. Thanks PS

  • Best way to import data?

    Hi everyone, I haven't worked with In Design before so I have no idea where to start. I have a client who outputs data into an access database which is then put into word, which is then moved into In Design and formatted manually. This is for a large