Loading CSS Body background before page content?

Hi all,
I'm doing this homepage for a publisher:
http://www.alma.dk/
When testing it with sloppy (www.dallaway.com/sloppy/), I can
see that the background image of the logo, which is the most
important graphic, loads LAST.
I've figured this is because the body style is set in the CSS
file, and browser logic doesn't load CSS defined images first.
Is there any way to make the page load the CSS defined images
before it loads the rest of the page contents? I've got a few large
images hidden in layers on that page that the browser attempts to
load before displaying the background image, which is not ideal. -
And I'd rather use CSS styling for the body, ofcourse.
Thank you for any pointers!

> Your stats are wrong, because in that one HTML page,
there are 198KBs of
> graphics. Try MouseOver on one of the book graphics,
that'll reveal the
> hidden
> larger images, that are contained in Layers, with Snap
Layers by PVII. -
> Or try
> the site with Sloppy.
If you eliminated the heavy js hit of snap layers (using CSS
instead), and
adopted the Set Text method of writing the image source link
to an ID
element, you could probably cut 80% of this page's weight.
Then you
wouldn't have to worry about the slow load.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Mathias(DK)" <[email protected]> wrote in
message
news:[email protected]...
> Murray!
>
> I came here hoping that it would be you that answered my
call. You've been
> a
> tremendous help on this forum before whenever I needed
it, and for that I
> owe
> you...
>
> > I've figured this is because the body style is set
in the CSS file, and
> > browser logic doesn't load CSS defined images
first.
>
> >I'd be interested to know where you learned this.
>
> As I wrote, this is something I figured myself, since
looking at the page
> through Sloppy, I can see that the BG image persistently
loads as one of
> the
> last graphics.
>
> Your stats are wrong, because in that one HTML page,
there are 198KBs of
> graphics. Try MouseOver on one of the book graphics,
that'll reveal the
> hidden
> larger images, that are contained in Layers, with Snap
Layers by PVII. -
> Or try
> the site with Sloppy.
>
> Counting Angels, huh? Well, I take pride in what I do,
whatever I do, and
> at
> the same time I'm interested in learning. Even if I
optimized the BG
> graphic
> more (GIF), it'd still load last (after 161KBs of
graphics + HTML and
> CSS).
>
> So there is the problem. And just for the record, the
page will go dynamic
> in
> the future, so there wont be hidden graphic hacks on it,
but I'm
> interested
> still, for future reference and for learning.
>
>
>
>
>

