Spry UI 1.7 slideshow images cascade down page in design view

When I put in the Spry slideshow all the images go down the page in bullets. It works fine in the browsers, so it is no problem. But... it is SO annoying because I am trying to finish off the page and do some stuff under this slideshow but i can see there. So it has messed me all up because I am not good at just hand coding the website... I have to do a little of both... Others have kind of suggested to just live with it... but I just cant

The only reliable view in DW is the Live View. Design view is OK for very simple layouts and documents. As soon as it becomes more complicated, then you cannot rely on design view.
And even though Live View can give a better picture of what you are doing, you must always check your design in all of the target browsers.
Gramps

Similar Messages

DW8: image won't display in Design View

Folks:
DW8 on MacOS 10.4.8 (fully updated) on Intel iMac.
What would keep an image from displaying in DW Design View?
What are the causes of the grey box with the superimposed "X"? Is
there any diagnostic output that might help? Is the grey box and
"X" substituted by DW8 for an invalid or un-drawable graphic, or is
this done by the OS?
The problem:
I've got a 1912 x 1481 graphic, a geographic map, in AI that
I'm trying to use as an ordinary web image, but DW won't display it
in Design View. Instead all I see is a big grey box and "X". For
test purposes, I'm starting from a new "Basic" HTML web page and
all I'm doing is inserting this one image. I need to get this
working so I can draw hotspots on this graphic to make it
"clickable" .
Here's what I've tried:
o Triple-checking that the inserted image reference is
correct. Yes, the image file is correctly linked. With the image
selected, the inspector shows a tiny but recognizable miniature of
the expected image. Further, when the page and the image are
uploaded to the web server and I look at it via a browser, the
expected image is _always correctly displayed.
o Exporting the graphic "for the web" from AI as both a GIF
and a medium-quality JPG. Neither of these are displayed in Design
View; both are served up correctly after being uploaded
o I found a larger JPG on a different site I'm managing. This
always displays as expected in both DW Design View and when served
up. I substituted the failing map JPG image. The result: A grey
box.
o Checking the map images: The JPG and GIF versions seem to
be visible in all environments (image readers, browsers, etc.) I've
checked _except_ DW8 Design View.
o Checked on another system. I made the failing image
available to a very helpful ACE, who performed a similar
experiment. It worked fine for him. I used his exact HTML and
directory structure -- and it failed for me. Grey box with "X".
It seems to me that I've checked most of the obvious
possibilities. Now it is time to check the less obvious ones.
Suggestions are very welcome!
Thanks,
Henry

Randy:
Thanks for your response.
This is a virtual memory system, so -- in theory-- it should
accommodate anything that will fit on the hard drive, more or less,
if I'm wiling to wait the hours (days?) it will take to swap on and
off the disk. That assumes DW8 takes advantage of the capability.
It may not.
"Larger"? The JPG image I compared to is 1692 x 2160 pixels,
but weighs slightly less, 289K bytes. I'm losing track of all my
test images that fail, but a representative one is 1912 x 1481
pixels and weighs 332Kb on the disk. "Roughly comparable" might be
a better description. The point is still reasonable: DW8 does
handle images of this size on my system.
One issue that occurred to me recently is that I may have
caused some grief by monkeying with the "Save for web" settings at
the Illy export. Perhaps I asked for some configuration that's
normal for Illy to export --or it would have warned me, I hope--
but too strange for DW to grok. DW should complain more
informatively than painting a gray box and "X" when that happens, I
would think.
Henry

CSS header images not visible except in design view

I have a recurring problem in my css designs, and it's driving me to drink. In my stylesheets I define background and header images that work beautifully in design view, but when you view it any browser the header image is gone. This is not the first time I have struggled with this and I am over it. On the example I have posted there is an image underneath (not below, actually underneath) the company name and slogan at the top of the page, but you sure can't see it can you? As a matter of fact the second line of text completely disappears because the header image is not displayed. If someone can show me where I am going wrong with this I would appreciate it. The link to the site is here:
http://firstvirginiaservices.com/test/index.html

This is a path issue.
You're testing your new website in a subfolder called test. The server does not know that.
Your header rule points to the image with a site root reference i.e. starting from the root folder
#header {
margin:0;
font-family: Verdana, Geneva, sans-serif;
background-image: url(/images/header.jpg) ;
background-repeat:no-repeat;;
text-align: right;
That'll probably be OK when the site goes live but not while it lives in the "test" subfolder.
The server is looking for
http://firstvirginiaservices.com/images/header.jpg
but the images folder does not exist at the root folder level yet so the file is not found and the image does not display.
You really mean
http://firstvirginiaservices.com/test/images/header.jpg
The solution is to
EITHER
keep the root relative path and change the path temporarily in the CSS while you're working in the test folder
#header {
margin:0;
font-family: Verdana, Geneva, sans-serif;
background-image: url(/test/images/header.jpg) ;
background-repeat:no-repeat;;
text-align: right;
then tweak the path (remove "/test") when the site goes live.
OR
use a document relative path in the #header rule (from the CSS folder location to the images folder location)
#header {
margin:0;
font-family: Verdana, Geneva, sans-serif;
background-image: url(../images/header.jpg) ;
background-repeat:no-repeat;;
text-align: right;

Certain images not showing up in Design View

