Top Sites background color.

How do you change the background color on Safari top sites, i dislike the new grey color, want to change it back to black?

Hi alan-43,
I can tell you that they do read every feedback comment. So, even if you did not hear back, I think it's kind of like voting....that one additional comment on the same topic just might be the one that tips the balance and gets the thing changed.
I know a lot of people are not happy with the gray and white, the thin fonts, the overall look of iOS 7, and the inabiity to change it. Hopefully they are working on ways to allow users to do a little more customization. One size simply doesn't fit all....
Cheers,
GB

Similar Messages

Top sites background color in 6.1

So this is my third try to post this question today. It kept getting deleted because the moderators said it was an "unreleased product" when it was not. Now that I see many other posts about 6.1, hopefully they don't delete me for a third time.
Dislike the top sites in 6.1, but at least it wouldn't be so horrible if I could lose the horrible grey background color.
Anyone know of a way to change that grey background to black?
Thanks for any info
John

Yes, its just worse. And now it looks like Microsoft designed it. Just ugly fonts, cold overall feel and sharp edges. I am really sad of the turn Apple just made with its design. Making me rethink what I really need in my products now and if Apple is so necessary anymore.

Problem dynamically setting row background color in a report

Hi guys,
I want a PPR Classic SQL Report to dynamically show a background color depending on what value is stored in the column of the record.
To illustrate what I've tried consider the following:
1. I created a PPR Report on DEPT (this is the report I want to use with record backgrounds)
2. I created a PPR javascript call that I trigger somewhere in the page
function refreshReport(pField, pValue){
var region = $v('P2_DEPT_RID');
var link ='f?p=' + $v('pFlowId') + ':' + $v('pFlowStepId') + ':' + $v('pInstance') +'::::' + pField +':'+ pValue;
html_PPR_Report_Page(this, region, link);
The updating of the report works fine by the way.
3. I changed the code in the HTML Expression of the column definition of "DNAME" of the DEPT report. I used jQuery to set the class of the <tr> element of the position the field is in.
This is the value I want to dynamically check on
<div id="dept_#DEPTNO#">#DNAME#</div>
<SCRIPT type=text/javascript>
$('#dept_#DEPTNO#').parent().parent().children().removeClass('t20data');
if ('#DNAME#' == 'RESEARCH'){
      $(function(){
        $('#dept_#DEPTNO#').parent().parent().addClass('voorhaal_kan');
}else{
         $(function(){
            $('#dept_#DEPTNO#').parent().parent().addClass('sscc_ok');
</SCRIPT>4. I created some CSS like so:
tr.voorhaal_kan{border:1px solid #AAA;border-left:none;border-top:none;background-color:#FFDD44;padding:2px 8px;}
tr.sscc_ok {border:1px solid #AAA;border-left:none;border-top:none;background-color:#CCFFCC;padding:2px 8px;}
tr.sscc_manco {border:1px solid #AAA;border-left:none;border-top:none;background-color:#FF3300;padding:2px 8px;}
tr.sscc_geel {border:1px solid #AAA;border-left:none;border-top:none;background-color:#FFFF66;padding:2px 8px;}Now the problem is, the first time I load the page, the javascript in the HTML Expression works fine! It checks the value, and colors the <tr> beautifully. But, when i Refresh the report using PPR (calling the javascript function), the report is reloaded just fine, but the javascript bit in the HTML Expression is skipped for some reason resulting with a regular background color found in "t20Standard td.t20Data" . Alerts won't fire either in the code, hence the assumption of the code skipping.
Any ideas on how this problem can be solved?

Hey Rutger,
I know you've already done a lot of work in another direction, but would it be possible for your purposes to use the SQL to do what you need. check out this link:
How to perform a conditional column format based on column value
and Conditional coloring of Database Column
I hope those may help or give you other ideas.
-Marc

Change Background Color of SharePoint 2013 Public Site

Hi All,
I have started using Online SharePoint 2013 Version and I have task to change the background color of Public site via designer 2013 .can any one help me how can I achieve it
Samar

Well, you could upload a picture of the color you want where you would upload a background picture in change the look from the Gear drop down.
Other wise you can add this css
.ms-core-overlay {background-color:#####;}
Are you aware that you can change the look and feel in the site settings?

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>

Top 5 best SOLID background colors for LCD?

What are the top 5 best SOLID background colors for LCD?
- Best for display ENDURANCE.
- Best for lower ENERGY consumption.
- Best for lower display TEMPERATURE.
Black? Dark blue? Dark green? Dark red? White?
Any Internet link supporting such claims?
Thanks.

1. In my experience, the white color wears out LCDs with time. For instance, the top main Finder menu of the Apple Cinema Displays shows white all the time with Mac OS X, and wears out with time (several years). You can see it when the Mac is booting and such area is shown darker. Actually, it has usually being recommended to use a full solid black background as the best screen saver to increase the LCD useful life.
There can be image burn-in with LCDs, but Apple says it can be fixed
<http://docs.info.apple.com/article.html?artnum=10639>
<http://docs.info.apple.com/article.html?artnum=88343>
(They recommend white for fixing it.)
2. So, if your argument is correct, it seems that solid white is the best color for lower energy consumption,
White won't reduce the energy consumption, but the display should run slightly cooler since it is radiation more light, instead of adsorbing it.
but solid black or a dark color could be better to increase LCD useful life.
It seems that it the black that burns-in (since they recommend a white screen to fix it), but not permanently.
3. Last but not least, the "Apple/System Preferences/Displays/Brightness" set at 50% or lower will also increase the LCD useful life (the less brightness, the better).
Don't forget to set display sleep in "Energy Save" system preference. Reduced brightness will make the backlight last longer, but won't affect burn-in Display sleep will help both.

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[*/

/*]]>*/
</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;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;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 & 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>



======================================================================================</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&userid=fjp800&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&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[

//]]>
</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">



<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">

<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>

<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>

<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>

<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>

<footer>
<small>© 2014 Your Site Name. All Rights Reserved</small> </footer>
 </div>
</body>
</html>
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á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ó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">

</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="ajxmenu1.js" type="text/javascript"></script>
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu1.css" type="text/css" />
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu3.css" type="text/css" />
<link rel="stylesheet" href="ajxmenu4.css" type="text/css" />
<style type="text/css">

</style>
<link rel="stylesheet" href="ajxmenu8.css" type="text/css" />
<link rel="stylesheet" href="ajxmenu13.css" type="text/css" />
<style type="text/css">

</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">

</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>

<meta name="google-translate-customization" content="9966f40ce63f3936-63b7db40478c71ff-g3ab4db8eb77d6f75-1b">
</meta>

</head>
<body bgcolor="#f1eee1">
<div class="hidden">Skip to main content.</div>

<div id="logo">
<header role="banner"><a href="http://smu.edu/meadowsmuseum/">Home Page - Meadows Museum</a></header>
</div>

<div id="navbackground">

<div id="nav">
    <div class="AJXCSSMenuBOOIZUD">
      <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 & 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 & 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> 
</div> 
<br />

<div id="wrapper">

<div id="slideshow">

        
        <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 »</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>
        
</div>

<div id="bodyArea">
    
    <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> 
    
      <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>    

    <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> 

<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>
      
    <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>

    </div> 
      <div class="push"></div>
</div>

    <div id="footer">
      
      <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="÷">
          <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>
    
    <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 & 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>
    
      <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> 
    </div> 
</div> 
</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.

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;

How can i make a background color linear?

i want to put a background color have a linear effect, but im not sure how to do that. i want it so that it will fit the entire browser screen. i dont know a lot about backgrounds, i know that i can make a background color fill the entire browser and make a image repeat itself to fit the browser, but thats all i know.

WOW...this is exactly what i have been searching for over tha last 2 weeks but i finally found out how to do it perfectly.
I found the solution after analyzing a site i visited that had the effect i wanted.
Herez a sample of the page i created with the effect...exactly as you drew it....but with diferent colours,lol.
http://edutchz.freehostia.com/sample/
I have also attached bg.jpg with this post as well as the CSS i used; but to see them in action use the above link
Now all u need to do is create a sinlge strip of image....say 1000px wide by 10px high. On both exterior sides of this image place your linear colurs from outside inwards to cover say 100 or 150px....now do this exactly on the other side.....this will leave a central region with white colour.
Now name it bg,jpg.....use CSS to place it on your page....in my case;
body { margin : 0px;
background-color: #eeeeee;
background-image:
url(bg.jpg);
background-position: top center;
background-repeat: repeat-y
also change the background-color to one that nearly matches your linear img color.
Hope this helpd

Safari 4.0 progress bar and Top Sites bugs (?)

Hi there,
I am having a problem with my Safari 4 and been searching for a fix since a few days but could not find a solution, so I hope there is someone who can help me out.
There are basically two problems, I have with Safari.
The first one is, that since Safari 4.0 there is a new kind of a "progress bar" which changes its color and is actually at first dark and then gets more light while loading a page. My progress bar is not chaning colors at all. It just stays dark all the time.
And the second one, is that if you have a site on you "Top Sites" and click that, it fades in, so it comes nearer and gets larger until it fits the window. So, if you go back from that site to you "Top Sites" again, it actually should fade out and move back to its old position on the "Top Sites". And again, my Safari does not do that either.
I don't know, if that is improtant or not, but I played around with the Safari 4 beta tweaks and changed the progress bar so I have the blue one in the background of my adress bar.
I already tried to restore my old Safari from my Programs folder with Time Machine and installed the 4.0 again but still, it does not work for me.
I know that these are not somehow critical bugs but it would be great, if Safari would just work, as it actually should.
So, is there a way to fix that or reset Safari?
Thank you in advance!

Hi
Latest v of Glims (17) is Safari 4 compatible. Cooliris is functional, although a soon to be released upgrade will correct certain S4 related bugs. Tab Expose is not S4 compatible.
There is no blue progress bar in Safari 4. In S4 Beta, Terminal code was used to bring that S3 feature back, however, S4 final has removed the related code. Hence, no blue progress bar. Instead, there's a spinning gear to the right of the Address Bar indicating the page is loading.
Let Apple hear your sentiments about S4. Send feedback to Apple via the Safari Menu>Report bugs to Apple.

Responsive animation with background color that spans 100%

I've create a responsive animation with simple background colors. I'd loe for the background colors to bleed 100%, but can not seem to find a way to do it easily. I've actually had to layer two animations on top of each other and just js. (this site is in development: http://newsite.insightpd.com/what-we-do/ ) I'd love for the red and gray to go 100% while still being centered and staying responsive. What am I missing? Any advice would be greatly appreciated.
PS, I'm using the edge plugin for wordpress and am just uploading the aom file.
Thanks in advance for your help!

Did you incorporate % widths during the creation of the animation?
Nice job btw
Also your template is using fixed widths for that section that houses the Edge Animate - you also need to adjust for % in your WP template css (see capture).

When converting word doc to pdf, my images with text only show the background color of the text box.

I have a word doc that I am trying to conver to pdf. I have jpegs with text boxes on top of them on one page. It looks great on the screen but after I convert to pdf, the text boxes only have half the text, the first half of the text box is just white - the background color. If I take the background color out of the text box, the text converts over fine but I need the background color.
I have tried many things here on the print settings, standard, high quality print, unchecking the compression on the images. Any help?

Thank you for your posting. These forums are specific to the
Acrobat.com website and it's set of hosted services, and do not
cover the Acrobat family of desktop products. Please visit the
following forums for any questions related to the Acrobat family of
desktop products:
http://www.adobeforums.com/cgi-bin/webx/.3bbeda8b/

My background color for all pages has changed to pink, how do I get it back to white?

The background color in all of my screens has switched to pink. How do I get it back to white? I wonder if it changed when I was shopping in a web site and had clicked on a pink watch(?)

Check the default color settings:
*Tools > Options > Content : Fonts & Colors > Colors
* [X] "Allow pages to choose their own colors, instead of my selections above"
*https://support.mozilla.com/kb/Changing+fonts+and+colors

Background-color:transparent !important; is not working in IE

Hi,
In my sharepoint site i have used "background-color:transparent !important;" css. It is not working in IE but in Mozilla is working fine.
And I am using IE 11. Please let me know is there any thing wrong in the syntax. If that is the case please provide me correct solution for that.
Any help would be greatly appreciated.
Regards,
Saya

Thank you for your reply.
I have checked given links. Those are not use for this issue.
Actually in my sharepoint site the same code "background-color:transparent
!important;" was working fine before installing sharepoint 2010 service pack 2. After installation we got this issue. And if i change "transparent"
with any color, it is applying that color. Only "transparent"
background css is not working in IE.

Top Sites background color.

Similar Messages

Maybe you are looking for