Similar Messages

  • CSS opacity: background opaque, but content not..help

    Dear all,
    It's been a while but I have something I just can't figure out .. what I'm after...I want the background of the main container to be 60% opaque, but the actual content divs not ... can anybody help me with this
    Thanks
    #mainWrapper {
        width: 850;
        padding: 0px;
        position: absolute;
        top: 300px;
          width:850px;
      margin:0px;
      background-color:#ffffff;
      /* for IE */
      filter:alpha(opacity=60);
      /* CSS3 standard */
      opacity:0.6;
    #contentWrapper {
        width: 480px;
        padding-top: 0px;
        padding-left: 0px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 13px;
        display: block;
        margin-left: 210px;
        margin-right: 160px;
        background-color: #FFF;
          /* for IE */
      filter:alpha(opacity=100);
      /* CSS3 standard */
      opacity:1;

    I think I've got it
    but you did remove the opacity statements?
    I have now (hadn't before) & working [super!!]
    2 questions though...perhaps silly
    1.
    startColorstr='#88FFFF00', endColorstr='#88FFFF00'
    but I don't recognise these colours ie 2 letter too much?!!?? Could you please explain...
    2. is this way of doing it browser proof?
    thanks

  • After I upgraded to latest version of FF (16 on windows xp), the browser doesn't load css menu of hwupgrade page (hwupgrade.it).the other web browser works fine

    after I updated to the latest version of the product, some sites have been slow in rendering, but the biggest problem is the not display of styles in some sites, such as in particular hwupgrade.it.
    the menu is not recognized.
    the console does not show any serious problem.
    the problem does't occur with previous versions or with other browsers

    Many site issues can be caused by corrupt cookies or cache. In order to try to fix these problems, the first step is to clear both cookies and the cache.
    Note: ''This will temporarily log you out of all sites you're logged in to.''
    To clear cache and cookies do the following:
    #Go to Firefox > History > Clear recent history or (if no Firefox button is shown) go to Tools > Clear recent history.
    #Under "Time range to clear", select "Everything".
    #Now, click the arrow next to Details to toggle the Details list active.
    #From the details list, check ''Cache'' and ''Cookies'' and uncheck everything else.
    #Now click the ''Clear now'' button.
    More info here - [[Websites don't load - troubleshoot and fix error messages]]
    Did this fix your problems? Please report back to us!

  • How do I remove "Skip navigation elements to page contents" display?

    I have a JSF page that displays a message "Skip navigation elements to page contents" at the top of the rendered page. Any idea why this is happening and how to remove?

    Strike the copy/paste theory. The issue occurs even with a newly created page when I have a panelpageheader and panelpage combination. Here is the code:
    <?xml version='1.0' encoding='windows-1252'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:af="http://xmlns.oracle.com/adf/faces/EA17"
    xmlns:afh="http://xmlns.oracle.com/adf/faces/EA17/html">
    <jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
    doctype-system="http://www.w3.org/TR/html4/loose.dtd"
    doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
    <jsp:directive.page contentType="text/html;charset=windows-1252"/>
    <link media="screen" rel="stylesheet" href="css/blaf.css"/>
    <f:view>
    <af:form>
    <afh:html>
    <afh:head title="mainPage">
    <meta http-equiv="Content-Type"
    content="text/html; charset=windows-1252"/>
    <style type="text/css">
    body {
    background-color: #ffffff;
    </style>
    </afh:head>
    <afh:body>
    <af:panelPageHeader binding="#{backing_test.panelPageHeader2}">
    <f:facet name="branding">
    <af:objectImage binding="#{backing_test.objectImage2}"
    source="components/images/corporateBrand.gif"/>
    </f:facet>
    </af:panelPageHeader>
    <af:panelPage title="Title 0" binding="#{backing_test.panelPage1}"/>
    </afh:body>
    </afh:html>
    </af:form>
    </f:view>
    </jsp:root>

  • HOT TIP to make pages load faster (img background?)

    OK this obviously won't apple to everyone but... I managed to DRAMATICALLY reduce the page load time.
    Firstly, this tip is for you if you're using a background image on your page - in the content for example - where I'm using mine.
    iWeb, for some reason known only to the developers, creates a PNG image the COMPLETE size of your web page!
    So if you're site is 700px wide and you've got a lot of photos on a page then it could go say 3000px in height. iWeb will create a 700px X 3300px (or so) PNG with your background.
    THIS WAS 1.4MB!!!! for me..... absolutely crazy!
    They put in no-repeat on the background CSS.
    So how to fix this...
    It's actually quite easy
    1) Publish to a directory
    2) using photoshop or some other image editing tool that can open PNG files, open up the largest background_image1.png - largest being largest in px X px - e.g. 700 X 3300 is bigger than 700X1800
    3) crop the image in width from 700px to 5px - yep you read that right - crop it to 5px!
    (Now obviously this depends on the image you're using in the background but I am assuming that most images are patterns that repeat horizontally... if you have another image that repeats horizontally and is bigger than 5px then make the image as wide as your repeating image)
    4) save the image as a JPG
    5) open MassReplaceIt
    6) create a query where you replace /background_image1.png) no-repeat with /background_image1.jpg) repeat-x
    7) set it to update all HTML pages that use a background
    8) copy the JPG to all folders that have the background image (unfortunately as the folder name is different it's difficult to just put the image in the /images directory - and i don't know how to use wildcards in massreplaceit - any tips welcome)
    NOTE: I am using the same image background on all pages for consistency therefore I have the same filename - I am assuming that it's like that for everyone - the filename that is - so checkout that the replace will work for you.
    Well hope that helps you - I managed to reduce the page load times dramatically and now I can actually consider using iWeb for generating pages for my family in Australia who are still on 56Kbit modems and don't have broadband available.
    Cheers
    Jason

    http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.nmrtubes.com/
    Your entire home page is made entirely from
    images.....consider using some
    use of CSS and background colour, minimal graphics and some
    actual text, and
    you'll be a long way better off.
    Brendon
    "s.joy" <[email protected]> wrote in message
    news:ejfvjp$j0c$[email protected]..
    >I had posted this a couple days ago, but then wasn't
    available to check in
    > until now...so I'm reposting and this time I included my
    web address!
    >
    > Does anyone know how to make pages load faster? My page
    loads
    > incrementally at
    > the moment. The only images on my home page are .gifs so
    I'm wondering why
    > it
    > still comes in choppy when the files are so small. The
    address is
    > www.nmrtubes.com
    >

  • Mov streaming preload stop page content loading

    Web content trouble:
    I have a quicktime movie in a module page on my site.
    Works well except that the page stop loading when it reach the video.
    Only after the compleate loading, the rest of the page is loaded, preventing the visitors to read.
    Whats wrong? It looks like the buffering occupy the bandwidth .
    Any help will be appreciated.
    Thanks.

    Web content trouble:
    I have a quicktime movie in a module page on my site.
    Works well except that the page stop loading when it reach the video.
    Only after the compleate loading, the rest of the page is loaded, preventing the visitors to read.
    Whats wrong? It looks like the buffering occupy the bandwidth .
    Any help will be appreciated.
    Thanks.

  • Progress Bar before page loads......

    Hello -
    I'm able to make progress bars for loading images on the
    screen, but I'm having a hard time figuring out how to make one
    appear before the entire page loads. Do use the Loader component as
    the entire page and have my flash file load into it? I'm pretty
    sure there is an easier way by using actionscript, but my coding
    skills are average........
    Any help or suggestions on this would be greatly appreciated.
    I did do a search on this subject and found a few hints, but not
    everything.
    Thanks again.

    I tried this coding and for some reason I didn't see the
    progress bar before the page loaded. I'm assuming it has something
    to do with the "visible=0" line. I messed around with that, and
    still had no luck. See if I overlooked a small detail. Thanks
    Kglad.
    That url (in the code) will work if you want to try it.
    loadMovieNum("
    http://www.trance-state.com/equipment.swf",2);
    preloadI=setInterval(preloadF,100);
    function preloadF(){
    bl=_level2.getBytesLoaded();
    bt=_level2.getBytesTotal();
    if(bl==bt&&bl>0){
    clearInterval(preloadI);
    _level0._visible=0;
    } else {
    // put code here to update your progress bar and anything
    else you want using bl and bt
    }

  • CSS wierds - body background style getting over-ridden by "what?"

    Safari v4.0.4
    Up until this version I have not had to do much of any cross-browser testing with Safari (always with IE). Now I'm finding myself trying to figure out how Safari is behaving relative to FFox3.x (the standard I use for initial development)
    I have several issues that have got me confused but I'll start with this one:
    The background-color style on the body is being set on a linked style sheet.
    body {background-color: #000000;}
    but the body is not black..?
    After much hacking around, I finally found that the next style sheet (also linked) did not have any setting for the body background-color but that seem to kill the setting in the previous style sheet.. I added:
    body {background-color: #000000;}
    .. to that style sheet file and then the background worked.. I also found the an embedded style block also has the same effect. (over ridding the body background-color style) I would then added that line to the embedded style block and then it would work right.
    Examples:
    Fixed: http://dev7.esonicspider.net/facility_overview.html
    Not fixed: http://dev7.esonicspider.net/productalloverview.html
    Is this a known issue (searching did not indicate that..)
    This is a very large website and now I'm faced with adding this tag to every page.. Aaaarrrggggg..
    Is there a better way around this issue..?
    Thanks.. John..

    Found that
    @charset "UTF-8";
    in the style sheet was the main problem..

  • How to Set icon/image programatically in ADF before page loads

    This is my UI:
    Depends on the condition i want to set icon/image programatically in my java code.Before page load im calling this method.
    So i couldnt take binding value also,it throws null pointer exception.Then i tried setting icon/image programatically.
    <af:commandImageLink text="settings" icon="#{bean.iconsettings}" binding="#{bean.bind}"> </af:commandImageLink>
    My bean:
    private RichIcon iconsettings;(its getters and setters)
    private void method(){                         // method
    if(cond){
    this.iconsettings="/images/20.jpg";   //trying to set icon in a string.but it throws me error that cannot set RichIcon to string.
    else
    this.iconsettings="/images/19.jpg";
    Could any one tell me how can i set icon/image in java code.Before page loads im performing all above said tasks.Please help.

    Well, you set the icon property to a bean method, which you have done. The bean method however need to have the signature
    public String getIconsetting()
    // your code returning hte path to the icon
    if(cond){
         return ="/images/20.jpg";   //trying to set icon in a string.but it throws me error that cannot set RichIcon to string.
    else {
         return ="/images/19.jpg";
    The bindproperty is not needed, remove it and remove the RichIcon Iconsettings too´as it's not needed to and is the wrong type anyway.
    Timo

  • Using FF 33.0, pages are not loading when I click on tabs loaded in the background. How do I fix this?

    Additional information: I have Tab Mix Plus and UnLoadTab installed, and neither of them is set to load the tab(s) before selected manually.

    In the tabs menu under the Firefox Menu > Options > Tabs section, is do not load tabs until selected also checked?
    Does this also happen when the add ons are disabled? [[Troubleshoot Firefox issues using Safe Mode]]

  • How come EVERY page freezes and takes alot longer to load than it did before the last firefow update..... and how do i reset firefox to the last version that aowkrd??

    each screen takes longer to load than it did before your last update.... in this case better is NOT BETTER! dont fix whats not broken!!!

    go through the whole article - Firefox Hangs
    https://support.mozilla.com/en-US/kb/Firefox%20hangs
    Check and tell if its working.

  • Loading multiple SWFs across many pages in a Flash interface

    I have a Flash AS3 interface that lets users go tto different
    pages with the usualy back & next buttons. Each page they come
    to loads in a page-specific XML file with content, and then
    possibly graphic files and/or SWF files.
    My question is this: When a user happens to quickly click the
    next page button, they will gte each page to start loading its
    assets. I believe that this would cause pages that they didn't
    soend more that a fraction of a second on to continue loading in
    the background. So if they quickly click through 20 pages, all 20
    pages' assets are loading. Sounds like I have a bad design on my
    hands!
    Without designing/developing for it, is this the simple
    result of loading in a file to Flash? Should I look into stopping
    iles from dpownloading if a user leaves a page before it's fully
    downloaded? Is that even possible?
    Any thoughts or advice would be greatly appreciated!

    I have a Flash AS3 interface that lets users go tto different
    pages with the usualy back & next buttons. Each page they come
    to loads in a page-specific XML file with content, and then
    possibly graphic files and/or SWF files.
    My question is this: When a user happens to quickly click the
    next page button, they will gte each page to start loading its
    assets. I believe that this would cause pages that they didn't
    soend more that a fraction of a second on to continue loading in
    the background. So if they quickly click through 20 pages, all 20
    pages' assets are loading. Sounds like I have a bad design on my
    hands!
    Without designing/developing for it, is this the simple
    result of loading in a file to Flash? Should I look into stopping
    iles from dpownloading if a user leaves a page before it's fully
    downloaded? Is that even possible?
    Any thoughts or advice would be greatly appreciated!

  • SPRY MENU BAR SUBMENUS-Showing up Under other Page Content

    Hello. I need help. My spry menu bar is showing up beneath content located in another div tag. My code is as below.
    <!DOCTYPE html>
    <html>
    <head>
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>NEW TEMPLATE</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    .wrapper {
    background-color: #fffee8;
    margin: auto;
    padding: 5px;
    height: auto;
    width: 980px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: left;
    color: #FFF;
    position: static;
    overflow: visible;
    .header {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 980px;
    background-color: #fffee8;
    border: 0px solid #09C;
    .logoarea {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 980px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-image: url(/Graphics/LOGOS%20AND%20BANNER/GRADIENTHEADER3.jpg);
    .navbar {
    background-color: #666;
    height: 30px;
    width: 980px;
    margin: 1px;
    padding: 1px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    .subnavmenu {
    background-color: #CCC;
    height: 30px;
    width: 980px;
    font-family: "Felix Titling", "Engravers MT";
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    color: #999;
    text-decoration: blink;
    margin: 0px;
    padding: 0px;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    .leftcontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #333;
    padding: 5px;
    height: auto;
    width: 485px;
    margin-right: 0px;
    margin-left: 0px;
    border: 0px none #CCC;
    background-color: fffee8;
    .rightcontent {
    background-color: #333;
    padding: 5px;
    height: auto;
    width: 450px;
    margin-right: 5px;
    margin-left: 5px;
    border: 5px ridge #06F;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFee8;
    font-size: 12px;
    position: static;
    .footer {
    background-image: url(/Graphics/MORGAN%27S%20PIC.jpg);
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
    height: 165px;
    width: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: center;
    clear: both;
    color: #666;
    position: relative;
    left: 0px;
    bottom: 0px;
    #logo {
    position:relative;
    left:auto;
    top:-5px;
    width:272px;
    height:auto;
    z-index:1;
    #apDiv4 {
    position:relative;
    width:544px;
    height:53px;
    z-index:1;
    background-color: #fffee8;
    float: right;
    -->
    </style>
    <style type="text/css">
    <!--
    #apDiv2 {
    position:absolute;
    left:857px;
    top:123px;
    width:49px;
    height:50px;
    z-index:1021;
    #apDiv3 {
    position:absolute;
    left:956px;
    top:122px;
    width:150px;
    height:50px;
    z-index:1022;
    #apDiv5 {
    position:static;
    width:200px;
    height:auto;
    background-color: #FFFEE8;
    float: right;
    -->
    </style>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    #apDiv1 {
    position:absolute;
    left:439px;
    top:23px;
    width:336px;
    height:155px;
    z-index:1021;
    #apDiv6 {
    position:relative;
    left:0px;
    top:0px;
    width:154px;
    height:153px;
    z-index:1021;
    float: right;
    -->
    </style>
    <script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>
    <body background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png" class="body" id="body" onLoad="MM_preloadImages('/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png')">
    <div class="wrapper" id="wrapper">
      <div class="header" id="header">
        <div class="logoarea" id="logoarea"><div id="apDiv6">
            <p> </p>
            <p> </p>
            <p><br/>
              <a href="http://www.facebook.com/pages/Mifflin-Juniata-Special-Needs-Center-Inc/129756770511336" target="_blank" align="left"><img src="http://www.niftybuttons.com/blackink/facebook.png" width="60" height="59"></a><a href="https://twitter.com/MJSNC1" target="_blank" align="left"><img src="http://www.niftybuttons.com/blackink/twitter.png" width="57" height="59"></a>
              <br/>
            </p>
            <p>
              <!-- Facebook Badge END -->
            </p>
        </div><div id="apDiv4" >   
          <script>
    (function() {
      var cx = '004600001770955757780:ub1su5xae54';
      var gcse = document.createElement('script'); gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
          '//www.google.com/cse/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    </script>
          <gcse:search></gcse:search></div>
        <div id="logo" onClick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><img src="/Graphics/LOGOS AND BANNER/slogan and logo editable_edited-2.png" width="244" height="242" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
        <a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a></div>
        <div class="navbar" id="navbar">
          <img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
          <map name="Map">
            <area shape="rect" coords="59,4,149,24" href="/NAVBAR/ABOUT US/AboutUs.html" target="_parent" alt="About Us">
            <area shape="rect" coords="157,3,255,23" href="/NAVBAR/CONTACT US/ContactUs.html" target="_parent">
            <area shape="rect" coords="263,4,423,22" href="/NAVBAR/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_parent">
            <area shape="rect" coords="429,3,578,22" href="/NAVBAR/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
            <area shape="rect" coords="586,3,698,23" href="/NAVBAR/GET INVOLVED/GetInvolved.html" target="_parent">
            <area shape="rect" coords="704,5,815,24" href="/NAVBAR/DONATE NOW/DonateNow.html" target="_parent">
            <area shape="rect" coords="822,5,920,24" href="/NAVBAR/AFFILIATES/Affiliates.html" target="_parent">
          </map>
        </div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#">Adults</a>
           <ul>
             <li><a href="/SUBNAVMENU/ADULT REC/ADULT REC.html">Adult Rec</a></li>
             <li><a href="/SUBNAVMENU/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">Adult Training Facilities</a></li>
             <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">Life Sharing</a></li>
             <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">Summer Rec</a></li>
             <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">Aktion Club</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Youth</a>
           <ul>
             <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">After School Program</a></li>
    <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">Challenger Division</a></li>
             <li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">Early Intervention</a></li>
             <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">Summer Rec</a></li>
             <li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-Ball</a></li>
             <li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">Teen Club</a></li>
             <li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">Training &amp; Transition</a></li>
           </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#">Events</a>
           <ul>
             <li><a href="/SUBNAVMENU/EVENTS/LipSync.html">Lip Sync</a>          </li>
             <li><a href="/SUBNAVMENU/EVENTS/Fundraisers.html">Fundraisers</a></li>
             <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">Annual Picnic</a></li>
             <li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">Touring Friends</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Employees</a>
           <ul>
             <li><a href="/SUBNAVMENU/MEET OUR STAFF/MeetOurStaff.html">Meet Our Staff</a></li>
             <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">Agency With Choice</a></li>
             <li><a href="/SUBNAVMENU/EMPLOYEE ACCESS/RegisterPage.html">Employee Access</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Other</a>
           <ul>
             <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">Education &amp; Therapy</a></li>
             <li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">Equipment Loan</a></li>
             <li><a href="/NAVBAR/VOLUNTEER/Volunteer.html">Volunteer</a></li>
           </ul>
         </li>
       </ul>
       <div class="subnavmenu" id="subnavmenu"> </div>
      </div>
      <div class="rightcontent" id="rightcontent"><!-- TemplateBeginEditable name="editrightcontent" -->
        <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
      <!-- TemplateEndEditable --></div>
      <div class="leftcontent" id="leftcontent"><!-- TemplateBeginEditable name="editleftcontent" -->
        <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
      <!-- TemplateEndEditable --></div>
      <div class="footer" id="footer"><a href="/NAVBAR/CONTACT US/ContactUs.html">Contact Us </a>| <a href="/NAVBAR/ABOUT US/AboutUs.html">About Us</a> | <a href="/FOOTER AND DISCLAIMER/Disclaimer.pdf">Disclaimer</a></div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/Web Site Root Folder/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/Web Site Root Folder/SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* 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
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 1;
    list-style-type: none;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 191px;
    height: 30px;
    float: left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #CCC;
    /* 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
    margin: 0;
    padding: 5;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: -1000em;
    width: 9em;
    height: auto;
    clear: both;
    /* 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
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 15em;
    border: thin solid #666;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* 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
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    height: 30px;
    width: auto;
    padding: 0px;
    background-color: #CCC;
    text-decoration: none;
    margin: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #424edd;
    font-size: 16px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: center;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    /* 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
    color: #FFF;
    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%;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* 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
    /* 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
    /* 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
    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
    position: absolute;
    filter:alpha(opacity:0.1);
    /* 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;

  • Editable regions in templates. How do I edit the CSS in a new page from the template?

    I am new to Dreamweaver and Web design. I have made a template and have two editable regions they work fine. When I create a page from this template, I can't edit the CSS. What do I need to do to edit the div tags that are specific to the editable regions? Thank you, I appreciate any help I am just about to give up with templates.

    Hi, thank you here is my code. Maybe I am trying to do too much advanced stuff to soon!
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <link href="file:///C|/Users/Roxane/Desktop/Brown County Indiana/images/favicon.ico" rel="shortcut icon"/>
    <!--jquery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="file:///C|/Users/Roxane/Desktop/brown county indiana/scripts/automanualslideshow.js"></script>
    </script>
    <!-- End jquery-->
    <style type="text/css">
    #container {
        width: 960px;
        margin-right: auto;
        margin-left: auto;
    #header {
        height: 80px;
        width: 100%;
        background-color: #222;/*Some browsers will not recognize RGBA colors*/
        background-color: rgba(0,0,0,0.6);/*RGBA fourth value for opacity, if there are two rules that apply to the same element, the latter of the two takes priority.*/
    .jld_logo {
        float: left;
        padding-left: 70px;
        display: block;
        padding-top: 10px;
    #navigation {
        height: 27px;
        width: 100%;
        background-color: #C00;
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
        left: 0px;
        color: #FFF;
        background: rgb(192,0,0); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(192,0,0,1) 0%, rgba(144,0,0,1) 51%, rgba(144,0,0,1) 56%, rgba(192,0,0,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192,0,0,1)), color-stop(51%,rgba(144,0,0,1)), color-stop(56%,rgba(144,0,0,1)), color-stop(100%,rgba(192,0,0,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(192,0,0,1) 0%,rgba(144,0,0,1) 51%,rgba(144,0,0,1) 56%,rgba(192,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(192,0,0,1) 0%,rgba(144,0,0,1) 51%,rgba(144,0,0,1) 56%,rgba(192,0,0,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(192,0,0,1) 0%,rgba(144,0,0,1) 51%,rgba(144,0,0,1) 56%,rgba(192,0,0,1) 100%); /* IE10+ */
        background: linear-gradient(top,  rgba(192,0,0,1) 0%,rgba(144,0,0,1) 51%,rgba(144,0,0,1) 56%,rgba(192,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c00000', endColorstr='#c00000',GradientType=0 ); /* IE6-9 */
    #sideleft {
        float: left;
        width: 19.0%;
        font-family: eurofurence, "Tekton Pro", Tahoma, sans-serif;
        font-size: 18px;
        font-weight: bold;
        color: #FFF;
        background-color: #222;/*Some browsers will not recognize RGBA colors*/
        background-color: rgba(0,0,0,0.6);/*RGBA fourth value for opacity, if there are two rules that apply to the same element, the latter of the two takes priority.*/
        text-align: center;
        height: 300px;
        border-radius: 10px;
        border:1px solid #888;
        padding-top: 0px;
        margin-top: 25px;
    .mywork {
        font-family: eurofurence, "eurofurence light", tahoma, sans-serif;
        font-size: 30px;
        font-style: normal;
        font-weight: bold;
        font-variant: normal;
        text-transform: none;
        color: #C00;
        text-align: center;
        line-height: 60px;
    .categoriessmall {
        font-family: eurofurence, "eurofurence light", tahoma, sans-serif;
        font-size: 16px;
        font-style: normal;
        line-height: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: uppercase;
        color: #FFF;
        text-align: left;
        display: block;
        margin-left: 15px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #C00;
        margin-right: 10px;
    .sideleft-text {
        padding-top: 75px;
    a.sideleft, a.sideleft:link, a.sideleft:visited {
        display:block;
        margin-top:4px;
        text-align:left;
        text-decoration:none;
        font-family:eurofurence, "eurofurence light", tahoma, sans-serif;
        font-size:14px;
        color:#FFF;
        line-height:20px;
        overflow:hidden;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        margin-left: 15px;
        white-space: nowrap;
    a.sideleft:hover {
        color:#999;
    a.sideleft:active {
        color:#C00;
    #mainright {
        float: right;
        width: 75.5%;
        font-family: eurofurence, "eurofurence light", tahoma, sans-serif;
        color: #FFF;
        text-decoration: none;
        height: 700px;
        text-align: left;
        background-color: #000000;/*Some browsers will not recognize RGBA colors*/
        background-color: rgba(0,0,0,0.6);
        margin-left: 0px;
        margin-top: 25px;
        margin-right: 0px;
        margin-bottom: 10px;
        border-radius: 10px;
        border:1px solid #888;
        z-index: -3;
        padding: 0px;
    .categories {
        font-family: eurofurence, "eurofurence light", tahoma, sans-serif;
        font-size: 36px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: uppercase;
        color: #808080;
        text-decoration: none;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #C00;
        float: none;
        position: relative;
        clear: none;
        left: 0px;
        z-index: auto;
        margin-right: 50px;
        margin-left: 20px;
    .img
        height:auto;
        width:auto;
        float:left;
        text-align:center;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        color: #FFF;
        font-family: eurofurence, "eurofurence light", tahoma, sans-serif;
        font-size: 18px;
        padding: 0px;
        margin-top: 0px;
        margin-right: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
    .img img
        display:inline;
        margin:10px;
        border:1px solid #333;
    .img a:hover img
        border:1px solid #900;
    .image desc
        text-align:center;
        font-weight:normal;
        width:120px;
        margin:2px;
        font-family: eurofurence, "eurofurence light", tahoma, sans-serif;
        font-size: 16px;
        color: #FFF;
        text-decoration: none;
        font-style: normal;
        line-height: normal;
        font-variant: normal;
        text-transform: none;
    #footer {
        clear: both;
        width: 100%;
        font-family: eurofurence, "Tekton Pro", Tahoma, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        text-align: center;
        margin-left: 0px;
        color: #FFF;
        margin-bottom: 0px;
        margin-top: 10px;
        padding-left: 10%;
        padding-right: 15px;
    body {
        background-image: url(../images/background_large.jpg);
    </style>
    </script>
    <script src="../spryassets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../spryassets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="../styles/automanualslideshow.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div id="container">
      <div id="header">
      <div class="jld_logo">
      <a href="file:///C|/Users/Roxane/Desktop/index.html">
      <img src="../images/jeff_danielson_logo_reverse.png" alt="Jeff Danielson logo" name="jld_logo" width="60" height="60" id="jld_logo" longdesc="images/jeff_danielson_logo_reverse.png" />
        </a>
      </div></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Home</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">About Jeff</a>
            <ul>
              <li><a href="#">Biography</a></li>
              <li><a href="#">News</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">My Work</a>
            <ul>
              <li><a href="file:///C|/Users/Roxane/Desktop/recent_photographs.html">Recent Photographs</a></li>
            <li><a href="file:///C|/Users/Roxane/Desktop/flowers_leaves_moss.html">Flowers/Leaves/Moss</a></ li>
            <li><a href="file:///C|/Users/Roxane/Desktop/forests_trees_valleys.html">Forests/Trees/Valleys</ a></li>
            <li><a href="file:///C|/Users/Roxane/Desktop/deer_dogs_creatures.html">Deer/Dogs/Creatures</a></ li>
            <li><a href="file:///C|/Users/Roxane/Desktop/lakes_rivers_streams.html">Lakes/Rivers/Streams</a> </li>
            <li><a href="file:///C|/Users/Roxane/Desktop/clouds_skis_fog.html">Clouds/Skies/Fog</a></li>
            <li><a href="file:///C|/Users/Roxane/Desktop/birds_butterflys_insects.html">Birds/Butterflys/Ins ects</a></li>
            <li><a href="file:///C|/Users/Roxane/Desktop/panoramas.html">Panoramas</a></li>
            <li><a href="file:///C|/Users/Roxane/Desktop/fall_winter_spring_summer.html">Fall/Winter/Spring/ Summer</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Pricing</a>
            <ul>
              <li><a href="#url">Size</a></li>
            <li><a href="#url">Mats</a></li>
            <li><a href="#url">Frames</a></li>
            <li><a href="#url">Frames & Mats</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Runciple Spoon</a>
            <ul>
              <li><a href="#">The 1970's</a></li>
              <li><a href="#">The 1980's</a></li>
              <li><a href="#">The 1990's</a></li>
              <li><a href="#">The 2000's</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- TemplateBeginEditable name="Sideleft" -->
      <div id="sideleft"> <span class="mywork">My Work</span> <span class="categoriessmall">Categories</span> <a class="sideleft" href="../recent_photographs.html" title="">Recent Photographs</a> <a class="sideleft" href="../flowers_leaves_moss.html" title="Flowers/Leaves/Moss">Flowers/Leaves/Moss</a> <a class="sideleft" href="../Forests/Trees/Valleys.html" title="Forests/Trees/Valleys">Forests/Trees/Valleys</a> <a class="sideleft" href="../Deer/Dogs/Creatures.html" title="Deer/Dogs/Creatures">Deer/Dogs/Creatures</a> <a class="sideleft" href="../Lakes/Rivers/Streams.html" title="Lakes/Rivers/Streams">Lakes/Rivers/Streams</a> <a class="sideleft" href="../Clouds/Skies/Fog.html" title="Clouds/Skies/Fog">Clouds/Skies/Fog</a> <a class="sideleft" href="../Birds/Butterflys/Insects.html" title="Birds/Butterflys/Insects">Birds/Butterflys/Insects</a> <a class="sideleft" href="../Panoramas.html" title="Panoramas">Panoramas</a> <a class="sideleft" href="../Fall/Winter/Spring/Summer.html" title="Fall/Winter/Spring/Summer">Fall/Winter/Spring/Summer</a></div>
      <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Mainright" -->
      <div id="mainright"></div>
      <!-- TemplateEndEditable -->
      <div id="footer">
      © 2012 Jeff Danielson Brown County Indiana Photography</div>
    <!--Content for container goes here--></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • Missing body background in IE

    I'm just putting a page together, which isn't finished yet,
    but I've noticed my body background colour and image have gone AWOL
    in IE - any reason why? Does IE get confused over having a
    background image and a background colour?
    This is the page :
    link here
    The CSS file is ebook2.css.
    Cheers.

    Change this -
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Pixelar e-Readers</title>
    <link href="/ebook2.css" rel="stylesheet" type="text/css"
    />
    <link href="sitesectionsereader.css" rel="stylesheet"
    type="text/css" />
    </head>
    to this -
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Pixelar e-Readers</title>
    <link href="/ebook2.css" rel="stylesheet" type="text/css"
    />
    <link href="sitesectionsereader.css" rel="stylesheet"
    type="text/css" />
    <style type="text/css">
    #contentWrapper { overflow:hidden; }
    </style>
    <!--[if lte IE 6]>
    <style>
    #contentWrapper { zoom:100%; }
    </style>
    <![endif]-->
    </head>
    and see if that improves things. If it does, then add the
    overflow:hidden
    to your stylesheet. The conditional comment will have to
    remain in the head
    of each page.
    By the way, you have these two links -
    <td><img src="../protxlogo.jpg" alt="Protx Logo"
    /><br /><br /></td>
    </tr>
    <tr>
    <td><img src="../safetylogos.gif" alt="CE and ROHS
    logos" vspace="15"
    /></td>
    that must be incorrect, since you are already at the root of
    the site.
    There is no "go up one level".
    You also have two tables that are "wrapped" in paragraph
    tags. That's
    invalid.
    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
    ==================
    "Iain71" <[email protected]> wrote in
    message
    news:[email protected]...
    > I'm just putting a page together, which isn't finished
    yet, but I've
    > noticed my
    > body background colour and image have gone AWOL in IE -
    any reason why?
    > Does IE
    > get confused over having a background image and a
    background colour?
    >
    > This is the page :
    >
    >
    http://www.pixelar.co.uk/ebookinfo201.php
    >
    > The CSS file is ebook2.css.
    >
    > Cheers.
    >

Maybe you are looking for

  • SAP BPC 7.5 (MS) - The members are locked.

    Problem occured when the processing time to clear down one TIME period of data took 3 hours on Fri pm. On Monday morning, I executed a Run Package > Clear > on the same segment.  It ran for 1hr and 10 minutes and I escalated to our Helpdesk for a ser

  • Wireless printer suddenly not working - EPSON WF-2540

    I have a Macbook Pro and suddenly it has stopped printing to my Epson WF-2540 printer, which I've had for a couple years. It printed something last week and now it won't print anything. I've restarted the printer, reset the settings and reconnected t

  • How can I add a decimal in a string?

    Hi, I try to make a function to insert a decimal point after the 3rd position in a string if length of that string is >= 4 I try as belows: If LENGTH(str) >= 4 THEN rdstr := SUBSTR(str, 3); ldstr := TRIM(TRAILING rdstr FROM str); str := CONCAT(CONCAT

  • Undo with Memento pattern vs swing undo

    I was tempted to add this question to the end of http://forum.java.sun.com/thread.jsp?forum=425&thread=440740&tstart=0&trange=15 but I've had a poor response in the past by adding a question to the end of an existing thread. I am working on a project

  • Can APEX produce report output similar to "Oracle Discover report"

    Hi All: We are having some Oracle Discover reports and I like to see whether we can deliver the same report format in APEX 3.1.2. We got a table which stores sales detailed information. The table looks like: Division Ln Of Business Year Month Amount