CSS - background image repeat-y

Hello,
QUESTIONThis works great in IE v6.0. How can I get the
background position to work in Firefox 2.0?
Instead of a tiled background that I can control where it
begins to tile within a DIV, in Firefox 2.0 it displays
the image once and doesn't tile like it does in IE. Argh!
background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
background-repeat: repeat-y;
background-position: 0% 218px;
I just went through a CSS training video and applied some of
the things taught.
It was very helpful thanks you. However it worked in IE but
not in Firefox.
http://movielibrary.lynda.com/html/modPage.asp?ID=279
5. Adding Colors and Backgrounds
Movie: Positioning backgrounds
Is there a work around for Firefox?

Zero is zero no matter what units you have on it. I am not
aware of any
mixed unit issue like that.
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
==================
"Alexander Ross" <[email protected]> wrote in message
news:f0rkhi$kht$[email protected]..
>I have some vague recolection about weird behaviors with
mixed units. Try:
>
> background-position: 0px 218px;
>
> If not, post a link to your page
>
>
>> background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
>> background-repeat: repeat-y;
>> background-position: 0% 218px;

Similar Messages

  • Main Wrapper, Container and background-image repeat problem-and Footer :-)

    Hi everyone,
    First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
    Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
    body{
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 11px;
    font-family: verdana;
    text-align: center;
    background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
    #main_wrapper {
    width: 959px;
    margin:0 auto;
    margin-top:80px;
    background:url(backslice.png) repeat-y;
    height:auto;
    min-height:800px;
    #header {
    width: 959px;
    margin-left: auto;
    margin-right: auto;
    height:119px;
    background:red;
    padding-top: 0px;
    padding-bottom: 0px;
    #topmenu {
    background-color:#blue;
    height:30px;
    margin:0px;
    width: 959px;
    margin-left: auto;
    margin-right: auto;
    #body_container {
    height:100%;
    width: 949px;
    margin: 0 auto;
    #content {
    float:left;
    width: 645px;
    background:yellow;
    border-right:1px solid #ffffff;
    padding:10px;
    height:100%;
    text-align:left;
    #sidebar {
    float:left;
    width: 283px;
    background:#234234;
    height:100%;
    #footer {
    clear:both;
    height:200px;
    background-color: #686768;
    margin:0 auto;
    border-top: 1px solid #F6F6F6;
    text-align:center;
    width: 100%;
    <html xmlns="">
    <head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="3css.css" />
    <meta http-equiv="content-type" content="text/html" />
    </head>
    <body>
    <div id="main_wrapper">
         <div id="header">
          <span id="header_logo">title</span>
         </div>
         <div id="topmenu">
         menu
         </div>
         <div id="body_container">
          <div id="content">
    content to be added
          </div>
          <div id="sidebar">
          hallow2
          </div>
         </div>
    </div>
    <div id="footer">
    asd
    </div>
    </body>
    </html>
    Thanks in advance if somebody can help me out here.
    you can see an image of the problem in the attachement down thr... thnx

    <html xmlns="">
    <head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="3css.css" />
    <meta http-equiv="content-type" content="text/html" />
    </head>
    <body>
    <div id="main_wrapper">
         <div id="header">
          <span id="header_logo">title</span>
         </div>
         <div id="topmenu">
         menu
         </div>
         <div id="body_container">
          <div id="content">
    content to be added
          </div>
          <div id="sidebar">
          hallow2
          </div>
         </div>
    </div>
    <br clear="all" />
    <div id="footer">
    asd
    </div>
    </body>
    </html>
    Hope this will work well

  • Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

  • Background image repeat, like css repeat_y

    I imagine this is possible, but I haven't figured it out as yet.
    I simply want to add a background image that does not scale, but functions exactly like a HTML/CSS background:
        background-repeat: repeat-y;
        background-position: left top;
    Thanks.

    Just because the swc is 700 kb doesn't mean your project will increase by that amount.
    Only classes that are actually being used are compiled into your project.
    As an alternative, you can use this simple class I wrote:
    http://muzakdeezign.com/flex3/flex3lib/ImageTile.as
    <mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:display="com.muzakdeezign.flex.display.*"
    layout="absolute"
    backgroundColor="#282E3E"
    backgroundImage=""
    >
         <!-- only repeat x-axis -->
         <display:ImageTile width="100%" height="1200" source="@Embed('skins/bg.png')" includeInLayout="false" />
         <!-- repeat x-axis y-axis -->
         <!--<display:ImageTile width="100%" height="100%" source="@Embed('skins/bg.png')" includeInLayout="false" />-->
         <!-- only repeat y-axis -->
         <!--<display:ImageTile width="800" height="100%" source="@Embed('skins/bg.png')" includeInLayout="false" />-->
    </Application>

  • Background Image repeating for table cells

    I am trying to put different images as the background to all
    the cells in a table, so I can put text over the top of them, but I
    cant have an image without it repeating. Ive tried going into the
    code and adding background-image: "no-repeat" but that hasn't
    worked. I know nothing of CSS and it seems really confusing - so if
    this is the answer please give me CSS for dummies instructions.
    Layers drive me bonkers as no 2 browsers display them in the same
    place.
    URL is:
    http://www.visionsportsmedia.com/BillyTestSite/test
    At the moment only cell one is a background image, the rest
    are images inserted normally.
    Hope you can help.
    Thanks.

    Your question reflects the confusing mess your life will be
    if you persist
    with web authoring without taking the time to learn some HTML
    and CSS.
    You have -
    <th height="351" colspan="6" "scope="col">
    Note the extra doublequote just before 'scope'.
    Also note that your preloads (look at the body tag) as well
    as your image
    swaps (look elsewhere - everywhere you see 'file:///') are
    all broken -
    pointing to files on your hard drive. Finally, you might want
    to just think
    about making a page where there is no readable content
    (everything here is
    in images). It will get a zero search engine ranking....
    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
    ==================
    "little bob" <[email protected]> wrote in
    message
    news:gqo8jh$ejo$[email protected]..
    >I am trying to put different images as the background to
    all the cells in a
    > table, so I can put text over the top of them, but I
    cant have an image
    > without
    > it repeating. Ive tried going into the code and adding
    background-image:
    > "no-repeat" but that hasn't worked. I know nothing of
    CSS and it seems
    > really
    > confusing - so if this is the answer please give me CSS
    for dummies
    > instructions. Layers drive me bonkers as no 2 browsers
    display them in the
    > same
    > place.
    >
    > URL is:
    http://www.visionsportsmedia.com/BillyTestSite/test
    >
    > At the moment only cell one is a background image, the
    rest are images
    > inserted normally.
    >
    > Hope you can help.
    >
    > Thanks.
    >

  • CSS Background Image issue in IE(6)

    Not sure what's causing this, but I basically have an image
    to create faux columns across my page, but the background image
    isn't extending to the bottom of the page in IE (6) as it is
    correctly in safari and firefox.
    The page is here :
    link here
    The relevant CSS is :
    #contentWrapper {
    background-image:url(vehiclecolumns.gif);
    background-repeat:repeat-y;
    #outerWrapper #contentWrapper #rightColumn1 {
    float: right;
    padding: 15px 10px 10px 10px; /* Sets the padding properties
    for an element using shorthand notation (top, right, bottom, left)
    width: 754px;
    text-align:justify;
    #outerWrapper #contentWrapper #content {
    margin: 26px 775px 0 0; /* Sets the margin properties for an
    element using shorthand notation (top, right, bottom, left) */
    padding: 15px 10px 10px 10px; /* Sets the padding properties
    for an element using shorthand notation (top, right, bottom, left)
    text-align:justify;
    #outerWrapper #contentWrapper .clearFloat {
    clear: right;
    display: block;
    Any ideas?
    Cheers.

    #contentWrapper {
    background-image:url(vehiclecolumns.gif);
    background-repeat:repeat-y;
    overflow:hidden;
    zoom:1;
    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:gaq8f2$pod$[email protected]..
    > Not sure what's causing this, but I basically have an
    image to create faux
    > columns across my page, but the background image isn't
    extending to the
    > bottom
    > of the page in IE (6) as it is correctly in safari and
    firefox.
    >
    > The page is here :
    >
    >
    http://www.mph.uk.com/vehicles701.php
    >
    > The relevant CSS is :
    >
    > #contentWrapper {
    > background-image:url(vehiclecolumns.gif);
    > background-repeat:repeat-y;
    > }
    > #outerWrapper #contentWrapper #rightColumn1 {
    > float: right;
    > padding: 15px 10px 10px 10px; /* Sets the padding
    properties for an
    > element
    > using shorthand notation (top, right, bottom, left) */
    > width: 754px;
    > text-align:justify;
    > }
    > #outerWrapper #contentWrapper #content {
    > margin: 26px 775px 0 0; /* Sets the margin properties
    for an element
    > using
    > shorthand notation (top, right, bottom, left) */
    > padding: 15px 10px 10px 10px; /* Sets the padding
    properties for an
    > element
    > using shorthand notation (top, right, bottom, left) */
    > text-align:justify;
    > }
    > #outerWrapper #contentWrapper .clearFloat {
    > clear: right;
    > display: block;
    > }
    >
    > Any ideas?
    >
    > Cheers.
    >

  • CSS Background image

    At
    http://www.robinbachnia.com/index1.htm,
    you'll see the content lies in a table cell. I want the background
    image to be centered in this cell, non-repeat, etc. Can you show me
    what I'm doing wrong, and solution? It will be a template change
    I'll apply, once I get it right.
    Thanks

    This is what you now have in the page -
    body{
    background: url(images/darknia_cssbgd.jpg) center no-repeat
    fixed; }
    the syntax is wrong. It should be -
    body{
    background: url(images/darknia_cssbgd.jpg) no-repeat center;
    (in this shorthand CSS, the repeat style has to come before
    the position
    style, and you do not need the 'fixed' style)
    Making that change will get you EXACTLY what you are
    specifying - a
    background image that sits in the center of the page without
    repeating. Is
    that what you want?
    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
    ==================
    "Bushido" <[email protected]> wrote in
    message
    news:fob9ql$4s0$[email protected]..
    > Hi Murray. I moved the style sheet to head of document,
    and uploaded. I
    > still
    > see a white background. Also, the NIA background image
    sits a little too
    > high,
    > you may see. I want it well below the menu. Any ideas?
    >
    http://www.robinbachnia.com/css_bgd_test.htm
    >

  • CSS : Background image not appearing on header

    Hi Guys,
    I need help with the background color of my header, for some reason, it's appearing in dreamweaver but NOT in the browser (FF, Chrome)
    If you have firebug, you can check the source from the link below.
    http://oneworldlc.ph/contact.php
    <body>
    <div id="main_container">
      <!-- TOP_NAV-->
      <div id="top_nav">
        <div id="nav">
          <div id="nav_container">
            <ul>
              <li><a href="contact/index.html">Home</a></li>
              <li>|</li>
              <li><a href="#">About Us </a></li>
              <li>|</li>
              <li><a href="#">Company</a></li>
              <li>|</li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /TOP_NAV-->
      <div id="contact_banner">
        <div id="contact_logo">
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <h2 align="center">Merging cultural gaps between Americans and BPO centers in the Philippines</h2>
          <p align="center" class="emphasis_red">We provide FREE training</p>
        </div>
      </div>
      <div id="page-wrap">
        <p align="center"><img src="images/contact_07.png" alt="Contact One World Learning Center Inc." width="180" height="44" /></p>
        <p> </p>
        <h1 align="center">One World Learning Center Inc.</h1>
        <p align="center" class="georgia_16px_559cbe">21st Floor, Robinson's Cybergate Tower 3, Pioneer St.</p>
        <p align="center" class="georgia_16px_559cbe">Mandaluyong City 1550</p>
        <p align="center"><span class="georgia_16px_559cbe">Phone: +63 917 887 7424</span><br />
        </p>
        <div id="contact-area">
          <form method="post" action="contact/contactengine.php">
            <table>
              <tr>
              <td> </td>
                <td><em>
                  <label for="Name"  class="left"><strong>              Name:</strong></label>
                  (required)<br />
                  <br />
                  <input name="Name" type="text" value="First Name, Last Name" />
                </em></td>
              </tr>
             <tr>
                <td> </td>
                <td><em>
                  <label for="Tel"  class="left"><strong><br />
                  Contact Number:</strong></label>
                  (required)<br />
                  <br />
                  <input type="text" name="Tel" />
                </em></td>
              </tr>
              <tr>
                <td> </td>
                <td><label for="Email" class="left"><strong><em><br />
                Email:</em></strong></label>
                <em>(required)</em><br /><br /><input name="Email" type="text" value="[email protected]" /></td>
              </tr>
              <tr>
                <td> </td>
                <td><label for="Message" class="left"><strong><em><br />
                Message:</em></strong></label>
                <em>(required)</em><br /><br /><textarea name="Message" rows="20" cols="20">Type your message here</textarea></td>
              </tr>
            </table>
            <div id="captcha-area">
              <?php
                        require_once('contact/recaptchalib.php');
                        $publickey = "6Lcd3AgAAAAAAAshrQD48fz1uOm_KrgeRBEnsU9e";
                        $privatekey = "6Lcd3AgAAAAAALNv3Uga2Pi7tHi08wODv-fsXR_N";
                        # the response from reCAPTCHA
                        $resp = null;
                        # the error code from reCAPTCHA, if any
                        $error = null;
                        # are we submitting the page?
                        if ($_POST["submit"]) {
                          $resp = recaptcha_check_answer ($privatekey,
                                                                  $_SERVER["REMOTE_ADDR"],
                                                                  $_POST["recaptcha_challenge_field"],
                                                                  $_POST["recaptcha_response_field"]);
                          if ($resp->is_valid) {
                             echo "You got it!";
                             # in a real application, you should send an email, create an account, etc
                          } else {
                             # set the error code so that we can display it. You could also use
                             # die ("reCAPTCHA failed"), but using the error message is
                             # more user friendly
                             $error = $resp->error;
                        echo recaptcha_get_html($publickey, $error);
                        ?>
            </div>
            <input type="submit" name="submit" value="Submit" class="submit-button" />
          </form>
        </div>
      </div>
      </div>
    </body>
    Here's the css:
    @charset "utf-8";
    /* CSS Document */
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
    pre, form, fieldset, table, th, td { margin: 0; padding: 0; }#main_container #top_nav {
         height: 35px;
         background-color: #000000;
    #main_container #top_nav #nav {
         font-family: Georgia;
         height: 35px;
         width: 940px;
         margin-right: auto;
         margin-left: auto;
    #page-wrap h1 {
         font-family: Georgia;
         font-size: 26px;
         font-style: normal;
    #footer  {
         background-color: #000000;
         color: #FFFFFF;
         text-align: center;
    #footer_owl_cont  p    {
         margin-left: 120px;
    #footer_owl_cont    {
         float: left;
         width: 481px;
         clear: both;
         margin-left: 239px;
         background-image: url(images/owl_footer.gif);
         background-repeat: no-repeat;
         background-position: left center;
         height: 142px;
         color: ffffff;
         background-color: transparent;
    #sidebar #sidebar_cont_2 {
         margin-top: 255px;
    #pitch_container {
         height: 150px;
         background-color: #000000;
         margin-right: auto;
         margin-left: auto;
         color: #FFFF00;
         font-family: Arial;
         font-style: italic;
         width: 900px;
         margin-top: 100px;
    #body_container {
         margin-right: auto;
         margin-left: auto;
         width: 940px;
         padding-top: 30px;
    #footer_owl_cont  .georgia_14px_559cbeCopy  a    {
         color: #FFFFFF;
         text-decoration: none;
    #footer_owl_cont  .georgia_14px_559cbeCopy  a:hover    {
         text-decoration: underline;
    #main_container #top_nav #nav ul li a {
         font-family: Georgia, sans-serif;
         color: 559cbe;
         text-decoration: none;
    #main_container #top_nav #nav {
         color: 559cbe;
         text-decoration: none;
    #main_container #top_nav #nav #nav_container {
         clear: both;
         float: left;
         margin-top: 10px;
    #main_container #top_nav #nav #nav_container a:hover {
         text-decoration: underline;
    #main_container #top_nav #nav #nav_container a {
         color: #559CBE;
         text-decoration: none;
         font-family: Georgia;
    #main_container #top_nav #nav ul {
         list-style-type: none;
    #main_container #top_nav ul li {
         display: inline;
         padding-right: 2.5px;
         padding-left: 2.5px;
    #copyright   {
         width: 940px;
         margin-right: auto;
         margin-left: auto;
         height: 148px;
         color: 559cbe;
    #main_container   #header_container  {
         background-image: url(images/bg_header.jpg);
         background-repeat: repeat-x;
         background-position: center top;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         border-bottom-color: #000000;
    #main_container #header_container #header_main {
         height: 354px;
         width: 940px;
         margin-right: auto;
         margin-left: auto;
         background-color: transparent;
         background-image: url(images/header_bg2.png);
         background-repeat: no-repeat;
         background-position: right;
    #main_container #header_container #header_main #submit_cont {
         float: left;
         margin-top: 233px;
         margin-left: 435px;
         font-size: 18px;
         font-family: Georgia;
         font-style: italic;
    #main_container #header_container #header_main #submit_cont a {
         color: #FFFF00;
         text-decoration: none;
    #main_container #header_container #header_main #submit_cont a:hover {
         text-decoration: underline;
    #sidebar {
         float: left;
         width: 380px;
         clear: both;
    #maincontent {
         width: 540px;
         margin-left: 400px;
         font-family: Georgia;
         line-height: 1.6em;
    #sidebar #banner_1_cont {
         height: 235px;
         width: 380px;
         background-image: url(images/banner_1_q1.jpg);
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: center center;
         clear: both;
         float: left;
    #sidebar #banner_1_cont p {
         font-family: Georgia;
         font-size: 13px;
         font-style: italic;
         color: #000000;
         margin-top: 175px;
         margin-left: 15px;
         position: relative;
    #maincontent ol {
         list-style-position: inside;
    #maincontent h3 {
         font-size: 26px;
    #pitch_container ul li {
         font-family: Georgia;
         font-size: 26px;
         font-style: italic;
         line-height: 1.6em;
         color: 1e1e1e;
    I hope you can enlighten me guys, am I missing something which makes it NOT to appear in Dreamweaver?
    Regards,
    Sid

    Thanks for the response Gary. However, the 35px that you're seeing is actually for the #nav. I recreate the css and tried to remove some of the heirarchy thing. Here's the updated copy. I even tried to remove the #main_container. Same thing happens, the bg image is still not appearing? I tried changing the file type to JPG but to no avail. I think I'm overlooking something which is causing the issue.
    @charset "utf-8";
    /* CSS Document */
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
    pre, form, fieldset, table, th, td { margin: 0; padding: 0; }#top_nav  {
         height: 35px;
         background-color: #000000;
    #nav   {
         font-family: Georgia;
         height: 35px;
         width: 940px;
         margin-right: auto;
         margin-left: auto;
    #page-wrap h1 {
         font-family: Georgia;
         font-size: 26px;
         font-style: normal;
    #footer  {
         background-color: #000000;
         color: #FFFFFF;
         text-align: center;
    #footer_owl_cont  p    {
         margin-left: 120px;
    #footer_owl_cont    {
         float: left;
         width: 481px;
         clear: both;
         margin-left: 239px;
         background-image: url(images/owl_footer.gif);
         background-repeat: no-repeat;
         background-position: left center;
         height: 142px;
         color: ffffff;
         background-color: transparent;
    #sidebar #sidebar_cont_2 {
         margin-top: 255px;
    #pitch_container {
         height: 150px;
         background-color: #000000;
         margin-right: auto;
         margin-left: auto;
         color: #FFFF00;
         font-family: Arial;
         font-style: italic;
         width: 900px;
         margin-top: 100px;
    #body_container {
         margin-right: auto;
         margin-left: auto;
         width: 940px;
         padding-top: 30px;
    #footer_owl_cont  .georgia_14px_559cbeCopy  a    {
         color: #FFFFFF;
         text-decoration: none;
    #footer_owl_cont  .georgia_14px_559cbeCopy  a:hover    {
         text-decoration: underline;
    #nav  ul  li  a   {
         font-family: Georgia, sans-serif;
         color: 559cbe;
         text-decoration: none;
    #nav   {
         color: 559cbe;
         text-decoration: none;
    #nav_container    {
         clear: both;
         float: left;
         margin-top: 10px;
    #nav_container  a:hover    {
         text-decoration: underline;
    #nav_container  a    {
         color: #559CBE;
         text-decoration: none;
         font-family: Georgia;
    #nav  ul   {
         list-style-type: none;
    #top_nav  ul  li  {
         display: inline;
         padding-right: 2.5px;
         padding-left: 2.5px;
    #copyright   {
         width: 940px;
         margin-right: auto;
         margin-left: auto;
         height: 148px;
         color: 559cbe;
    #header_container     {
         background-image: url(images/bg_header.jpg);
         background-repeat: repeat-x;
         background-position: center top;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         border-bottom-color: #000000;
    #header_main   {
         height: 354px;
         width: 940px;
         margin-right: auto;
         margin-left: auto;
         background-color: transparent;
         background-image: url(images/header_bg2.png);
         background-repeat: no-repeat;
         background-position: right;
    #submit_cont    {
         float: left;
         margin-top: 233px;
         margin-left: 435px;
         font-size: 18px;
         font-family: Georgia;
         font-style: italic;
    #submit_cont  a    {
         color: #FFFF00;
         text-decoration: none;
    #submit_cont  a:hover    {
         text-decoration: underline;
    #sidebar {
         float: left;
         width: 380px;
         clear: both;
    #maincontent {
         width: 540px;
         margin-left: 400px;
         font-family: Georgia;
         line-height: 1.6em;
    #banner_1_cont  {
         height: 235px;
         width: 380px;
         background-image: url(images/banner_1_q1.jpg);
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: center center;
         clear: both;
         float: left;
    #banner_1_cont  p  {
         font-family: Georgia;
         font-size: 13px;
         font-style: italic;
         color: #000000;
         margin-top: 175px;
         margin-left: 15px;
         position: relative;
    #maincontent ol {
         list-style-position: inside;
    #maincontent h3 {
         font-size: 26px;
    #pitch_container ul li {
         font-family: Georgia;
         font-size: 26px;
         font-style: italic;
         line-height: 1.6em;
         color: 1e1e1e;

  • Background image repeat-y not showing

    I have done a search here without success.
    I have a rough setup of a site that will show the background
    repeat-y in a div in IE but will not display it in firefox or
    safari.
    My css and and xhtml validate W3C.
    I am no pro and have tried several things I can think of
    without any luck.
    Here is the url
    http://www.asmc.ca/index2.html
    Thanks in advance

    The problem was that the div on which the background image
    was applied was
    collapsing around its non-floated descendents. You needed to
    do something
    to clear those floats before closing the div#innerwrapper.
    The
    'overflow:hidden' style forces the browser to establish a new
    block context
    for that div, effectively clearing the floats within, and
    allowing the div
    to wrap even the floated elements.
    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
    ==================
    "Bryan628" <[email protected]> wrote in
    message
    news:g6qsdt$350$[email protected]..
    > Thanks Murray,
    > That did the trick. So it was happening for 2 reasons?
    > 1 the div I had it on?
    > 2 the overflow hidden code?
    >
    > What does the overflow hidden mean/do
    > And thanks again guys
    >
    >
    >
    quote:
    Originally posted by:
    Newsgroup User
    > Change your #innerwrapper rule to this -
    >
    > #innerwrapper {
    > height: auto;
    > width: 768px;
    > background: url(images/body_bkgrnd.jpg) repeat-y;
    > overflow:hidden;
    > }
    >
    > and see if that helps.
    >
    > --
    > 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
    > ==================
    >
    >
    > "Bryan628" <[email protected]> wrote in
    message
    > news:g6qqk1$1ag$[email protected]..
    > > And thanks for your time.
    > >
    http://www.asmc.ca/index2.html
    > >
    > > Bryan
    >
    >
    >
    >
    >

  • CSS Background Image - Newbie needs help

    Good Afternoon,
    I'm trying to place a background image in the body of my
    page. Pasted below is the code:
    Questions:
    1. When viewed in the browser, only part of the image can be
    viewed, and no vertical scroll bar is available to view the bottom
    portion of it. Is there a setting to toggle such that the entire
    image can be viewed?
    2. As part of the background image, I have text that I want
    to use as hotspots for links to other pages in the site. Do I need
    to place a table or use some other technique to enable use of
    hotspots?
    Thanks from a very Green Newbie.
    Sid

    > 1. When viewed in the browser, only part of the image
    can be viewed, and
    > no
    > vertical scroll bar is available to view the bottom
    portion of it. Is
    > there a
    > setting to toggle such that the entire image can be
    viewed?
    Background images will never force scrollbars.
    > 2. As part of the background image, I have text that I
    want to use as
    > hotspots for links to other pages in the site. Do I need
    to place a table
    > or
    > use some other technique to enable use of hotspots?
    Yes. You cannot put hotspots on background images. Be aware
    that this is
    the worst (well, publishing a page made in Microsoft
    Word/Publisher is the
    worst) way to make a web page.
    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
    ==================
    "Sid Childers" <[email protected]> wrote in
    message
    news:eksuka$56i$[email protected]..
    > Good Afternoon,
    >
    > I'm trying to place a background image in the body of my
    page. Pasted
    > below
    > is the code:
    >
    > Questions:
    > 1. When viewed in the browser, only part of the image
    can be viewed, and
    > no
    > vertical scroll bar is available to view the bottom
    portion of it. Is
    > there a
    > setting to toggle such that the entire image can be
    viewed?
    > 2. As part of the background image, I have text that I
    want to use as
    > hotspots for links to other pages in the site. Do I need
    to place a table
    > or
    > use some other technique to enable use of hotspots?
    >
    > Thanks from a very Green Newbie.
    > Sid
    >
    > <style type="text/css">
    > <!--
    > body {
    > background: url(Homepage.jpg) no-repeat;
    > }
    > -->
    > </style>
    >

  • CSS Background Image - where is it?

    Hello, Have placed a fixed background image within my
    CSS...it looks fine when I look at it in Dreamweaver. The problem
    is when I upload to my webspace the image isn't there. Any ideas?
    These are the attributes:
    background-attachment: fixed;
    background-image: url(images/home.gif);
    background-repeat: no-repeat;
    background-position: 1px;

    dulcettones" <[email protected]> wrote in
    message
    news:f3m22g$kpu$[email protected]..> Sorry...the
    URL is:
    > www.notjustthenews.co.uk
    > The image in question goes in the top left corner and
    changes depending on
    > the section you're viewing.
    Remove: background-attachment: fixed; and you'll see the
    image shows up on
    the index page. You need to remove that on each of the rules
    you have set
    for the #top divs... some of them are missing the white
    background color
    also.
    Nadia
    Adobe® Community Expert : Dreamweaver
    CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    ~ Customisation Service Available ~
    http://www.csstemplates.com.au
    Spry Widget Examples
    http://www.dreamweaverresources.com/spry-widgets/

  • CSS Background Image Clickable?

    A client asked me to add an image on every page in an
    editable area eclipsing where I already have two divs (one is a
    title area and the other is text that goes under it). Both those
    divs are inside another div. I put the image as a background (no
    repeat) to the div that holds the other two and it fits perfect.
    But I need it to be clickable to another page. Any suggestions how
    I might do that? Can I somehow make the background image clickable?
    Can I make just that area of the div clickable? Keep in mind that
    the image is behind the corners of the other two divs. Here is the
    code:
    <td width="514" valign="top">
    <div id="services_right">
    <div id="services_copy">
    <div id="services_subsub">
    <h2><!-- TemplateBeginEditable name="services_sub"
    --><!-- TemplateEndEditable --></h2>
    </div>
    <div align="left"><!-- TemplateBeginEditable
    name="services_content" -->
    <p> </p>
    <!-- TemplateEndEditable --></div>
    </div> </div> </td>
    Thanks,
    Brian

    > How do you deal with that?
    Either -
    1. Do the insertion of a server-side include
    programmatically, e.g., based
    on the current page name, or
    2. Leave an editable region for the secondary navigation, and
    drop the
    desired include file into the editable region.
    Either approach is SO MUCH SIMPLER than using nested
    templates.
    > Can you do it all with CSS and be able to update
    correctly?
    I do quite a few sites where I am changing the physical
    layouts using CSS
    alone, yes.
    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
    ==================
    "yevri" <[email protected]> wrote in message
    news:[email protected]...
    > Here's what I did to resolve this. I gave up on the
    clickable background
    > image.
    > While I think you can do it, this site is a bit
    complicated with nested
    > templates and a lot of CSS and structures - some of
    which are new and some
    > are
    > inherited from a previous developer, so it's a bit messy
    right now. So I
    > just
    > redid the CSS in that content area of my nested template
    until I could put
    > divs
    > side by side and put an image in the foreground instead
    of the background.
    > Now
    > it's working fine. But that clickable background image
    may come in handy
    > later.
    >
    > One other thing though, Murray mentioned nested
    templates not being worth
    > the
    > hassle - causing more work and inefficiencies. I've
    heard others say that
    > they
    > are a bad idea too. What I wonder is, how would someone
    deal with a
    > situation
    > like this (that I find myself in on most sites) where
    you have a header
    > and
    > footer and content area in the middle and then a section
    in the site that
    > has
    > an interior design with a second level of nav (possibly
    down the left side
    > like
    > mine) and usually in the content area. How do you deal
    with that? I create
    > a
    > template for the header and footer and then a nested
    template for the
    > secondary
    > design/nav. I have 50 pages in that interior design
    section that have
    > their own
    > design built on the main template design (the site on
    this post might not
    > be a
    > good example because it's a Frankenstein's Monster from
    multiple
    > developers and
    > old and new ways of coding). What about an interior nav
    with collapsing
    > links,
    > etc. How do you get that onto every page without a
    template? Can you do it
    > all
    > with CSS and be able to update correctly? Just curious
    to what you use
    > instead
    > of nested templates?
    >
    > Thanks again for the help on this.
    >

  • How do you prevent the spry menu from using the main css background-image?

    (Dreamweaver CS5. Problem seems not to be browser specific)
    I added some code I found online to my main css file in order to allow a custom icon to be used as a  bullet in unordered lists, sitewide. It was added before the "body,td,th {" line.
    The problem is that the same icon now appears on the upper left hand corner of each main menu segment; not on any submenus or during any mouse states. Just the main at-rest bar.
    I know this is somehow related to spry itself being a list, but how do I keep it from showing the background image of the main css file?
    Thanks!
    This is the site http://www.usc.edu/org/seagrant/NS/
    The code which was added to the css file is shown below:
    ul{
        list-style:none;
        margin:0 0 1em 15px;
        padding: 0;
    ul li{
        line-height:1.3em;
        margin: .25em 0;
        padding: 0 0 0 15px;
        background:url(../Images/Compass_Website_small_2-4-11.png) no-repeat 0 4px;
    li ul{
        margin:0 0 0 30px;
        list-style:disc;
    li ul li{
        padding-left:0;
        background:none;
    li ul li ul{
        margin:0 0 0 30px;
        list-style:circle;
    ul li ul li ul{
        padding-left:0;
        background:none;
    /* Holly Hack to fix ie6 li bg */
    /*  Hides from IE-mac \*/
    * html li{height: 1%;}
    /* End hide from IE-mac */
    @media print{
    ul {
        list-style:disc;
        margin-left:30px;
    ul li {
        padding-left:0px;
        background:none;
    } /* end print */
    body,td,th { - etc...

    Add/modify the following to your document
    ul.MenuBarHorizontal li {
        background: rgba(0,0,0,0.0) url(none);
    Gramps

  • Dreamweaver css-background-image display in design area

    dreamweaver 8 does not display css-assigned
    background-images in the design-area... how can you teach him to do
    so? dreamweaver mx still did this without any fuss... in dw8 you
    search endlessly and in vain for a button to teach him the trick...
    or has dreamweaver under adobe forgotten, what it already could
    do??
    can somebody please tell me? thanks!
    [email protected]
    ps: the background-image you assign using an id
    (example:
    #maindiv{
    background-image:url(../pictures/capriccio-ornamentraender.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-color:#CC3333;
    is not shown (browsers do it however!), but if you assign the
    image using
    style="background-image:url(pictures/capriccio-ornamentraender.jpg"
    within the tag, it's shown... poor performance by dw8...

    dreamweaver 8 does not display css-assigned
    background-images in the design-area... how can you teach him to do
    so? dreamweaver mx still did this without any fuss... in dw8 you
    search endlessly and in vain for a button to teach him the trick...
    or has dreamweaver under adobe forgotten, what it already could
    do??
    can somebody please tell me? thanks!
    [email protected]
    ps: the background-image you assign using an id
    (example:
    #maindiv{
    background-image:url(../pictures/capriccio-ornamentraender.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-color:#CC3333;
    is not shown (browsers do it however!), but if you assign the
    image using
    style="background-image:url(pictures/capriccio-ornamentraender.jpg"
    within the tag, it's shown... poor performance by dw8...

  • Spry Menu Bar using CSS background image without losing submenu ( V) indicators

    Spry menu bar sets the down and side submenu indicators using
    a positioned background image. I have a requirement to use a
    specific background image yet must retain the > and v submenu
    indicators. Without having to generate full width custom background
    images for each of the menu item types to include the side and down
    menu indicators, is there anyway to use a generic background image
    and show the indicators using just CSS?

    Don't use reserved words in JS
    var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
    event is such a reserved word. If you change this to event1 then all is well.
    I hope this helps.
    Ben

Maybe you are looking for