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

Similar Messages

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 of a Design Studio 1.3 extension is not displayed when the control is dragged on the canvas

Hello,
I have a Design Studio Extension with a background image which behave well in Design Studio 1.2.
In Design Studio 1.3 when I drag the control into the canvas the image does not show-up. If I execute the application the image appear in the browser even is not in the canvas.Once I save and reopen the application the image is displayed on the canvas as expected.
I built an extension based on the 'Timer' sample which comes with the DS_13_SDK_Samples ( it has a background image) and it behaves the same way - when you drag the control on the canvas, the image is not displayed.
Any help to solve this issue is much appreciated.
Thank you.

It does start to work once I save and reopen or even when I run.
I tried the inline style but the behavior is much stranger. It does work if I have a full address url to an image, but if my image is part of the control's folder structure it fails completely - it cannot map the right address to the image. The only configuration that appears to work better is the one with the original problem.
Thank you.

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

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

<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 display problem in IE6

I'm having another problem with my CSS. This one involves some background images not displaying properly in IE6. My navbar is an unordered list, and I'm using an image replacement technique to swap out the text for background images that serve as the buttons. The height of each button is 12 pixels, and the rollover is created by offsetting the image -12 pixels to reveal the bottom half of the image. So far so good. The images appear in all browsers, but IE6 displays more than 12 pixels of the image, revealing part of the rollover below it.
Here's the page in question: http://www.colbydesign.com/redesign/index.html
Here's a screen shot from BrowserLab of how the page looks in IE6: http://www.colbydesign.com/redesign/images/ie6_screenshot.jpg
The <ul> height and image height are set to 12 pixels. I can't figure out why IE6 has a problem with the CSS. Maybe there's an IE6 hack I can use? Any help would be appreciated.
Thanks,
R-Co

I didn't have a chance to work through the whole problem, but I believe that the font size of your "off-screen" menu text is pushing down the size of your ul and your li, as I see "overflow" outlines on that specific div.
Try giving those items #header h1 a, specifically, a smaller defined font size.
Alternatively, try applying an "overflow: hidden;" to the hover definition.
Beth

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></h2>
</div>
<div align="left">
<p> </p>
</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.
>

CSS background images

Hello all.
Newbie here, asking if it is possible for a user to
change/replace background images through Contribute CS3 that are
called by CSS stylesheet? All images are setup this way and I don't
want to have to use tables just so they can be able to change
images. Any suggestion or assistance is greatly appreciated.

Yes, I recently ran into a similar problem!
2 workaround I like...
a) simply put the image file into your image directory and reference it using /i/image.jpg etc.
b) use this whitepaper by John:
http://jes.blogs.shellprompt.net/2007/05/18/apex-delivering-pages-in-3-seconds-or-less/
And make a file download script that you can use - works very well for me!

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
>

Printing CSS background image