Hi,
I recently switched from Dreamweaver CS5.5 to CS6 with Creative Cloud but now some of my images aren't showing up in Design View. Everything is fine in Live View.
Any help would be gratefully received. I have attached the CSS & the HTML as well as two screen shots of Design View and Live View.
The CSS is:
/* Getting the new tags to behave */
article, aside, audio,
canvas, command,
datalist, details,
embed,
figcaption, figure, footer,
header, hgroup,
keygen,
meter,
nav,
output,
progress,
section, source,
video {
          display:block;
mark,
rp, rt, ruby,
summary,
time {
          display:inline;
/* Global properties ======================================================== */
body {
          background-color:#000;
          background-repeat:no-repeat;
          background-position:center top;
          background-image:url(../images/body-bg.jpg);
          background-attachment:fixed;
          font-family:Arial, Helvetica, sans-serif;
          font-size:100%;
          line-height:1em;
          color:#949595;
html {
          min-width:967px;
html,
body {
          height:100%;
/* Global Structure ============================================================= */
#main {
          margin:0 auto;
          width:967px;
          font-size:.75em;
          /* Header */
          header {
                    position:relative;
          /* Sidebar */
          aside {
                    width:227px;
                    float:left;
                    margin-right:32px;
                    padding-bottom:33px;
          /* Content */
          section#content {
                    float:left;
                    width:675px;
                    padding-top:6px;
          /* Footer */
          footer {
                    padding-left:3px;
                    background:url(../images/border-left.png) repeat-y left top;
                    color:#535353;
/* Left & Right alignment */
.fleft {
          float:left;
.fright {
          float:right;
.clear {
          clear:both;
.col-1,
.col-2,
.col-3 {
          float:left;
.alignright {
          text-align:right;
.aligncenter {
          text-align:center;
.wrapper {
          width:100%;
          overflow:hidden;
/*----- form defaults -----*/
input,
select,
textarea {
          font-family:Arial, Helvetica, sans-serif;
          font-size:1em;
          vertical-align:middle;
          font-weight:normal;
fieldset {
          border:0;
/*----- lists -----*/
.banners {
          width:100%;
          overflow:hidden;
          padding-bottom:15px;
          .banners li {
                    float:left;
                    padding-left:4px;
.list li {
          font-size:1.17em;
          padding:0 0 19px 22px;
          background:url(../images/marker.png) no-repeat left 2px;
.list li.last {
          padding-bottom:0;
.list1 li {
          width:100%;
          overflow:hidden;
          padding-bottom:27px;
          .list1 li img {
                    float:left;
                    margin-right:22px;
.column-list {
          width:100%;
          overflow:hidden;
          .column-list li {
          float:left;
          width:200px;
          margin-right:27px;
          .column-list li.last {
                    margin:0;
                    .column-list li img {
                              margin-bottom:18px;
.events-list {
          width:100%;
          overflow:hidden;
          .events-list li {
                    float:left;
                    line-height:1.5em;
                    width:320px;
                    margin-right:25px;
                    padding-bottom:20px;
          .events-list li.alt {
                    margin-right:0;
                    .events-list li img {
                              float:left;
                              margin-right:11px;
.testimonials li {
          line-height:1.5em;
          padding-bottom:18px;
          .testimonials li cite {
                    font-style:normal;
          .testimonials li h5 {
                    text-align:right;
                    margin:0;
                    padding-top:6px;
/*----- other -----*/
.img-indent {
          margin:0 0 20px 0;
.extra-wrap {
          overflow:hidden;
p {
          margin-bottom:16px;
          line-height:1.5em;
dl {
          line-height:1.5em;
          dl dt {
                    font-weight:bold;
                    color:#4b4b4b;
                    margin-bottom:6px;
          dl dd {
                    padding-bottom:20px;
          dl dd.last {
                    padding:0;
          .address dd {
                    clear:both;
                    .address dd span {
                              float:left;
                              width:96px;
                    .address dd a {
                              font-size:1.17em;
address {
          font-style:normal;
          line-height:1.5em;
          address a {
                    font-size:1.17em;
          address span {
                    float:left;
                    width:103px;
/*----- txt, links, lines, titles -----*/
a {
          color:#12b7f4;
          outline:none;
a:hover {
          text-decoration:none;
h1 {
          font-size:20px;
          line-height:1em;
          font-weight:normal;
          padding:55px 0 0 3px;
          h1 a {
                    color:#fff;
                    text-decoration:none;
          h1 strong {
                    font-size:55px;
                    line-height:1.2em;
                    letter-spacing:-2px;
                    top:-37px;
                    position:relative;
h2 {
          font-size:1.917em;
          line-height:1.2em;
          letter-spacing:-1px;
          font-weight:normal;
h5 {
          font-size:1em;
          line-height:1.5em;
          color:#4b4b4b;
          margin-bottom:6px;
          h5 a {
                    color:#4b4b4b;
.txt1 {
          font-size:1.17em;
.rss {
          position:absolute;
          right:18px;
          top:18px;
          background:url(../images/rss.gif) no-repeat right top;
          padding:10px 45px 8px 0;
          color:#7d7d7d;
          text-decoration:none;
          font-size:1.17em;
          text-transform:uppercase;
.rss:hover {
          text-decoration:underline;
.link1 {
          display:block;
          position:relative;
          float:left;
          background-repeat:no-repeat;
          background-position:right top;
          background-image:url(../images/link1-right.png);
          color:#fff;
          line-height:1.2em;
          text-transform:uppercase;
          text-decoration:none;
          cursor:pointer;
          .link1 span {
                    display:block;
                    float:left;
                    background-repeat:no-repeat;
                    background-position:left top;
                    background-image:url(../images/link1-left.png);
                    padding:0 10px;
          .link1 b {
                    background-repeat:repeat-x;
                    background-position:left top;
                    background-image:url(../images/link1-bgd.png);
                    padding:8px 7px 9px 7px;
                    display:block;
                    float:left;
          .link1:hover b {
                    text-decoration:underline;
.link2 {
          width:70px;
          height:30px;
          text-align:center;
          text-transform:uppercase;
          color:#fff;
          text-decoration:none;
          display:block;
          float:right;
          font-weight:bold;
          overflow:hidden;
          line-height:2.6em;
          background-repeat:no-repeat;
          background-position:left top;
          background:url(../images/link2-bg1.png);
.link2:hover {
          text-decoration:underline;
/*==================boxes====================*/
.nav-box {
          width:100%;
          position:relative;
          padding-bottom:11px;
          margin-top:-23px;
          .nav-box .left {
                    padding-left:20px;
                    background:url(../images/nav-box-left.png) no-repeat left top;
          .nav-box .right {
                    padding-right:20px;
                    background:url(../images/nav-box-right.png) no-repeat right top;
          .nav-box nav {
                    height:72px;
                    background:url(../images/nav-box-tail.png) repeat-x left top;
          .nav-box nav ul {
                    padding-top:13px;
                    width:100%;
                    overflow:hidden;
                    .nav-box nav ul li {
                              float:left;
                              font-size:1.583em;
                              line-height:1.2em;
                              letter-spacing:-1px;
                              .nav-box nav ul li a {
                                        color:#535353;
                                        display:block;
                                        float:left;
                                        cursor:pointer;
                                        background:url(../images/spacer.gif);
                                        text-decoration:none;
                                        text-shadow:#fff 1px 1px;
                              .nav-box nav ul li a:hover,
                              .nav-box nav ul li a.active {
                                        color:#fff;
                                        background:url(../images/nav-act-tail.gif) repeat-x left top;
                                        text-shadow:#fff 0 0;
                                        .nav-box nav ul li a span {
                                                  display:block;
                                                  float:left;
                                                  background:url(../images/spacer.gif);
                                        .nav-box nav ul li a:hover span,
                                        .nav-box nav ul li a.active span {
                                                  background:url(../images/nav-act-left.gif) no-repeat left top;
                                        .nav-box nav ul li a b {
                                                  display:block;
                                                  float:left;
                                                  background:url(../images/spacer.gif);
                                                  padding:10px 23px 14px 23px;
                                        .nav-box nav ul li a:hover b,
                                        .nav-box nav ul li a.active b {
                                                  background:url(../images/nav-act-right.gif) no-repeat right top;
.box {
          width:237px;
          color:#fff;
          .box .top {
                    background-repeat:no-repeat;
                    background-position:left top;
                    background-image:url(../images/box-top.png);
                    height:14px;
                    overflow:hidden;
                    font-size:0;
                    line-height:0;
          .box .bot {
                    background-repeat:no-repeat;
                    background-position:left top;
                    background-image:url(../images/box-bot.png);
                    height:15px;
                    overflow:hidden;
                    font-size:0;
                    line-height:0;
          .box .xcontent {
                    background-repeat:repeat-y;
                    background-position:left top;
                    background-image:url(../images/box-tail.gif);
                    .box .xcontent .bg {
                              min-height:137px;
                              height:auto!important;
                              height:137px;
                              background-repeat:no-repeat;
                              background-position:left top;
                              background-image:url(../images/box-bg.jpg);
          .box .inner {
                    padding:2px 35px 0 26px;
          .box h2 {
                    font-size:2.417em;
                    font-weight:bold;
                    margin-bottom:4px;
                    text-shadow:#0b97e4 1px 1px;
          .box p {
                    line-height:1.583em;
                    margin-bottom:9px;
/* box style1 */
.box.style1 .top {background-image:url(../images/box-top1.png);}
.box.style1 .bot {background-image:url(../images/box-bot1.png);}
.box.style1 .xcontent {background-image:url(../images/box-tail1.gif);}
.box.style1 .xcontent .bg {background-image:url(../images/box-bg1.jpg);}
.box.style1 .link1 {background-image:url(../images/link1-right1.png);}
.box.style1 .link1 span {background-image:url(../images/link1-left1.png);}
.box.style1 .link1 b {background-image:url(../images/link1-bgd1.png);}
.box.style1 h2 { text-shadow:#78b10b 1px 1px;}
/* box style2 */
.box.style2 .top {background-image:url(../images/box-top2.png);}
.box.style2 .bot {background-image:url(../images/box-bot2.png);}
.box.style2 .xcontent {background-image:url(../images/box-tail2.gif);}
.box.style2 .xcontent .bg {background-image:url(../images/box-bg2.jpg);}
.box.style2 .link1 {background-image:url(../images/link1-right2.png);}
.box.style2 .link1 span {background-image:url(../images/link1-left2.png);}
.box.style2 .link1 b {background-image:url(../images/link1-bgd2.png);}
.box.style2 h2 { text-shadow:#ff6900 1px 1px;}
/* box style3 */
.box.style3 .top {background-image:url(../images/box-top3.png);}
.box.style3 .bot {background-image:url(../images/box-bot3.png);}
.box.style3 .xcontent {background-image:url(../images/box-tail3.gif);}
.box.style3 .xcontent .bg {background-image:url(../images/box-bg3.jpg);}
.box.style3 .link1 {background-image:url(../images/link1-right3.png);}
.box.style3 .link1 span {background-image:url(../images/link1-left3.png);}
.box.style3 .link1 b {background-image:url(../images/link1-bgd3.png);}
.box.style3 h2 { text-shadow:#ffad07 1px 1px;}
.box1 {
          width:227px;
          .box1 .top {
                    height:49px;
                    overflow:hidden;
                    background:url(../images/box1-top.png) no-repeat left top;
          .box1 .bot {
                    height:17px;
                    font-size:0;
                    line-height:0;
                    overflow:hidden;
                    background:url(../images/box1-bot.gif) no-repeat left top;
          .main-box .box1 .border-left {
                    padding-left:1px;
                    background:url(../images/box1-border.gif) repeat-y left top;
          .main-box .box1 .border-right {
                    padding-right:1px;
                    background:url(../images/box1-border.gif) repeat-y right top;
          .main-box .box1 .xcontent {
                    width:100%;
                    min-height:261px;
                    height:auto!important;
                    height:261px;
                    padding:0;
                    background:url(../images/box1-tail.gif) repeat-x left top #f8f8f8;
          .main-box .box1 .inner {
                    padding:12px 14px 20px 18px;
          .box1 h2 {
                    font-weight:bold;
                    color:#fff;
                    padding:10px 0 0 18px;
.box2 {
          width:227px;
          .box2 .top {
                    height:15px;
                    overflow:hidden;
                    background:url(../images/box2-top.png) no-repeat left top;
          .box2 .bot {
                    height:16px;
                    font-size:0;
                    line-height:0;
                    overflow:hidden;
                    background:url(../images/box2-bot.gif) no-repeat left top;
          .main-box .box2 .border-left {
                    padding-left:1px;
                    background:url(../images/box2-border.gif) repeat-y left top;
          .main-box .box2 .border-right {
                    padding-right:1px;
                    background:url(../images/box2-border.gif) repeat-y right top;
          .main-box .box2 .xcontent {
                    width:100%;
                    min-height:113px;
                    height:auto!important;
                    height:113px;
                    padding:0;
                    background:url(../images/box2-tail.gif) repeat-x left top #f6f6f6;
          .main-box .box2 .inner {
                    padding:0 14px 20px 18px;
          .box2 h2 {
                    font-weight:bold;
                    color:#3c3c3c;
                    margin-bottom:16px;
.main-box {
          width:100%;
          .main-box .left-top-corner {
                    background:url(../images/left-top-corner.png) no-repeat left top;
                    height:18px;
                    padding-left:18px;
          .main-box .right-top-corner {
                    background:url(../images/right-top-corner.png) no-repeat right top;
                    height:18px;
                    padding-right:18px;
          .main-box .border-top {
                    background:url(../images/border-top.png) left top repeat-x;
                    height:18px;
                    font-size:0;
                    line-height:0;
                    width:100%;
          .main-box .border-left {
                    background:url(../images/border-left.png) left top repeat-y;
                    padding-left:3px;
          .main-box .border-right {
                    background:url(../images/border-right.png) right top repeat-y;
                    padding-right:3px;
          .main-box .xcontent {
                    background:#fff;
                    padding:0 2px;
          .main-box .tail {
                    background:url(../images/main-box-tail.gif) repeat-x left top;
                    width:100%;
          .main-box .inner {
                    padding:3px 15px 0 8px;
          .main-box .inner1 {
                    padding:3px 8px 0 25px;
                    .main-box .inner1 aside {
                              margin:0;
                    .main-box .inner1 #content {
                              margin-right:32px;
                              width:665px;
          .main-box .inner2 {
                    padding:3px 25px 35px 25px;
                    .main-box .inner2 #content {
                              width:auto;
                              float:none;
/*===== content =====*/
#content h2 {
          color:#3e3e3e;
          letter-spacing:0;
          margin-bottom:16px;
#content .indent {
          padding-bottom:60px;
#content .link2 {
          background-image:url(../images/link2-bg2.png);
          float:left;
/*===== Sidebar =====*/
aside .indent {
          margin-bottom:20px;
/*===== footer =====*/
footer .right {
          padding-right:3px;
          background:url(../images/border-right.png) repeat-y right top;
footer .tail {
          padding:17px 0 11px 27px;
          background-color:#2d2d2d;
footer .line-ver {
          background:url(../images/divider.gif) repeat-y 210px 0;
          width:100%;
          overflow:hidden;
footer .fleft a {
          color:#535353;
          text-decoration:none;
footer .fleft a:hover {
          text-decoration:underline;
footer .fleft {
          padding-bottom:8px;
          footer .fleft ul {
                    padding:8px 0 3px 0;
                    footer .fleft ul li {
                              display:inline;
footer .fright {
          padding:0 29px 0 0;
          text-align:right;
          footer .fright a {
                    color:#12b7f4;
          footer .fright ul {
                    padding:8px 0 5px 0;
                    footer .fright ul li {
                              display:inline;
                              padding-right:15px;
                              margin-right:12px;
                              background:url(../images/divider1.gif) no-repeat right 3px;
                              footer .fright ul li a {
                                        text-decoration:none;
                                        color:#535353;
                              footer .fright ul li a:hover,
                              footer .fright ul li a.active {
                                        color:#c4c4c4;
                                        text-decoration:underline;
                    footer .fright ul li.last {
                              background:none;
                              padding:0;
                              margin:0;
/*----- forms -----*/
#subscribe-form .rowElem {
          width:100%;
          overflow:hidden;
#subscribe-form span {
          display:block;
          width:193px;
          height:26px;
          margin-bottom:6px;
          background:url(../images/input-bg.png) no-repeat left top;
#subscribe-form input {
          background:none;
          border:0;
          line-height:1.2em;
          vertical-align:top;
          margin:5px 0 0 10px;
          color:#8c8d8d;
          width:173px;
#subscribe-form a.fleft {
          color:#4b4b4b;
          font-weight:bold;
          position:relative;
          left:10px;
          top:7px;
/* The Nivo Slider styles */
#slider_box{ width:946px; height:370px; margin-top:-3px; margin-bottom:15px;background:url(../images/bg_img.png) 0 0 no-repeat; padding:21px 0 0 21px}
#slider{ position:relative; width:925px; height:348px; z-index:88;overflow:hidden;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;          margin:0;z-index:60;display:none;}
/* The slices in the Slider */
.nivo-slice {display:block;          position:absolute;z-index:50;height:100%;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {          position:absolute; bottom:-34px;          z-index:99;          cursor:pointer;text-indent:-5000px; width:30px; height:30px; display:block;}
.nivo-prevNav { right:135px; background:url(../images/marker_left.gif) no-repeat}
.nivo-prevNav:hover{ background:url(../images/marker_left_active.gif) no-repeat}
.nivo-nextNav {right:10px; background:url(../images/marker_right.gif) no-repeat}
.nivo-nextNav:hover{ background:url(../images/marker_right_active.gif) no-repeat}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav{ position: absolute;z-index:99; right:14px; bottom:21px;}
.nivo-controlNav a {position:relative;z-index:99;cursor:pointer; text-indent:-5000px; width:16px; height:16px; float:left; margin-right:6px; background:url(../images/buttons.png) right 0 no-repeat}
.nivo-controlNav a.active { background-position:left}
/* Caption styles */
.nivo-caption { padding-top:77px; height:270px; width:345px;position:absolute; top:0px; right:20px; color:#fff; z-index:99;}
.nivo-caption .box{ display:inline-block;background:url(../images/box.png) no-repeat; font:24px Arial, Helvetica, sans-serif; color:#fff; line-height:30px; text-align:center; font-weight:bold; width:83px; margin-right:10px;}
.nivo-caption .text1{ font:36px Arial, Helvetica, sans-serif; color:#39c0f8; font-weight:bold; display:inline-block; line-height:1.2em; margin-top:-7px;}
.nivo-caption .text2{ font:48px Arial, Helvetica, sans-serif; color:#fff; font-weight:bold; display:block; line-height:1.2em; margin-top:-10px; letter-spacing:-2px;}
.nivo-caption p{ font-size:12px; color:#fff; line-height:14px; font-weight:bold; padding-top:8px;}
.nivo-caption a{ display:inline-block; position:absolute; left:0; bottom:60px; background:url(../images/button-bg.png) 0 0 no-repeat; font:40px Arial, Helvetica, sans-serif; line-height:60px; padding-bottom:3px; text-align:center; width:194px; color:#fff; text-decoration:none; letter-spacing:-2px;}
.nivo-caption a:hover{ background-position:bottom}
.color1 p{ color:#454545}
.nivo-caption .color1 .text1{ font-size:30px; display:block; color:#454545; margin-top:0}
.nivo-caption .color1 .text2{ color:#3b3b3b; display:inline-block; letter-spacing:-3px}
.nivo-caption .color1 .box{ margin-right:0px; margin-top:7px; margin-left:7px}
#contacts-form .rowElem {
          height:40px;
          #contacts-form .rowElem span {
                    display:block;
                    width:300px;
                    height:26px;
                    margin-bottom:6px;
                    background:url(../images/input-bg_2.png) no-repeat left top;
#contacts-form input {
          background:none;
          border:0;
          line-height:1.2em;
          vertical-align:top;
          margin:5px 0 0 10px;
          color:#8c8d8d;
          width:300px;
#contacts-form .rowElem1 span {
          display:block;
          width:300px;
          height:175px;
          margin-bottom:21px;
          background:url(../images/textarea-bg.gif) no-repeat left top;
#contacts-form textarea {
          width:300px;
          height:168px;
          overflow:auto;
          background:none;
          border:0;
          color:#8c8d8d;
          padding:5px 0 2px 10px;
#contacts-form .link2 {
          margin-left:15px;
/*==========================================*/
The HTML is:
<!DOCTYPE html>
<html lang="en">
<head>

<title>TravelSober.com Eastern Caribbean Sober Cruise</title>
<meta name="keywords" content="Sober cruise, sober cruises, sober cruise vacations, sober holidays, sober travel, sober vacation, sober vacations, aa convention, sober safari, sober travel.">
<meta name="description" content="Find out more about our Eastern Caribbean Sober Cruise or any of our other sober vacations.">

<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">


<style type="text/css">
body,td,th {
          font-size: 92%;
</style>


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21210386-3']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="images/favicon.ico" rel="SHORTCUT ICON">
</head>
<body id="page7">
<div id="main">
   
   <header>
     <h1><a href="index.html"><strong>TravelSober.com</strong></a></h1>
      <div class="nav-box">
         <div class="left">
            <div class="right">
               <nav>
                  <ul>
                     <li><a href="index.html"><span><b>Home</b></span></a></li>
                     <li><a href="about-us.html"><span><b>About Us</b></span></a></li>
                     <li><a href="planned-trips.html"><span><b>Planned Trips</b></span></a></li>
                     <li><a href="instant-specials.html"><span><b>Bob's Super Specials</b></span></a></li>
                     <li><a href="testimonials.html"><span><b>Testimonials</b></span></a></li>
                     <li><a href="contact-us.html"><span><b>Contact Us</b></span></a></li>
                  </ul>
               </nav>
            </div>
            <a href="#" class="rss">RSS</a> </div>
      </div>
      <ul class="banners">
         <li>
            <div class="box">
               <div class="top"></div>
               <div class="xcontent">
                  <div class="bg">
                     <div class="inner">
                        <h2>Sober Cruises</h2>
                        <p>Our cruises go to the best destinations on earth on a budget or in 6 Star luxury.</p>
                        <div class="wrapper"><a href="planned-cruises.html" class="link1"><span><b>more</b></span></a></div>
                     </div>
                  </div>
               </div>
               <div class="bot"></div>
            </div>
         </li>
         <li>
            <div class="box style1">
               <div class="top"></div>
               <div class="xcontent">
                  <div class="bg">
                     <div class="inner">
                        <h2>Friends of Lois Trips</h2>
                        <p>Al-Anon conferences and vacations</p>
                        <div class="wrapper"><a href="friends-of-lois-trips.html" class="link1"><span><b>more</b></span></a></div>
                     </div>
                  </div>
               </div>
               <div class="bot"></div>
            </div>
         </li>
         <li>
            <div class="box style2">
               <div class="top"></div>
               <div class="xcontent">
                  <div class="bg">
                     <div class="inner">
                        <h2>Conventions</h2>
                        <p>We take advantage of the many worldwide AA conventions combining them with tours.</p>
                        <div class="wrapper"><a href="sober-cruise-greece-2013.html" class="link1"><span><b>more</b></span></a></div>
                     </div>
                  </div>
               </div>
               <div class="bot"></div>
            </div>
         </li>
         <li>
            <div class="box style3">
               <div class="top"></div>
               <div class="xcontent">
                  <div class="bg">
                     <div class="inner">
                        <h2>Recovery</h2>
                        <p>Check out our sober resources page for all fellowships and the chance to meet new friends.</p>
                        <div class="wrapper"><a href="recovery-resources.html" class="link1"><span><b>more</b></span></a></div>
                     </div>
                  </div>
               </div>
               <div class="bot"></div>
            </div>
         </li>
      </ul>
   </header>
   <div class="main-box">
      <div class="left-top-corner">
         <div class="right-top-corner">
            <div class="border-top"></div>
         </div>
      </div>
      <div class="border-left">
         <div class="border-right">
            <div class="xcontent">
               <div class="tail">
                 <div class="inner2">
                     
                     <section id="content">
                        <h2><b>Costa Caribbean Cruise on the Mediterranea
- November 30 – December 10, 2012</b><br><br>
                        <b>From $699 Per Person / Double-Occupancy. 10 days for the price of 7!</b></h2>
                        <p> <img src="images/costa-mediterranea-sober-cruise- caribbean-2012.jpg" alt="sober_cruise_caribbean" width="320" height="204" align="right"></p>
                        <h5>Enjoy the Bahamas, Jamaica, Grand Cayman Islands, Roatan, Belize and Cozumel with a round-trip from Miami. You will experience great Italian cuisine, fabulous entertainment and famous <i>In This Life</i> Custom Excursions. We will feature the best of snorkeling, scuba, golf, dolphin encounter and much more!<p></p>Get on board for one of our latest once in a lifetime opportunities. Costa Cruises has reached out to showcase their ships and famous Italian ambience. We have traveled extensively with Costa on one of their best vessels, the Mediterranea. <p></p>This is one of the most popular vessels in the Costa fleet and has been enjoyed by hundreds of <i>In This Life</i> clients. Costa has extended special rates because of the unfortunate accident in Europe. They are giving <i>In This Life</i> guests 10 days for the price of 7 with free upgrades on their November 30 combination Eastern-Western Caribbean cruise.<p></p>Join us for various meetings onboard everyday!</h5>
                        <h5>10-day itinerary includes: <dir>
                       <p>Day 1: Depart 9.00pm: Miami, Florida,<br>
                       Day 2: 9.00am - 6.00pm: Nassau, Bahamas,<br>
                       Day 3: At Sea,<br>
                       Day 4: 12.00pm - 7.00pm: Ochos Rios, Jamaica,<br>
                       Day 5: 9.00am - 6.00pm: Grand Cayman,<br>
                       Day 6: At Sea,<br>
                       Day 7: 8.00am - 6.00pm: Roatan, Honduras,<br>
                       Day 8: 8.00am - 5.00pm: Belize,<br>
                       Day 9: 8.00am - 7.00pm: Cozumel, Mexico,<br>
                       Day 10: At Sea,<br>
                       Day 11: Miami, Florida: Arrive 8.00am.</p>
                       </dir><h2>ITL special - Save up to $200 per person! These are exclusive prices ONLY AVAILABLE from <i>Travel Sober</i>. </h2>
                       <img src="images/Cribbean-sober-cruise-2012.jpg" alt="sober_cruise_caribbean" width="394" height="264" align="right">
                   <h5><p></p>Inside Cabin: $699<br>Ocean View Cabin: $699<br>Deluxe Ocean View Cabin: $899<br>Veranda Cabin: $899</p>
                       <p></p>
                       <p>Book an Inside Cabin for $699 and be upgraded for free to Ocean View.
<p></p>Book Deluxe Ocean View for $899 and be upgraded for free to Veranda.
Other free upgrades within categories – placement on first come, first served basis.
<p></p>This is a Sober Cruise. Get a group together and get extra PERKS!
</p>
                       <p><h2>Deposit now for best cabin placement, specials and free upgrades!</h2><br><br>
                       <img src="images/in-this-life-logo.jpg" alt="sober_cruise_caribbean" width="300" height="214" align="middle">
<h5><h2>
Call or Email Us Today</h2></a>
<p></p><h2>Office: (805) 927-6910</h2>
<h2>Toll Free: (800) 531-7578</h2>
<p></p><br>
<h2>Email:<a href="mailto:[email protected]" class="txt1"> [email protected]</h2></a><br>
<h2>Email:<a href="mailto:[email protected]" class="txt1"> [email protected]</h2></a>
</p></h5>
                   </section>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   
   <footer>
      <div class="right">
         <div class="tail">


The MORE buttons aren't images. They are in the HTML and appear to be styled with CSS to look like button images.
     <span><b>more</b></span>
Unfortunately, Design View is incapable of displaying CSS border-radius, gradients, shadows and other CSS level 3 properties.   That's why we have Live View which behaves more like a real browser.
If you can't live with this, disable CSS in DW by going to View > Style Rendering > untick display styles.
Or, use a Design-Time Style Sheet that contains no CSS level 3 properties.
Nancy O.

External/Remote Images no longer appear in Design View!

Hi,
First post here.
Suddenly external/remote images in Dreamweaver CS3 no longer appear when viewed in Design View.
All I get now is grey boxes!
I have tried toggling 'Display External Files' on and off, made sure Cache is off (tried it with on too) and nothing seems to make a difference.
If anyone could help please, it's so annoying
Thanks,
James

Windows XP.
I'm an experienced web designer, 10+ years so you will have to trust me my code is fine.
It just shows the grey boxes in place of where the images should be.

Images not showing up in design view

Using Visual Studio 2013 to build a windows app using c#. Every image I add shows up when I debug what I have but unfortunately,I cant see them in Design view to make sure that they are in the right position.

There's a whole subject devoted to this - design-time data. See
this link for more information, then you can search on it.
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined
objects and unknown namespaces.

Image not showing up in design view

I am attempting to update a graphic (new date) in my images file. I updated the file in Illustrator, saved as a jpeg, stored in Images file (like I have always done). I have tried every which way to link file but graphic just shows as broken. The graphic shows up fine in LIve and Preview. I am clueless to what is wrong. Can you help?
Thanks,
Tracy

OK, if you took the file through Illustrator, it's possible that you may have changed it to CMYK. JPEG files are only supposed to be RGB, but both Photoshop and Illustrator allow you to save them in the "wrong" format in order to use JPEG compression for those files. Then you're supposed to just know what you did.
A Note: CMYK is very useful for pre-press where your output will be a printed document. Web browsers typically do not know what to do with CMYK files.
Whe I recommend is that, if you are saving a file for a website, you should use the File>Save for Web and Other Devices… dialog when you are setting up images for the web. All files saved this way are RGB files and will be adjusted for 72 DPI (computer screen resolution) and you will be able to use them in a website.
Of course you also want to make sure that the file is within your defined site on your local computer within Dreamweaver and not in some other location or down some other path.
-Mark

Div shifting down page in live view

I'm trying to create a website for a project I'm doing.I'm having a problem in live view where I the div with the id "imageholder" keeps shifting down the page. It looks fine in the editor but the browser and live view not so much. I want it to line up with the top div, not the bottom one.
Another problem I'm having is that I can't adjust the footers margin very well. it's not taking into account the div's directly above it. I've included a screenshot of the page as it hasn't been uploaded online yet. Thanks
Here is the code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="CSS/Project.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #E0EEEE;
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="title">Limerick Running Club</h1>
<h2 class="subhead"><strong>L.R.C</strong></h2>
</header>
<br/>
<nav>
<nav id="nav_centre">
<ul>
<li><a href="#">Home</a></li>
<li></li>
<li><a href="#">History</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul><br/>
</nav>
</nav>
<section>
<h2 >History</h2>
<article></article>
<article class="mainpara">
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
<article id="testimonial"><h3>Member Testimonials</h3><h3 class="Name">John Byrne</h3>
<p>Since joining the LRC my health and fitness has improved greatly. I recommended the club to everyone.</p>
<h3 class="Name">Mary Smith</h3>
<p>I'm delighted I joined the LRC. I feel much fitter and healthier since joining and there is a great sense of community surrounding the club.</p>
<h3 class="Name">Tom Ryan</h3>
<p>Really enjoying my runs with the lRC. I'd recommend joining to anyone.</p>
</article>
</section>
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<footer><span id="copyright">©2015 Limerick Running Club</span></footer>
</div>
</body>
</html>
CSS:
@charset "utf-8";
html{
background-color:#E0EEEE;
header{
width:100%;
nav {
width 100%;
height 55px;
#nav_centre {
text-align: center;
width: 1080px;
margin-right: auto;
margin-left: auto;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-bottom: 15px;
padding-top: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: small;
background-color:#4683ea;
nav ul{
list-style:none;
nav a{
display:inline;
float:left;
text-decoration:none;
font-weight:bold;
padding-top: 5px;
padding-bottom:5px;
padding-right: 45px;
padding-left: 45px;
height: 20px;
color:#CCC;
header {
text-align: center;
#container {
width: 1080px;
margin-left: auto;
margin-right: auto;
footer {
margin-top: 600px;
text-align: center;
height: 50px;
clear: both;
padding-top: 25px;
#copyright{
color:#a6a6a6;
article {
margin-top: 20px;
width: 650px;
margin-left: 5px;
margin-right: 0px;
#imageholder {
width: 360px;
float: right;
clear: none;
margin-top: 20px;
margin-right: 5px;
padding-right: 5px;
.mainpara {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
width: 600px;
section {
margin-top: 75px;
left: 5px;
h1{
color:#4683ea;
#title{
font-weight: bold;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color:#FFA500;
.subhead{
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
h2{
letter-spacing: 2px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#testimonial {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
padding-right: 5px;
width: 600px;
clear: both;
.Name {
color:#FFA500;

Try this -
<article class="mainpara">
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
Move the imageholder div so that it is the first child of the "mainpara" article.
Also, you probably want "...what they're saying below" in that last paragraph above. Finally, why do you have a nested <nav> tag in your code?

Images No Longer Showing in Design View but Work Online

Here is the live site that works - http://www.drinkupsandiego.com
Everything works in the live site and it has been up and running for a couple of years. I went to modify the site today in DW CC and none of the images showed up. I noticed that the site was not defined so I did this by adding a new site and defining the root folder. Still no images. So I look at the assets on the right side of DW and it shows that the image folder is now called "images.jpg" instead of the correct "images" name. If I go into my documents the folder "images.jpg" does not exist. I then clicked on one of the broken images and selected the correct folder. The image showed up but when I look at the code it is now "<img src="images.jpg/.....>". Again, that folder does not exist in my documents. I went back to the site definition and clicked on advanced and identified the folder for images as "images" but when I click on it it comes back as "images.jpg" I am baffled - I know this has to be some sort of silly fix so thank you in advance for anyone who can help.
Gary

Odd, I just moved all the files in the assets section from "images.jpg" to "images" and it all works. But I am still baffled why DW created a separate folder.

Rollover images not properly aligning in design view

Hello,
I am a self taught Web design teacher and I have seemed to run into an issue with roll-over images as links. I am teaching my students to use photoshop to create two images for rollover buttons. When the students insert the images, everything works fine except for the alignment on page. One link/button makes a new line on the page and forces everything to the right on screen. But when we preview it in a browser, it looks correct. I also don't know any JAVA coding other than what I should be looking at when we create the rollover links. Do you have any suggestions for me?
      (also if you find anything that is obsolete in my code, please let me know. Again, I am self taught with NO formal education in it)
dreamweaver
browser
if you need the coding of the page, here (edited to save reading time):
#wrapper {
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          background-color: #5B1E1E;
          height: 780px;
          margin-top: 10px;
#wrapper2 {
          background-color: #CCCCCC;
          height: 835px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
#wrapper #topnav #topnav1 {
          height: 40px;
          width: 940px;
          background-color: #5B1E1E;
          margin-right: auto;
          margin-left: auto;
          margin-top: 5px;
#wrapper #topnav #topnav1 #home {
          height: 40px;
          width: 152.5px;
          float: left;
#wrapper #topnav #topnav1 #home2 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home3 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home4 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home5 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home6 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
-->
</style>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('tools_images/home_over.jpg','tools_images/bhs_over.jpg','tools_ images/mset_over.jpg','tools_images/TR_over.jpg','tools_images/video_over.jpg','tools_imag es/web_over.jpg')">
<div id="wrapper2"><span class="style1">.
</span>
<div id="wrapper">
<div id="banner">
    <div id="banner1"><img src="tools_images/banner.jpg" alt="banner" width="940" height="70" /></div>
</div>
<div id="topnav">
    <div id="topnav1">
      <div id="home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','tools_images/home_over.jpg',1)"><img src="tools_images/home.jpg" alt="home" name="home" width="152" height="40" border="0" id="home7" /></a></div>
      <div id="home2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','tools_images/bhs_over.jpg',1)"><img src="tools_images/bhs.jpg" alt="bhs" name="Image3" width="152.5" height="40" border="0" id="Image3" /></a></div>
      <div id="home3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','tools_images/mset_over.jpg',1)"><img src="tools_images/mset.jpg" alt="mset" name="Image4" width="152" height="40" border="0" id="Image4" /></a></div>
      <div id="home4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','tools_images/TR_over.jpg',1)"><img src="tools_images/TR.jpg" alt="TR" name="Image5" width="152.5" height="40" border="0" id="Image5" /></a></div>
      <div id="home5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','tools_images/video_over.jpg',1)"><img src="tools_images/video.jpg" alt="video" name="Image6" width="152.5" height="40" border="0" id="Image6" /></a></div>
      <div id="home6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','tools_images/web_over.jpg',1)"><img src="tools_images/web.jpg" alt="web" name="Image7" width="152.5" height="40" border="0" id="Image7" /></a></div>
      <div id="blank"></div>
    </div>
</div>
</div>

Thanks Ken!
I know that, and me personally don't care. But its hard to get my students to grasp the concept of what you see is not always what you get.
Thank you for your response

Slideshow images not showing on website

I published my website to a folder, then uploaded it to hosting site using Fetch.
All pages and images show correctly, except for slideshow images on one page of my site.
I am using Linux OS.
Any suggestions as to what might be causing this?
Did I build the website correctly?
Thanks for your help!
luckydogdesign

kvetski wrote:
> I am having problems uploading images to one page of my
website -
>
http://www.fiebigershoes.com/press.html
> All images are in the same image folder and when i
preview this page it works
> perfectly fine however when i upload it to my website
the bottom 3 images do
> not show up.
> i believe i have a problem with the images as when i
replace these with an
> image on the top row it works fine on my website. Any
advice?
>
1. Firstly make sure that you have actually uploaded the
images to the
server. At the moment I'm getting an error page when I try to
get to
them directly via the browser. This could mean they aren't at
the
location where the browser is expecting them to be.
2. If that isn't the problem make sure they are saved in RGB
color mode
and not CMYK

How to place SVG image in web page?

Attempting to use an SVG image for first time, saved out of
Illustrator CS3. When I try to place it on a web page in
Dreamweaver CS3, .svg file is greyed out. Dragging it onto page in
design view just makes a text link to the image, that has to be
clicked to display the SVG. What I really want to do is use SVG
file as a background image (800 x 600 px) that scales to fill
browser window - is that possible?
System: Mac OS X 10.4.11

There is no reliable way to size an 800 x 600 background
image up or down
according to viewport size. You could center the page. Thus
your BG image
would move to center with page color appearing on either side
on wider
displays.
800 x 600 background image is quite large by web standards.
Most web
designers prefer to use small images or slices and then tile
or repeat them
horizontally and/or vertically.
Examples here:
http://alt-web.com/Backgrounds.shtml
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"driprint" <[email protected]> wrote in
message
news:fsk89k$e83$[email protected]..
> Attempting to use an SVG image for first time, saved out
of Illustrator
CS3.
> When I try to place it on a web page in Dreamweaver CS3,
.svg file is
greyed
> out. Dragging it onto page in design view just makes a
text link to the
image,
> that has to be clicked to display the SVG. What I really
want to do is use
SVG
> file as a background image (800 x 600 px) that scales to
fill browser
window -
> is that possible?
> System: Mac OS X 10.4.11
>
>
>

Viewing Images in Design view

Well I've been working on my site prior to getting
dreamweaver, and I open the .html of one of my pages, but it
doesn't show anything but the images in a grey box and text in
tables. When I preview in a browser it looks perfect though, is
design view supposed to be like this? Also whether it makes a
difference or not, the .html is already uploaded on my site so my
image links are www.website.com/img/image.gif
I also included a screenshot, just incase I don't make sense.
http://img297.imageshack.us/img297/3197/dreamweaverdesignviewerni4.jpg

Which DW and which OS?
Is VIEW | Display External Files checked?
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
==================
"terry_cpac" <[email protected]> wrote in
message
news:fc9f90$dp6$[email protected]..
>I too have been experiencing this problem only recently.
I have been using
>DW
> to create eNewsletters, so all images are located on a
web server. I use
> the
> whole file path including the
http://www. etc. for all images and
> graphics. The
> Design view pane used to display these images with no
problems until
> recently.
> Now, no matter what I do, I can't get it to access any
image to display in
> the
> design view pane. This has been causing DW to hang every
time I try to
> open a
> file with images referenced this way. I hope there is a
solution to this
> problem.
>

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>

CS5 Design View: local page + images on server - images don't display

I've recently upgraded to DW CS5. I sometimes have occasion to design pages containing images that are on the server.
In DW8, images on the server would display in Design View.
In DW CS5, images on the server display a broken image icon in Design View.
Yes, I know I can switch to Live View, but I'd rather not, as I find Live View very difficult to edit in (if at all; I can somewhat edit in the code, but what's the point?). I'd far rather be able to see the images as I'm writing the page in Design View.
Am I missing some setting somewhere, or is this the way it is?

function(){return A.apply(null,[this].concat($A(arguments)))}
Diane Vigil wrote:
I found it under View > Display External Files.
Thanks so much for this. Really appreciated.
Used to be under the Commands menu long ago. Obviously relocated to the View menu.
That means that Adobe's own online Help docs for CS5 are incorrect.
http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7cc1a .html
Note: When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e., an image that is not available on the local hard drive). If you experience performance problems while working, however, you might want to disable viewing the image in Design view by deselecting Commands > Display External Files.

Spry UI 1.7 slideshow images cascade down page in design view

Similar Messages

Maybe you are looking for