Hi:
Working on a new site, using a Template Monster (no jokes
please) that my client wants me to use. I am not thrilled using
some else's setup, and it's no picnic to work with, but my graphic
skills are not nearly as good as my technical, and the client wants
something more artistic.
I have a background image in the CSS that does not print --
it's the client's photo, so it's important. So as an alternative, I
took it out of the background and did an AP Div and was able to
position it properly on screen, and it prints fine. However, in
Safari and Google Chrome, the whole page is blown apart. In IE and
FF, no problem.
Is there an easy fix? I am going to restore the page tonight
with the original bg image setup (which rendered in all my browsers
but didn't print) and post it for help, but it's not ready now.
Here's the link to the "printable" version.
Thanks in advance for your help.
Rgds, Ned

The browser has a setting under tools advanced printing to
check a box to
print background colors and images if you want to print them.
Dave
"Nedward" <[email protected]> wrote in
message
news:gqgvc9$aib$[email protected]..
> Hi:
>
> Working on a new site, using a Template Monster (no
jokes please) that my
> client wants me to use. I am not thrilled using some
else's setup, and
it's no
> picnic to work with, but my graphic skills are not
nearly as good as my
> technical, and the client wants something more artistic.
>
> I have a background image in the CSS that does not print
-- it's the
client's
> photo, so it's important. So as an alternative, I took
it out of the
> background and did an AP Div and was able to position it
properly on
screen,
> and it prints fine. However, in Safari and Google
Chrome, the whole page
is
> blown apart. In IE and FF, no problem.
>
> Is there an easy fix? I am going to restore the page
tonight with the
> original bg image setup (which rendered in all my
browsers but didn't
print)
> and post it for help, but it's not ready now.
>
> Here's the link to the "printable" version.
>
> Thanks in advance for your help.
>
> Rgds, Ned
>

Background Image Disappears in Design View

Hi, I am new to website design and just recently the background image stopped showing up in design view. When I switch to live view and check in the browser though the background shows up again. It used to work before but it just stopped working recently. I have been trying to find a solution but it has not been working out. If anyone has any ideas as to what could fix my problem, it would be greatly appreciated.
Here is my css
@charset "UTF-8";
#container {
          height: 1280px;
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: auto;
          margin-left: auto;
          position: relative;
          background-image: url(../Images/background%20copy.jpg);
          background-repeat: no-repeat;
h3 {
          margin-top: 420px;
          margin-bottom: 195px;
          text-align: center;
          position: absolute;
          margin-left: 437.5px;
          text-transform: capitalize;
          font-variant: small-caps;
          font-size: 24px;
          font-style: inherit;
          text-decoration: underline;
h2
          margin-top: 160px;
          margin-bottom: 195px;
          text-align: center;
          position: absolute;
          margin-left: 230px;
          text-transform: capitalize;
          font-variant: small-caps;
p1
          margin-top: 350px;
          position: absolute;
          margin-left: 40px;
          margin-right: 60px;
          font-size: 18px;
          text-align: center;
When i turn it on live view it is also formatted correctly and everything. But when it is on just design or split view the text and all of the pictures don't follow any of the css.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>LADC Companies</title>
<meta name="keywords" content="LADC Companies,commercial lawn service, services, snow removal, concrete romval, Home Depot, Kohl's">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#NavBar {
          height: 36px;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 102px;
          margin-bottom: 146px;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
          position: absolute;
          left: auto;
          top: auto;
          right: auto;
          bottom: auto;
#apDiv1 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 65px;
          top: 197px;
#apDiv2 {
          position: absolute;
          width: 207px;
          height: 143px;
          z-index: 1;
          left: 268px;
          top: 197px;
#apDiv3 {
          position: absolute;
          width: 201px;
          height: 142px;
          z-index: 1;
          left: 204px;
          top: 0px;
#apDiv4 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 684px;
          top: 205px;
#apDiv5 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 2;
          left: 410px;
          top: 13px;
#apDiv6 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 204px;
          top: 0px;
</style>
<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>
</head>
<body onLoad="MM_preloadImages('Images/navover_01.gif','Images/navover_02.gif','Images/navover_ 03.jpg','Images/navover_04.gif','Images/navover_05.jpg')">
<div id="container">
<div id="NavBar"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Images/navover_01.gif',1)"><img src="Images/background-copy_01.gif" width="192" height="36" id="Home"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About us','','Images/navover_02.gif',1)"><img src="Images/background-copy_02.gif" width="192" height="36" id="About us"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','Images/navover_03.jpg',1)"><img src="Images/background-copy_03.jpg" width="192" height="36" id="Services"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','Images/navover_04.gif',1)"><img src="Images/background-copy_04.gif" width="192" height="36" id="Gallery"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','Images/navover_05.jpg',1)"><img src="Images/background-copy_05.jpg" width="192" height="36" id="Contact Us"></a></div>
<h2>LADC Companies... "your #1 outsource resource"</h2>
<h3>Services</h3>
<p1>LADC Companies has strived to put the service back into "service" since it started in 1986. Since that time LADC has delivered, as promised, its commitment to first rate quality service with in-house personnel to meet its client strict demands and expectations.</p1>
<div id="apDiv1"><img src="new truck.JPG" width="204" height="143" /></div>
<div id="apDiv2"><img src="IMG_2425.jpg" width="204" height="143" alt="HOME depot" />
    <div id="apDiv3"><img src="Images/2011-07-26_12-59-24_137.jpg" width="204" height="143" />
      <div id="apDiv6"><img src="Images/DSCN0147.jpg" width="204" height="143" alt="concrete" /></div>
    </div>
</div>
</body>
</html>

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;

Background image displays locally in HTML5 template but not when published

I have used an excellent HTML5 template which uses JavaScript to display background images. However while this file works locally it doesn't when published. The site structure is sound and I notice this happens with the source files I downloaded also so it's nothing I have done in my build which could have caused this.
This is the link to my site, everything is fine except the background image not showing.
http://www.khawkinsdesign.com
Any ideas, as I say fine locally, not fine when published?
Message was edited by: Kyle Hawkins

Hi Kyle,
I realise you posted your question a couple of days ago but it looks like your background image issue may now be fixed?
In any case, your site has a few issues. Not sure who told you the template was HTML 5 but they might be yanking your chain. There is nothing HTML 5 about the code used and the DOCTYPE is from HTML 4. As such, some of the code you have used is throwing up errors - some related to the DOCTYPE and some where you haven't closed the tags:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.khawkinsdesign.com%2F&charset=%28detect +automatically%29&doctype=Inline&group=0
<ul id="footer-nav">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li> /*The closing tag is missing in your code */
<li><a href="contact.html">Contact</a></li> /*The closing tag is missing in your code */
</ul>
It would be best to amend the errors but some might disappear when you add the HTML 5 DOCTYPE in to your code. Things like your lack of "type" on the sources is a required v4 attribute, but not in v5.
<!DOCTYPE html>
Have a read through this for more info - this is a great resource for everything HTML 5. http://diveintohtml5.info/
Rik
EDIT:// It seems that the DOCTYPE is the 5 version on all but the home page so you may only have one to correct. However, there are still no HTML 5 elements used to take advantage of the new DOCTYPE.

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

Similar Messages

Maybe you are looking for